TweenJS 补间 Sprite 的帧

Question

我有一个要使用 TweenJS 制作动画的精灵。我的第一个想法是写这样的东西：

createjs.Tween.get(mySprite).to({currentFrame:30}, 1000);

没用。简单地写...

mySprite.currentFrame = 10;
mySprite.currentAnimationFrame = 10;

...也不会导致精灵更新。所以我猜这些属性只能获取？（mySprite.gotoAndStop(10); 工作得很好。）

我需要调用某种更新方法吗？或者也许求助于一些 gotoAndStop hack？

这个问题似乎有点奇怪。如果有人能对此有所了解，我们将不胜感激。

Answer 1

好吧，我在 Sprite 中找不到我想要的功能，所以我这样做了：

Object.defineProperty(mySprite, "animationFrame", {
    get: function() {
        return this.currentFrame;
    },
    set: function(frame) {
        this.gotoAndStop(frame);
    }
});

这让我可以像这样补间：

createjs.Tween.get(mySprite).to({animationFrame:30}, 1000);

对我来说似乎有点老套，但至少它有效。

如果谁有更好的解决办法，请post吧！

Answer 2

currentFrame 属性是只读的，尽管 EaselJS 文档似乎没有提到这一点（看起来 YUIDocs 可能已经破坏了 @readonly 标签).由于两个原因，它可能会保持只读状态：

我们避免将 getter/setters 用于复杂行为，而 _goto 是。
它会产生模棱两可的结果（它等同于 gotoAndStop 还是 gotoAndPlay？）。

解决此问题的一种方法是利用 change 事件，如下所示：

mySprite.frame = 10;
createjs.Tween.get(mySprite).to({frame:30}, 1000).on("change", function(evt) {
   var tween = evt.target, target=tween.target;
   target.gotoAndStop(target.frame);
}

Answer 3

我首先尝试了 getter/setter，它只在开始和结束时发送补间值（对于两者之间的内容为空），然后创建并使用了一个类似于 CSSPlugin

的插件

/*
 * TweenFramePlugin
 * Visit http://createjs.com/ for documentation, updates and examples.

/**
 * @module TweenJS
 */

// namespace:
this.createjs = this.createjs||{};

(function() {
    "use strict";

    /**
     * A TweenJS plugin for working with frames

     * @class TweenFramePlugin
     * @constructor
     **/
    function TweenFramePlugin() {
        throw("TweenFramePlugin cannot be instantiated.")
    };


// static properties:
    /**
     * @property priority
     * @protected
     * @static
     **/
    TweenFramePlugin.priority = 0; // high priority, should run sooner




// static methods
    /**
     * Installs this plugin for use with TweenJS. Call this once after TweenJS is loaded to enable this plugin.
     * @method install
     * @static
     **/
    TweenFramePlugin.install = function() {
        console.log("TweenFramePlugin installed");
        createjs.Tween.installPlugin(TweenFramePlugin, ["frame"]);
        return createjs.Tween.IGNORE;
    };

    /**
     * Called by TweenJS when a new tween property initializes that this plugin is registered for. Generally, the call
     * to <code>Plugin.init</code> will be immediately followed by a call to <code>Plugin.step</code>.
     * @method init
     * @param {Tween} tween The related tween instance.
     * @param {String} prop The name of the property that is being initialized.
     * @param {any} value The current value of the property on the tween's target.
     * @return {any} The starting tween value for the property. In most cases, you would simply
     * return the value parameter, but some plugins may need to modify the starting value.
     * @static
     **/
    TweenFramePlugin.init = function(tween, prop, value) {
      //  var target = tween.target;
     //   if(!target.hasOwnProperty("currentFrame")){ target.gotoAndStop(value); }
// return the unmodified property value:
        return value;
    };

    /**
     * @method step
     * @protected
     * @static
     **/
    TweenFramePlugin.step = function(tween, prop, startValue, endValue, injectProps) {
        // unused

    };


    /**
     * @method tween
     * @protected
     * @static
     **/
    TweenFramePlugin.tween = function(tween, prop, value, startValues, endValues, ratio, wait, end) {

        tween.target.gotoAndStop(value);
        return tween.target.currentFrame;
    };

    createjs.TweenFramePlugin = TweenFramePlugin;

}());

将其复制到一个文件中，包括它，需要在某个时候安装在您的主 html 页面上，并且 'install' 它就像这样，在加载 tweenjs 之后的某个地方。

createjs.TweenFramePlugin.install();

TweenJS 补间 Sprite 的帧

TweenJS tweening the frames of a Sprite

javascript

html

sprite

easeljs

tween