Skip to main content
WPrec
WPrec
Associate II
April 5, 2019
Solved

Animate objects (box, circle, etc.)

  • April 5, 2019
  • 8 replies
  • 2270 views

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?

This topic has been closed for replies.
Best answer by Martin KJELDSEN

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

8 replies

Martin KJELDSEN
Martin KJELDSEN
Principal III
April 8, 2019

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
WPrecAuthor
Associate II
April 8, 2019

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
Martin KJELDSEN
Principal III
April 8, 2019

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
WPrecAuthor
Associate II
April 9, 2019

Thank you Martin.

An example would be great!

Martin KJELDSEN
Martin KJELDSEN
Principal III
April 9, 2019

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
Martin KJELDSENBest answer
Principal III
April 10, 2019

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
WPrecAuthor
Associate II
April 23, 2019

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
Martin KJELDSEN
Principal III
April 29, 2019

Hi @WPrec​,

That's great! You're welcome.

Best regards,

Martin

Terms & ConditionsAccessibility statement