动画（Tween）

LM.Tween可以用来在两个值之间 平滑过渡（插值），并配合缓动函数（easing）实现自然的动画效果。

基本用法

// 创建一个图片
let img = new LM.ImgView();
// 创建一个动画对象，动画会自动执行
let tween = LM.Tween.get(img)
// 直接进行链式调用 注意后面不用加分号
// 1000 ms 让img移动到x=100、不透明度125
.to({x:100,alpha:125},1000)
// 上方动画结束后 执行函数调用
.call((=> {
      // 镜像
      img.isMirrored = true;
 });
 // 等待200ms
.wait(200)
// 上方等待结束后 执行函数调用
.call(() => {
      img.visible = false;
 });

 // 想要移除动画 可以通过调用动画对象上的remove方法 tween.remove();

get

获取一个动画对象。

序号	参数	解释	值	默认值
1	target	可以是任意组件，如图片、文字、骨骼动画、容器等
2	loop	动画是否循环，可不填	布尔值	false
3	isTuretTime	大部分情况下不用填写使用默认值即可。true使用现实时间，false使用工程帧时间，可不填。使用真实时间可能会出现工程掉帧/卡顿后动画不连贯，如果动画事件与现实时间无关联，建议不填写 使用工程帧时间。	布尔值	false

to

把获取的对象的数值属性变化到这个状态，会等它执行完以后才执行下一条。to的第二个参数是时间，单位毫秒。 第三个参数是缓动函数，不填就是正常插值动画，填写了缓动函数后，动画会根据缓动函数进行缓动。

let bar = new LM.ProgressBar;
bar.current = 0;
Tween.get(obj)
.to({current:100},1000)

let img = new LM.ImgView();
Tween.get(img)
// 这里Ease使用内置的函数库
.to({x:100,y:100},1000,LM.Ease.ExpoInOut)


let text = new LM.TextView();
Tween.get(text)
//这里Ease 使用自定义函数,可以自己写一个函数,也可以使用第三方的函数库,传入时刻进度， 返回当前动画进度。
.to({x:100},1000,function (t) {
   return  -Math.pow(2, -10 * t) + 1 ;
})

序号	参数	值	默认值
1	最终状态	对象上的属性
2	时	数值，必须填
3	缓动函数，通过传入缓动函数可对动画进行自定义缓动	例：LM.Ease.BackIn	见下文缓动方式

wait

等待，单位毫秒，会等它执行完以后才执行下一条。

call

动画执行完毕的回调。

缓动方式

缓动	解释	示例（x轴为时间，y轴为动画进度归一化值）
Normal	正常,没有特殊缓动效果
BackIn	回弹缓入，动画开始时产生轻微回弹效果
BackInOut	回弹缓入缓出，动画开始和结束时都产生轻微回弹效果
BackOut	回弹缓出，动画结束时产生轻微回弹效果
CircIn	圆形缓入
CircInOut	圆形缓入缓出
CircOut	圆形缓出
CubicIn	三次方缓入
CubicInOut	三次方缓入缓出
CubicOut	三次方缓出
ElasticIn	弹性缓入，动画开始时模拟弹性效果
ElasticInOut	弹性缓入缓出，动画开始和结束时都模拟弹性效果
ElasticOut	弹性缓出，动画结束时模拟弹性效果
ExpoIn	指数缓入，动画开始时速度变化较快
ExpoInOut	指数缓入缓出，动画开始和结束时速度变化都较快
ExpoOut	指数缓出，动画结束时速度变化较快
QuadIn	二次方缓入，动画开始时速度较慢，逐渐加快
QuadInOut	二次方缓入缓出，动画开始和结束时速度都较慢，中间速度较快
QuadOut	二次方缓出，动画结束时速度较慢，逐渐减速
QuartIn	四次方缓入
QuartInOut	四次方缓入缓出
QuartOut	四次方缓出
QuintIn	五次方缓入
QuintInOut	五次方缓入缓出
QuintOut	五次方缓出
SineIn	正弦缓入
SineInOut	正弦缓入缓出
SineOut	正弦缓出

示例

let img = new LM.ImgView();
img.src = "graphics/教学采集界面素材/橙娘.png";
this.addChild(img);
img.y = 200;
let tween = LM.Tween.get(img, true)
.to({ x: 600 }, 1000)
.wait(1000)