Cocos Creator中的Tween

4 篇文章 0 订阅
2 篇文章 0 订阅

在这里插入图片描述
  最新的Cocos Creator 3.x版本使用了Tween系统来代替原来的Action系统,很多小伙伴不明白Tween到底是什么,并且怎么用。今天就来给大家讲解一下Tween吧,希望能够帮助大家快速掌握Tween的使用,并且对Tween有一个更加深入的了解。先来看一张UML图:
在这里插入图片描述
  此UML图中,涉及到两个新的类Tween以及TweenAction,下面分别介绍。


何为TweenAction

  新增的TweenAction类从ActionInterval派生(图中简化成从Action派生),它是一个非常特殊的Action,能够针对目标对象的多个任意属性进行指定的缓动方式进行变换。只要目标对象的属性能够直接赋值和取值,那么这个TweenAction就能够胜任。后面的by接口和to接口就是用这个TweenAction实现的。它的强大之处在于,不用像以前的版本那样,每一个属性都要实现重复代码的Action类。是不是非常灵活和强大?

何为props

  props其实就是TweenAction需要进行变换的属性,它其实就是一个键值对数据结构,键为对象的属性名称,值为进行变换的值。例如:

{ angle: 360, position: v3(100, 80, 10) }

ITweenOption

  ITweenOption其实就是进行变换的缓动方式以及变换过程中的回调。你可以指定如下属性:

  • easing: 缓动方式
  • progress: 插值函数,这个是用来自定义缓动方式的
  • onStart: 缓动动作启动时的回调函数
  • onUpdate: 缓动动作更新时的回调函数
  • onComplete: 缓动动作完成时的回调函数

何为Tween

  Tween作为一个类,本质上其实就是一个Action的建造器或者创建器,类似ActionBuilder或者ActionCreator,负责Action的创建是它的主要职责之一。在使用的时候,你可以告诉这个Tween对象,我需要添加什么样的Action到内部缓冲中,也可以添加多个Action或者Tween来组合成一个串行的Action或者并行的Action。

  Tween的另一个职责就是它内部维护一个最终的Action,并且可以控制这个Action的启动与停止。

  Tween类的内部有几个重要成员:

  • _target: 目标对象,比如节点
  • _actions: 类型为Action[],创建过程中的一组Action缓冲
  • _finalAction: 创建完成之后的最终使用的Action

  Tween类的几个重要接口:

  • target: 设置目标对象
  • delay: 添加一个DelayAction
  • to: 添加一个TweenAction来将指定的属性变换(每个属性变换到多少,目标值)
  • by: 添加一个TweenAction来将指定的属性变换(每个属性变换多少,变化值)
  • union: 将缓冲中的多个Action变成一个串行Action
  • sequence: 将指定的多个Action或者Tween变成一个串行Action后添加到缓冲中
  • parallel: 将指定的多个Action或者Tween变成一个并行Action后添加到缓冲中
  • start: 开始运行,此时会创建最终的Action,并且启动此Action。
  • stop: 停止Action的运行

Tween的使用

  知道原理并且知道几个重要接口之后,使用起来就比较简单了。使用步骤如下:

  1. 创建一个Tween对象(new Tween)
  2. 往Tween里面添加一个一个的Action创建(to, by, then, …)
  3. 执行Tween对象,引擎会完成最终的Action创建,并且启动Action(start)

  例如:在2秒以内,让A物体从当前位置,移动到(100, 80, 10)位置,代码如下:

  • 你要改变A物体位置,所以Tween的目标对象是A物体所在节点。

    // 创建了一个针对A物体节点的Tween对象
    let tw = new Tween(A物体对应节点);
    
  • 添加中间执行过程Action,这个执行过程可以是一个,也可以是多个。这里我们要将目标从当前位置移动到(100, 80, 10)的位置,并且旋转到360度,所以使用Tween对象的to函数来指定:

    tw.to(时间(2s), 属性列表{})
    

    上面的属性列表,可以填写Tween针对的目标对象实例中的任意属性,我们这里是angle和position,所以如下的代码:

    tw.to(2.0, { angle: 360, position: v3(100, 80, 10) });
    

    这样就给目标物体创建了一个Action,2s之内从当前位置移动到了目标位置(100, 80, 10),并且旋转了360度。

  • 启动执行这个tween对象:

    tw.start();
    

    最后整体代码如下:

    // step1: 创建一个针对目标的Tween对象
    let tw = new Tween(this.node);     
    // step2: 添加执行过程
    tw.to(2.0, { angle: 360, position: v3(100, 80, 10) });     
    // step3: 开始执行tween对象
    tw.start();
    

Tween可以添加哪些过程

  我们可以去查看一下Tween的API文档,在代码编辑器里面右键Tween对象,然后再点击"Go to Definition"

在这里插入图片描述

  这样可以知道往这个Tween里面可以添加哪些Action。这些接口在creator.d.ts里面都有,这里就不再重复编写。下面再总结一下:

  • by和to方式的Action添加,只要目标对象的属性是可直接读取和设置的,就可以。例如节点的angle属性,就可以直接读取和赋值。
  • 一些特殊形式的Action添加,其实这个也就那么几个,比如delay、show等等

Tween的源码实现

  如果你想更加深入的了解Tween,可以打开Cocos引擎源码tween/tween.ts直接看源代码。你会发现代码并不多,也就500行代码左右,逻辑也非常简单。我建议把这个类完整的看一遍,并且也建议花点时间把TweenAction类也完整的看一遍,这样使用起来会更加得心应手,并且心中有数。

  好吧,希望这篇文章能够帮到大家。
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值