cancel
Showing results for 
Search instead for 
Did you mean: 

Scroll animation

heyo
Senior

Does in the TouchGFX is scrollable container animation? I use doScroll() function but it would be nicer if it scrolls automatically with animation or smoothly.

1 ACCEPTED SOLUTION

Accepted Solutions

Hello @heyo ,

Scrollable container does not provide a function for animation directly, however, you can use Easing Equations to calculate the deltas to have a smoother scroll. You can use a method similar to this:

#include "touchgfx/EasingEquations.hpp"  //To have Easing Equations

//If new item is inserted, set the animationIsRunning to true

void Screen1View::handleTickEvent()
{
    if (animationIsRunning)
    {
        scrollWithAnimation();
    }
}

void Screen1View::scrollWithAnimation()
{
    const int duration = 50;

    if (animationCounter <= duration)
    {
        int16_t delta = EasingEquations::linearEaseIn(animationCounter, 0, /* The final scroll value */, duration);
        scrollableContainer1.doScroll(0, delta);  //If scrolling vertically
        scrollableContainer1.invalidate();
        animCounter++;
    }
    else
    {
        animationCounter = 0;
        animationIsRunning = false;
    }
    
}

 

I hope this helps you!

Mohammad MORADI
ST Software Developer | TouchGFX

View solution in original post

3 REPLIES 3

Hello @heyo ,

Scrollable container does not provide a function for animation directly, however, you can use Easing Equations to calculate the deltas to have a smoother scroll. You can use a method similar to this:

#include "touchgfx/EasingEquations.hpp"  //To have Easing Equations

//If new item is inserted, set the animationIsRunning to true

void Screen1View::handleTickEvent()
{
    if (animationIsRunning)
    {
        scrollWithAnimation();
    }
}

void Screen1View::scrollWithAnimation()
{
    const int duration = 50;

    if (animationCounter <= duration)
    {
        int16_t delta = EasingEquations::linearEaseIn(animationCounter, 0, /* The final scroll value */, duration);
        scrollableContainer1.doScroll(0, delta);  //If scrolling vertically
        scrollableContainer1.invalidate();
        animCounter++;
    }
    else
    {
        animationCounter = 0;
        animationIsRunning = false;
    }
    
}

 

I hope this helps you!

Mohammad MORADI
ST Software Developer | TouchGFX

Sorry but it's working like doScroll() function..

If you press insert new item rapidly, there might be a chance that the animation is not ended yet and the new item is added quickly. You have to allow the animation steps to end before adding a new item

Mohammad MORADI
ST Software Developer | TouchGFX