Question

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

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

哪个不起作用。简单地写......

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

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

我是否需要调用某种更新方法？或者可能诉诸一些gotoAndStop黑客？

看起来有点奇怪，这是一个问题。如果有人能对此有所了解，我们非常感激。

Answer 1

currentFrame属性是只读的，虽然EaselJS文档似乎没有显示它（看起来YUIDocs可能已经破坏了@readonly标记）。由于两个原因，它可能仍然是只读的：

我们避免使用getter / setter来处理_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 2

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

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

这让我像这样补间：

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

对我来说似乎有点讨厌，但至少它有效。

如果有人有更好的解决方案，请发布！

Answer 3

我首先尝试了只在开始和结束时发送补间值的getter / setter（之间为null）然后创建并使用类似于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页面上安装，然后安装＆＃39;就像这样，在tweenjs加载之后的某个地方。

createjs.TweenFramePlugin.install();

TweenJS补间Sprite的帧

3 个答案: