0
点赞
收藏
分享

微信扫一扫

Egret Engine(二十一):缓动动画


搭建

  • 修改​​egretProperties.json​​​ 中的​​modules​​:
  • ​{ "name": "tween" }​
  • 命令编译:​​egret build -e​
  • 运行项目:​​egret run -a​

定义需要缓动的对象

  • 展示:
  • Egret Engine(二十一):缓动动画_egret

const shp: egret.Shape = new egret.Shape();
shp.graphics.beginFill(0x00ff00);
shp.graphics.drawRect(0, 0, 100, 100);
shp.graphics.endFill();
this.addChild(shp);

基本用法

  • 展示:
  • Egret Engine(二十一):缓动动画_数据_02

const tw = egret.Tween.get(shp);
tw.to({ x: 150 }, 1000); // 1s 从 0 移动到 150

循环缓动

  • 展示:
  • Egret Engine(二十一):缓动动画_游戏引擎_03

const tw = egret.Tween.get(shp, { loop: true });
tw.to({ x: 150 }, 1000); // 1s 从 0 移动到 150

缓动曲线&获取曲线数据

  • 展示:
  • Egret Engine(二十一):缓动动画_游戏引擎_04

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()​​ 用于多个缓动连续设定中设置中间的等待时间,以毫秒为单位。
  • 展示:
  • Egret Engine(二十一):缓动动画_游戏引擎_05

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);


举报

相关推荐

0 条评论