Animate objects (box, circle, etc.)

[WPrec]

Is it possible to animate standard objects (e.g. box, circle, shapes, containers, etc.) with EasingEquations?

For example take a circle with a small radius and a thin line and zoom it to a bigger radius and thick line smoothly in 1 second?

[Martin KJELDSEN]

Hi @WPrec​,

Yes, through Mixins in the bottom right hand of the designer. You can add a MoveAnimator or FadeAnimator, for isntance, to your box. It will then be available through interactions that you can then specify an easing equation for.

Best regards,

Martin

[WPrec]

Hi Martin,

I saw the MoveAnimator and FadeAnimator and they work well.

But the intention is, to change object values (e.g. width, height, line width, color or something else) with EasingEquations?

[Martin KJELDSEN]

Ah, okay. That's not supported right now through the designer. Sorry! You could do it in pure code by making your widget tick-aware and then just getting your values from an easing equation over time. Does that make sense?

If i get some time i could create an example .

/Martin

[WPrec]

Thank you Martin.

An example would be great!

[Martin KJELDSEN]

Okay, i'll try to get it done this week. I just had a talk with some guys at the office about creating a better framework for animations. Right now it's kind of hidden away through a combination of mixins and interactions - And not present for some things like resizing widgets.

If you want to resize an image you could always use ZoomAnimationImage which uses a scaleable image / texturemapper.

[Martin KJELDSEN · Accepted solution]

Hi @WPrec​,

Instead of coming up with a new example, i'd like to show you how this can be done using what we call "Mixins", that you can select for a widget (e.g. a box) through the designer. For the MoveAnimator mixin (touchgfx/mixins/MoveAnimator.hpp) it uses an easing equation to calculate both x and y and uses the moveTo() method to move and invalidate the widget. If we were to simply modify this code to also set a size this clearly shows how animating the size of a widget over time can be done.

So, you could create your own mixin (just copy the MoveAnimator) and do something like the following:

/**
     * @fn void MoveAnimator::nextMoveAnimationStep()
     *
     * @brief Execute next step in move animation.
     *
     *        Execute next step in move animation and stop the timer if necessary.
     */
    void nextMoveAnimationStep()
    {
                    ...
                    T::moveTo(moveAnimationStartX + deltaX, moveAnimationStartY + deltaY);
 
                    // Besides moving, also set width and height to some value returned by the easingequation
                    T::setWidth(deltaX);
                    T::setHeight(deltaY);
                    T::invalidate();
 
                    moveAnimationCounter++;
                }
                ....
    }

Create an application with a moveanimator (interaction on screen-entry) to get a feel for what code gets generated and how to use it.

Best regards,

Martin

[WPrec]

Hi Martin,

sorry for the late reply - but the job goes on.

I tried this with a circle and changed the radius and startArc and endArc and it works.

Thank you very much.

[Martin KJELDSEN]

Hi @WPrec​,

That's great! You're welcome.

Best regards,

Martin