Is it possible to move the Box widgets both upside and downside ?

[Shivani]

Hello,

I am using STM32H745XIH6 controller Board, and a display resolution of 480 x 480. In my application I need to move the box widget to a particular x and y positions. The thing is we need a smooth movement of the box at  a particular position. In the interaction 1, Am selecting the "Screen transition begins" in the trigger, and the action to "move the widget i.e. Box 1" and the "y value(ex: 300)" for the position to move the box.

And the box moved to the particular position that I have mentioned. but when I have added another interaction after some animation delay to move the same widget to another position by changing the value in interaction 2(y value changed to 100) then the box directly goes from '0' to '100' rather than changing from '0' to '300'(box will move downwards first) and '300' to '100'(box will move upwards next).

Could you please help me in this regards?

[t.decker]

Hi @Shivani,

have you looked at the MoveAnimator-Mixin? I never used the Move-thing inside an Interaction, but the MoveAnimator is quite easy to use.

https://support.touchgfx.com/docs/development/ui-development/touchgfx-engine-features/mixins

[Shivani]

Hi .@t.decker,

Yes, I have used the Move Animator, and it is quite easy for the Move-thing, but for the tilting of a box what needs to be implemented?

Thank you...

[t.decker]

Hi @Shivani,

if you mean rotating an item, that's beyond my knowledge. Not sure if this is even possible?

[hellohello]

Hello @Shivani ,

By "box" I assume you mean a rectangular shape with solid color.

As @t.decker said, you can use the moveAnimator mixin to create smooth x and y movement of your widgets.

The box widget cannot be rotated.
However, other widget can be rotated : shape, scalableImage, SVG image, textureMapper, etc.

You must call your moveAnimator startAnimation at some point. Simply create a function to start the rotation and call it at the same time as your startAnimation.

To make the animation smooth, you can look at easing equations and their mathematical formulas on this website : Easing Functions Cheat Sheet (easings.net)

Finally, you can use the handleTickEvent to implement this easing equation frame by frame.

Regards,