TweenJS tweening the frame of a Sprite

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). Вероятно, он останется доступным только для чтения по двум причинам:

1. Мы избегаем использования геттеров/сеттеров для сложных поведений, которые _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); 
} 

Answer 2

Ну я coulnd't найти функциональность я хотел в Sprite, так что я сделал это:

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

Который позволил мне промежуточные кадры, как так:

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

Кажется, своего рода Hacky ко мне, но, по крайней мере, это работает.

Если у кого-то есть лучшее решение, пожалуйста, опубликуйте его!

Answer 3

Я первый попробовал геттер/сеттер, который только отправленное значения Tween на начальной и конечной (нулевое значение для то между ними), то создается и используется плагин, похожий на 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 страницы и «установки» это как так, где-то после изящный Загружен njs.

createjs.TweenFramePlugin.install();