缓动系统
import { _decorator, v3, tween, Component, EventTouch, Node, log } from 'cc' ;
const { ccclass, property } = _decorator;
@ccclass ( 'GameRoot' )
export class GameRoot extends Component {
@property ( Node) button: Node;
@property ( Node) a: Node;
start ( ) {
this . button. on ( Node. EventType. TOUCH_START , ( event: EventTouch ) => {
this . button. setScale ( 0.9 , 0.9 )
} )
this . button. on ( Node. EventType. TOUCH_END , ( event: EventTouch ) => {
this . button. setScale ( 1 , 1 )
this . myAnimation ( )
} )
}
myAnimation ( ) {
tween ( this . a)
. to ( 1 , { position: v3 ( 0 , 200 , 0 ) } )
. start ( )
const obj = {
n: 0
}
tween ( obj)
. to ( 3 , { n: 1000 } , {
onUpdate : ( target, ratio ) => {
console. log ( target, ratio) ;
}
} )
. start ( )
}
update ( deltaTime: number ) {
}
}
修改label组件文字 0 ~ 1000
import { _decorator, v3, tween, Component, EventTouch, Node, log, Label } from 'cc' ;
@property ( Node) LableNode: Node;
const comp = this . LableNode. getComponent ( Label)
tween ( obj)
. to ( 3 , { n: 1000 } , {
onUpdate : ( target, ratio ) => {
console. log ( target, ratio) ;
comp. string = ` ${ obj. n} `
}
} )
. start ( )
加入动画
tween ( obj)
. to ( 3 , { n: 200 } , {
onUpdate : ( target, ratio ) => {
console. log ( target, ratio) ;
comp. string = ` ${ obj. n. toFixed ( 2 ) } `
} ,
easing: 'elasticOut'
} )
. start ( )
跳跃效果 tween
tween ( obj)
. to ( 3 , { n: 200 } , {
onUpdate : ( target, ratio ) => {
this . a. setPosition ( 0 , obj. n)
} ,
easing: 'quadOut'
} )
. to ( 3 , { n: 0 } , {
onUpdate : ( target, ratio ) => {
this . a. setPosition ( 0 , obj. n)
} ,
easing: 'quadIn'
} )
. start ( )
直接拿到Label
@property ( Label) LableCom: Label;
const comp = this . LableCom
循环跳跃 tween
tween ( obj)
. to ( 0.5 , { n: 200 } , {
onUpdate : ( target, ratio ) => {
this . a. setPosition ( 0 , obj. n)
} ,
easing: 'quadOut'
} )
. to ( 0.5 , { n: 0 } , {
onUpdate : ( target, ratio ) => {
this . a. setPosition ( 0 , obj. n)
} ,
easing: 'quadIn'
} )
. union ( )
. repeatForever ( )
. start ( )
循环跳跃第二种写法
tween ( obj)
. repeatForever (
tween ( obj)
. to ( 0.5 , { n: 200 } , {
onUpdate : ( target, ratio ) => {
this . a. setPosition ( 0 , obj. n)
} ,
easing: 'quadOut'
} )
. to ( 0.5 , { n: 0 } , {
onUpdate : ( target, ratio ) => {
this . a. setPosition ( 0 , obj. n)
} ,
easing: 'quadIn'
} )
)
. start ( )
停止tween tag
tween ( obj)
. tag ( 111 )
. to ( 10 , { n: this . a. position. x - 300 } , {
onUpdate : ( target, ratio ) => {
this . a. setPosition ( obj. n, this . a. position. y)
} ,
} )
. start ( )
Tween. stopAllByTag ( 111 )
停止tween 方法二 this.leftTween.stop()
import { _decorator, v3, tween, Component, EventTouch, Node, log, Label, Tween } from 'cc' ;
leftTween: Tween< object>
this . leftTween = tween ( obj)
. to ( 10 , { n: this . a. position. x - 300 } , {
onUpdate : ( target, ratio ) => {
this . a. setPosition ( obj. n, this . a. position. y)
} ,
} )
. start ( )
this . leftTween. stop ( )
例如颜色变换
const color = new Vec3 ( 255 , 255 , 255 )
tween ( color)
. to ( 3 , { x: 10 , y: 50 , z: 0 } , {
onUpdate : ( ) => {
console. log ( color. x, color. y, color. z) ;
this . LableCom. color = new Color ( color. x, color. y, color. z)
} ,
} )
. start ( )
循环变色
tween ( color)
. to ( 3 , { x: 10 , y: 50 , z: 0 } , {
onUpdate : ( ) => {
console. log ( color. x, color. y, color. z) ;
this . LableCom. color = new Color ( color. x, color. y, color. z)
} ,
} )
. to ( 3 , { x: 10 , y: 50 , z: 100 } , {
onUpdate : ( ) => {
console. log ( color. x, color. y, color. z) ;
this . LableCom. color = new Color ( color. x, color. y, color. z)
} ,
} )
. union ( )
. repeatForever ( )
. start ( )