搭建
- 修改
egretProperties.json
中的modules
:
-
{ "name": "tween" }
- 命令编译:
egret build -e
- 运行项目:
egret run -a
定义需要缓动的对象
- 展示:
const shp: egret.Shape = new egret.Shape();
shp.graphics.beginFill(0x00ff00);
shp.graphics.drawRect(0, 0, 100, 100);
shp.graphics.endFill();
this.addChild(shp);
基本用法
- 展示:
const tw = egret.Tween.get(shp);
tw.to({ x: 150 }, 1000); // 1s 从 0 移动到 150
循环缓动
- 展示:
const tw = egret.Tween.get(shp, { loop: true });
tw.to({ x: 150 }, 1000); // 1s 从 0 移动到 150
缓动曲线&获取曲线数据
- 展示:
const tw = egret.Tween.get(shp, { onChange: function (){
console.log(this.x); // 缓动曲线数据
}, onChangeObj: shp });
tw.to({ x: 150 }, 1000, egret.Ease.backInOut); // 1s 从 0 移动到 150
缓动对象的 call() wait()
-
call()
在某个缓动过程结束时,可以用 call() 产生一个回调 -
wait()
用于多个缓动连续设定中设置中间的等待时间,以毫秒为单位。 - 展示:
const tw = egret.Tween.get(shp, { loop: true });
tw.to({ x: 250 }, 500).call(function () { console.log("右上角"); }).wait(100)
.to({ y: 250 }, 500).call(function () { console.log("右下角"); }).wait(100)
.to({ x: 0 }, 500).call(function () { console.log("左下角"); }).wait(1000)
.to({ y: 0 }, 500).call(function () { console.log("左上角"); }).wait(100);