[FREE]Tween - extension to animate components by changing their properties

WHAT'S A TWEEN

A tween (from in-between) is a concept that allows you to change the values of the properties of an object in a smooth way. You just tell it which properties you want to change, which final values should they have when the tween finishes running, and how long should this take, and the tweening engine will take care of finding the intermediate values from the starting to the ending point. (from tween.js user guide | tween.js)

BLOCKS

Add a animator to a set.

2022-01-27_103545
this can be used to add animator on same component with defferent properties, or same properties of defferent componnet, event can use to tween color(backgroundColor, textColor)

component: any visible component
property: string, the property name which you want to tween. You can refer to below Property blocks
interpolator: int number from 1 to 8, representing:1.AccelerateDecelerate, 2.Accelerate,3.Decelerate,4.Bounce, 5.Linear, 6.AnticipateOvershoot, 7.Anticipate, 8.Overshoot.
duration:int number, how long this animator last
delay: int number, how long this animator will be delayed.
values: list of number (or color). if length is 1, that means from this property's current value to this number. if length >= 2, that means, from 1st number to 2nd, to 3rd....

Start the ainimator set

2022-01-27_103550
isTogether: boolean, true for play together, false for play one by one.

Pause the animator set

2022-01-27_103604

Resume the paused animator set

2022-01-27_103610

Cancel the animaiting

2022-01-27_103615

Removal all animator in this set

2022-01-27_103621
use this before generate a new set.

Animation End event

2022-01-27_103627
fired when the animation set play finished or canceled.

property helper


this help you to input the property name with no typo.
This extension maybe support other properties than here listed.
Tell me if you find more.

DEMO VIDEO

DOWNLOAD LINK:

AIX:
https://kevinkun.cn/tween

CREDIT

Thanks for Rush by @Shreyash

16 Likes

Wow! another epic extension

1 Like

Sorry. please add animation effects like clicking buttons.

like this video

there is an extension for this. this is called ripple effect. pls search the forum for more.

3 Likes

thanks for your information

demo aia added.

Carousel with tween extension:
carousel_with_tween (1).aia (46.4 KB)
Screenshot_2022_1113_212742
real effect is much better than this gif.

4 Likes

That was awesome :star_struck: