[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.

image

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)

param type description
component visible component NOT working with ImageSprites or Balls
property string including but not limited to X, Y, TranslationX, TranslationY, ScaleX, ScaleY, RotationX, RotationY, RotationZ, BackgroundColor, TextColor, only if the property value is a number
values list 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/Pause/Cancel/Resume/Reverse set

image

Animation End event

image

ScreenDensity

image
usefull when you tween the x/y/translationX/translationY

Properties

image

name type desc
Duration int how long the animation last, in millis, default 500
Interpolator int animation type. :1.AccelerateDecelerate, 2.Accelerate,3.Decelerate,4.Bounce, 5.Linear, 6.AnticipateOvershoot, 7.Anticipate, 8.Overshoot
IsTogether boolean true for play together, false for play one by one.
RepeatCount int number to repeat the animation. -1 for infinity
RepeatMode int 1 for restart, 2 for reverse
StartDelay int how many millis to delay the animation

DOWNLOAD LINK:

AIX:

17 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.

5 Likes

That was awesome :star_struck:

is there a form to use this animation in canvas for move sprites or balls and next, freeze the animation using button pause?

No this is for components. Use the existing event controls for the canvas to manage sprite and ball control.

set the ball/imagesprite heading, speed, internval, the ball will move/animating. if you want it pause, set its speed to 0.

I tried to use the tween blocks with my image sprite called "Arrow", but the app throws an exception. I have the suspicion that it does not accept imagesprites as components. But on the other hand, maybe I did something wrong, can you have a look please?


tween-error

You have the solution some responses before:

Thank you, I understood Kevinkun's last answer as it was possible.

I don't see any blocks that would rotate the image sprite smoothly though. Am I correct in assuming I'd have to program the smooth transition between two heading angles myself?