补间动画是一个概念,允许你以平滑的方式更改对象的属性。你只需告诉它哪些属性要更改,当补间结束运行时它们应该具有哪些最终值,以及这需要多长时间,补间引擎将负责计算从起始点到结束点的值。

就是说:指定动画持续的时间,开始状态和结束状态。扩展就可以(根据插值器)自动计算中间的状态,生成动画。

目前的问题:

不支持画布、图像精灵、球形精灵。

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 http://tweenjs.github.io/tween.js/docs/user_guide.html)

BLOCKS

Add a animator to a set.

2024-03-23T11:56:09.png

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)

paramtypedescription
componentvisible componentNOT working with ImageSprites or Balls.
任何可见组件,但不包含图像精灵和球形精灵。
propertystringincluding but not limited to X, Y, TranslationX, TranslationY, ScaleX, ScaleY, RotationX, RotationY, RotationZ, BackgroundColor, TextColor, only if the property value is a number
可以更改的属性名。
valueslistif 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
若列表长度为1,表示从原来的属性值变为这个值。若长度大于2, 表示从第一个值变为第二个值,然后变为第三个...

Start/Pause/Cancel/Resume/Reverse set

开始、取消、暂停、恢复、反转动画。
2024-03-23T11:56:34.png

Animation End event

动画完成事件
2024-03-23T11:56:53.png

ScreenDensity

屏幕分辨率
2024-03-23T11:57:17.png
useful when you tween the x/y/translationX/translationY
在tween位置或者大小时有用。

Properties

2024-03-23T11:57:43.png

nametypedesc
Durationinthow long the animation last, in millis, default 500
动画持续的时间
Interpolatorintanimation type. :1.AccelerateDecelerate, 2.Accelerate,3.Decelerate,4.Bounce, 5.Linear, 6.AnticipateOvershoot, 7.Anticipate, 8.Overshoot
动画的类型,比如加速、减速、匀速等。可以自己试验下。默认是5 匀速
IsTogetherbooleantrue for play together, false for play one by one.
如果有多个动画,是否同时播放还是依次播放
RepeatCountintnumber to repeat the animation. -1 for infinity
动画重复次数。-1表示无限重复。默认为0表示不重复
RepeatModeint1 for restart, 2 for reverse
重复模式。1-从新开始 2-倒叙播放
StartDelayinthow many millis to delay the animation
动画延迟多久后才开始。单位毫秒

DOWNLOAD LINK:

下载链接
AIX:
cn.kevinkun.Tween.v4.aix

Demo

示例 侧边栏动画
sidebar.aia
其中使用了层叠布局扩展,thanks to @VSATISH13。
in this demo, extension Overlap by VSATISH13 used .

标签: none

添加新评论