CocosCreatorアクションシステムとイージングシステムの概要

序文

アクションシステムは、一定時間内に変位、回転、スケーリング、ジャンプなどのさまざまなアクションを実現することです。

アクションシステムはCocosCreatorコンパイラのアニメーションシステムとは異なることに注意してください。アクションシステムはプログラマー向けのAPIインターフェースですが、アニメーションシステムはコンパイラーによって設計されています。アクションシステムはさまざまな使用シナリオに対応しています。通常、変位や回転などの単純な動きの場合、アニメーションシステムは比較的強力であり、さまざまなプロパティをUIに追加して、複雑なアニメーションを実現できます。

アクションシステムアクション

アクションはアクションコマンドであり、最初にアクションが作成されてから、ノードを介してアクションを実行できます。

アクションには、位置、サイズ、回転、およびその他のプロパティの変更が含まれます。

アクションは2つのカテゴリに分けられます:1。一定期間後にActionIntervialを完了します2.ActionInstantを瞬時に完了します

// 创建一个移动的动作,在 2 秒内,移动到 x = 100,y = 100 的位置
let action = cc.moveTo(2, 100, 100)
// 执行动作,所有的动作都需要一个目标通过 runAction 去执行它
node.runAction(action)

// 当我们想中途停止一个目标的运动
node.stopAction(action)

// 如果有多个目标在运动的过程中,想停止所有的动作
node.stopAllActions()

上記は簡単なアクションを実現するためのものです。

より多くのアクション効果を実現したい場合は、さまざまなインターフェイスを介して実現することもできます。

アクションシステムは、時間間隔アクションとインスタントアクションにも分けられます。

ActionIntervial

時間間隔アクション:指定されたアクションを一定時間内に完了することです。

cc.moveTo(2, 100, 100)     // 移动到目标位置,也就是说,无论我们的想要移动的目标处于什么位置,执行这个动作后,都会在 2s 的时间内移动到 x = 100,y = 100 的这个位置。参数可以是2 ~ 3个参数,如果是两个参数,则表示在 y轴 的方向上没有效果。
cc.moveBy(2, 100, 100)     // 移动指定的距离,也就是说,无论我们的想要移动的目标处于什么位置,执行这个动作后,都会在 2s 的时间内移动到距离上一个位置在 x 上增加 100 的距离,在 y 上增加 100 的距离,会产生叠加的效果。参数可以是2 ~ 3个参数,如果是两个参数,则表示在 y轴 的方向上没有效果。

cc.rotateTo(2, 1080 ,1080)     // 旋转到目标角度,在平面图上,参数为2 ~ 3个的效果是相同的,只有在三维效果才会不同。
cc.rotateBy(2, 1080, 1080)     // 在两秒内,旋转到指定的角度, 效果也是叠加的

cc.scaleTo(2, 0.5, 0.5)            // 在两秒内,将节点的大小缩放到指定的倍数
cc.scaleBy(2, 1.2, 1.2)     // 在两秒内,按指定的倍数去缩放节点,同样多次点击,效果会累加。

cc.skewTo(1, 60, 60)    // 在1 秒内,偏斜到目标角度
cc.skewBy(1, 40, 40)     // 在1秒内,偏斜指定的角度;多次点击,数值会累加

cc.jumpTo(3, 200, 200, 50, 5)       // 在3秒内,用跳动的方式移动到坐标为(200, 200)的位置,每次跳跃的高度为50,跳跃5次。
cc.jumpBy(2, 100, 100, 50, 5)          // 在2秒的时间内,用跳跃的方式指定的距离,(100, 100)会进行累加,每次跳跃的高度为50,跳跃次数为5次

cc.blink(3, 10)      // 在3秒内,闪烁10次,这个是基于透明度的闪烁

cc.fadeTo(3, 100)        // 在3秒内,修改透明度到100的值
cc.fadeIn(2)    // 渐显,参数为时间
cc.fadeOut(2)   // 渐隐,参数也为时间
cc.tintTo(3, 0, 255, 0)   // 在3秒内,修改颜色到指定值,后面的三个参数表示的是 rgb 的值
cc.tintBy(1, 100, 200, 100)  // 在1秒内按指定的增量(100, 200, 100)修改颜色,颜色会从 rgb(0, 0, 0) 开始增加

cc.delayTime(5)    // 表示延迟指定的时间量,用作延迟效果
cc.reverseTime()    // 用于反转目标动作的时间轴

ActionInstant

即時アクション:時間間隔なしですぐに発生するアクション

cc.show()      // 立即显示
cc.hide()        // 立即隐藏
cc.toggleVisibility()   // 显隐状态的切换

cc.removeSelf()    // 从父节点移除自身

cc.flipX()        // 沿X轴翻转
cc.flipY()        // 沿Y轴翻转

cc.place()       // 放置在目标位置,参数为X,Y的值

cc.callFunc()     // 执行一个回调函数

緩和

イージングアクション:ターゲットは、移動時間中のさまざまな段階で移動速度を調整します。

アクションをよりエレガントで剛性の低いものに見せるために、

cc.easeXXXを使用してイージング効果を追加できます。多くの方法があり、公式APIを確認できます。

使用例は次のとおりです。

var r = cc.rotateBy(2,360).easing(cc.easeCubicActionOut()); //按三次函数缓动退出
var rf = cc.repeatForever(r);
this.node.runAction(rf);

コンテナアクション

通常、アクションを計画するとき、それは単一のアクションではなく、目的の効果を達成するための複数のアクションの組み合わせになります。

cc.spawn    // 同步执行动作,也就是说,可以在相同的时间段内,执行不同的动作达到同步的效果。比如说,在进行位移的同时,可以实现旋转和缩放等动作。
cc.sequence    // 顺序执行动作,即在不同的时间段执行不同的动作
cc.repeat      // 重复执行动作,代入执行动作的参数后,要加一个重复的次数

例えば:

cc.repeat(cc.sequence(cc.moveTo(1, 400, 200), cc.moveTo(1, -400, -200),cc.delayTime(0.5), cc.tintBy(2, 10, 50, 10), cc.jumpTo(3, 400, -100, 100, 20),cc.flipY(true)), 10)
重复10次执行的动作 
  cc.repeatForever     // 永久重复动作
  cc.speed     //  修改动作速率

例えば:

cc.speed(cc.sequence(cc.moveTo(5, 400, 200), cc.moveTo(5, -400, -200)),  x1)
   x1 的数值越大,则动作的速率越快;数值为负值时,则不改变速率。

イージングシステムcc.tween

Cocos Creator v2.0.9から、新しいイージングアクションcc.tweenが追加されました。

Tweenは、アクションを作成するためのシンプルで柔軟な方法を提供します。Cocosの従来のcc.Actionと比較して、cc.Tweenはアニメーションの作成においてはるかに柔軟性があります。

チェーン構造でのアニメーションシーケンスの作成をサポートします。

任意のオブジェクトの任意のプロパティの緩和をサポートし、ノードのプロパティに制限されなくなりました。cc.Actionがプロパティのサポートを追加する場合、新しいアクションタイプを追加する必要があります。

cc.Actionとのミキシングをサポートします。

イージング機能またはプログレス機能の設定をサポートします。

cc.tweenを設定するには、主に2つの方法があります。特定の値に変更する方法と、値を変更する方法です。

//cc.tween可以同时设置多个属性
//cc.tween 在调用 start 时会将之前生成的 action 队列重新组合生成一个 cc.sequence 队列,依次执行。

cc.tween(this.node)
//to,在第一秒的时候放大为2倍,位置为(100,100),角度变化到120
.to(1,{scale:2,position:cc.v2(100,100),rotation:120})
//by,在第二秒时,缩放变化1.5倍,即最终放大为原始大小的3倍,位置变化了(100,100),即现在位置为(200,200)
.by(1,{scale:1.5,position:cc.v2(100,100)})
//在第三秒时缩放为原来的大小,位置设置为(0,0),然后加了一个缓动效果backOut
.to(1,{scale:1,position:cc.v2(0,0)},{easing:"backOut"})
.start();

上記の例からわかるように、cc.tweenはAPIのチェーンシーケンスであり、複数のプロパティを同時に変更でき、同時にイージング効果を設定できます。

それだけでなく、cc.tweenは、次のようなオブジェクトのプロパティを緩和することもできます。

var obj = { a: 0 }
cc.tween(obj)
 .to(1, { a: 100 })
 .start()

詳細情報と使用方法については、公式WebサイトAPIを確認してください。

https://docs.cocos.com/creator/api/zh/classes/Tween.html

おすすめ

転載: blog.csdn.net/bycw666/article/details/123897422