Defold动画之补间动画

89 阅读3分钟

前面讲了Defold支持的动画类型,也详细讲了Defold的逐帧动画,接下来本文讲Defold的补间动画。补间动画很好理解,比如,在让某一个Game Object从位置A移动到位置B,只需要告诉Defold位置A与位置B的值以及缓动函数与动画播放方式就可以完成此动画。

补间动画在Defold中又被称为属性动画,Game Object与各种Component的属性都可以用做补间动画。以Game Object的补间动画为示例。

go.animate(".", "position.x", go.PLAYBACK_ONCE_FORWARD, target_x, go.EASING_LINEAR, 
    duration, delay, complete_function)

从以上代码可知:

  1. 第一个参数是要执行动画的game object的url。
  2. 第二个参数是变化的属性,这个属性只要是数值类型的就可以,当然也包含vector3或vector4这一类的数据类型。本示例中只是变化位置的x坐标值,也可以直接使用position,进行位置的变化。
  3. 第三个参数表示动画的播放方式,下面列表会详细讲解播放方式。
  4. 第四个参数表示属性变化的目标值。
  5. 第五个参数表示指定属性从原值到目标值之间的变化趋势,也就是缓动函数,后面有列表说明。
  6. 第六个参数表示完成一次补间动画需要的时长,单位为秒。
  7. 第七个参数表示每次动画开始前延迟多长时间,单位为秒。
  8. 第八个参数表示动画完成之后回调函数,如果动画被取消或动画插放模式为循环,那么此回调函数不执行。

动画播放方式如下表所示,其实与逐帧动画的播放方式相似。

播放方式说明
go.PLAYBACK_ONCE_FORWARD从头到尾播放一次
go.PLAYBACK_ONCE_BACKWARD从尾到头播放一次
go.PLAYBACK_ONCE_PINGPONG从头到尾再从尾到头播放一次
go.PLAYBACK_LOOP_FORWARD从头到尾循环播放
go.PLAYBACK_LOOP_BACKWARD从尾到头循环播放
go.PLAYBACK_LOOP_PINGPONG从头到尾再从尾到头循环播放

缓动函数说明示例如下所示:

​类型​​模式​​常量示例​​运动特点​
​线性​匀速LINEAR无加速/减速
​多项式​缓入INQUADINQUINT启动慢,后期加速越猛
缓出OUTQUADOUTQUINT启动快,结束前减速明显
缓入缓出INOUTQUADINOUTCUBIC开头加速 + 结尾减速
​物理效果​回弹INBOUNCE/OUTBOUNCE模拟物体弹跳
弹性INELASTIC/OUTELASTIC橡皮筋拉伸回弹
回拉INBACK/OUTBACK运动前/后轻微过冲再修正
​数学曲线​正弦INSINE/OUTSINE平滑波浪式运动
圆形INCIRC/OUTCIRC圆周轨迹加速/减速
指数INEXPO/OUTEXPO开始/结束近乎静止,中间骤变
​组合模式​缓出+缓入OUTINBACK/OUTINBOUNCE先加速飞出,再减速停止(带特效)

关于缓动函数的选择建议如下:

  1. 物理仿真 使用BOUNCE(弹跳)、ELASTIC(弹性)、BACK(回拉)三类。
  2. 自然运动 使用SINE(正弦)或QUAD(二次方)两类。
  3. 夸张效果 使用EXPO(指数)或QUINT(五次方)两类。
  4. 通用场景 使用EASING_INOUTQUADEASING_INOUTSINE