当前位置：网站首页>Degree engine (21): jog animation

Degree engine (21): jog animation

2022-07-17 23:34:00 【51CTO】

build

modify egretProperties.json Medium modules:

{ "name": "tween" }

Command compilation ：egret build -e
Run the project ：egret run -a

Define the objects that need to be jogged

Exhibition ：

Egret Engine（ The 21st ）： Slow motion animation _ Slow motion

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

Basic usage

Exhibition ：

Egret Engine（ The 21st ）： Slow motion animation _ Waiting time _02

       
       const tw = egret.Tween.get(shp);
       
tw.to({ x: 150 }, 1000); // 1s  from  0  Move to  150
      
1.
2.

Circulation jog

Exhibition ：

Egret Engine（ The 21st ）： Slow motion animation _egret_03

       
       const tw = egret.Tween.get(shp, { loop: true });
       
tw.to({ x: 150 }, 1000); // 1s  from  0  Move to  150
      
1.
2.

Slow motion curve & Get curve data

Exhibition ：

Egret Engine（ The 21st ）： Slow motion animation _egret_04

       
       const tw = egret.Tween.get(shp, { onChange: function (){
       
    console.log(this.x); //  Creep curve data 
       
}, onChangeObj: shp });
       
tw.to({ x: 150 }, 1000, egret.Ease.backInOut); // 1s  from  0  Move to  150
      
1.
2.
3.
4.

Slow the object call() wait()

call() At the end of a jog process , It can be used call() Generate a callback
wait() It is used to set the intermediate waiting time in multiple jog continuous settings , In Milliseconds .
Exhibition ：

Egret Engine（ The 21st ）： Slow motion animation _egret_05

       
       const tw = egret.Tween.get(shp, { loop: true });
       
tw.to({ x: 250 }, 500).call(function () { console.log(" Upper right corner "); }).wait(100)
       
.to({ y: 250 }, 500).call(function () { console.log(" The lower right corner "); }).wait(100)
       
.to({ x: 0 }, 500).call(function () { console.log(" The lower left corner "); }).wait(1000)
       
.to({ y: 0 }, 500).call(function () { console.log(" top left corner "); }).wait(100);
      
1.
2.
3.
4.
5.