Tiny.js

简单使用

动画可以让互动应用丰富多彩，开发也更轻松，你可以像这样创建一个动画：

// 新建 action，时长是2000ms，旋转360度
var action = Tiny.RotateTo(2000, {rotation: Tiny.deg2radian(360)});
// 执行 action RepeatForever
sprite.runAction(Tiny.RepeatForever(action));

运行效果如下（点击播放）：

使用 MoveTo 可以让精灵从当前位置移动到指定的位置，下面的代码会让精灵在 1000ms 内移动到 x=100，y=100 的位置：

Tiny.MoveTo(1000, Tiny.point(100, 100));

顺序执行

那么，如何让多个动画按顺序执行呢？使用 Container 类的实例化对象的 runSequenceAction 方法：

var moveToAction = Tiny.MoveTo(1500, Tiny.point(100, 150));
var rotateTo360Action = Tiny.RotateTo(2000, {rotation: Tiny.PI_2});
sprite.runSequenceAction(moveToAction, rotateTo360Action);

运行上面的代码，精灵就会先向右下角移动，然后旋转360度。

最后，建议你不要让精灵同时执行多个动画，这样可能会有冲突。 如果有这种需要，可以阅读"扩展篇"介绍的高级用法来实现。

Tips

  • Tiny.point 是一个静态方法，用于快速创建一个点对象，Tiny.point(100, 100) 相当于 {x: 100, y: 100}；
  • Tiny.scale 也是一个静态方法，用于快速创建一个缩放值，Tiny.scale(0.5, 0.5) 相当于 {scaleX: 0.5, scaleY: 0.5}；
  • 如果两个入参一样，可以直接传一个，如：Tiny.point(100) 和 Tiny.point(100, 100) 一样

手动移除

为防止大量创建 Action 导致内存泄露，你应该在需要的时候对它们进行手动移除。

可以使用 Container 类的实例化对象的 removeAction 来移除某个（些）Action，removeActions 来移除该对象上绑定的所有 Action，removeActionsTrace 来移除该对象及其子集上绑定的所有 Action。

// 移除该对象上绑定的所有 Action
sprite.removeActions();

// 移除该对象上绑定的某个（些） Action
sprite.removeAction(action);

// 移除该对象及其子集上绑定的所有 Action
sprite.removeActionsTrace();

也可以使用 Action 的静态方法 cleanup 移除对象上的所有 Action：

Tiny.Action.cleanup(sprite);

自动移除

每一个显示对象在被 remove 时都会自动清除其及子集的所有的 actions，比如：removeChild、removeChildAt、removeChildren。

← 重复 →