CocosCreator3.8第二节缓动动画

缓动系统

/*
 * @Author: Coat 654264424@qq.com
 * @Date: 2024-01-26 10:31:06
 * @LastEditors: Coat 654264424@qq.com
 * @LastEditTime: 2024-01-26 11:01:41
 * @FilePath: \NewProject\assets\GameRoot.ts

 */
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) => {
            // x,y缩放
            this.button.setScale(0.9, 0.9)
        })
        this.button.on(Node.EventType.TOUCH_END, (event: EventTouch) => {
            // x,y缩放
            this.button.setScale(1, 1)

            //触发动画 缓动系统
            this.myAnimation()
        })
    }
    myAnimation() {
        // 改变对象目标的方法
        // 把a 1s内位置  to 和 by 方法
        // to是从当前属性到目标属性  by是累加量
        // to 的第一个参数是时间,第二个参数 是想改变属性值得一个对象
        //从 0 位置到达 200位置
        tween(this.a)
            .to(1, { position: v3(0, 200, 0) })
            .start()

        // 实现
        const obj = {
            n: 0
        }
        // 第三个参数是生命周期 完成 开始 和每帧调用
        // 最常用的是onUpdate 第一个是目标对象,第二个是缓动完成度 0~1
        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;
 // 获取label组件
        const comp = this.LableNode.getComponent(Label)
        // 第三个参数是生命周期 完成 开始 和每帧调用
        // 最常用的是onUpdate 第一个是目标对象,第二个是缓动完成度 0~1
        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;//label类型
 // 获取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()