TweenJS对精灵的框架进行粗花处理

TweenJS tweening the frames of a Sprite

本文关键字：处理 框架 精灵 TweenJS      更新时间：2023-09-26

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

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

这不起作用。简单地写。。。

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

也不会导致精灵更新。所以我猜这些属性只是得到的？（mySprite.gotoAndStop(10);运行良好。）

我需要调用某种更新方法吗？或者可能求助于gotoAndStop黑客？

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

currentFrame属性是只读的，尽管EaselJS文档似乎没有显示它（看起来YUIDocs可能破坏了@readonly标记）。它可能会保持只读，原因有两个：

  1. 我们避免对复杂行为使用getter/setter，_goto就是这样
  2. 它会产生模棱两可的结果（它等同于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);
}

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

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

这让我可以这样思考：

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

对我来说似乎有点生气，但至少它有效。

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

我首先尝试了getter/setter，它只在开始和结束时发送tween值（对于介于两者之间的值为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页面上，然后在加载tweenjs后的某个地方像这样"安装"它。

createjs.TweenFramePlugin.install();
相关文章：