3

120 フレームにスライスしたアニメーションがあります。各フレームはスプライト上にあります。スプライトは、100px x 100px のフレーム 12 個の 10 行で構成されています。アニメーションを作成するために、div 上のスプライトの背景位置を左から右、上から下に順番に移動しています。

フレーム エフェクトを作成するには、100px 単位でインクリメントする必要があるため、設定された左から右の値 (0 から 1000 px) にアニメーション化することはできません。

Greensock/TweenLite ライブラリがどのように機能するかについて、何か簡単なことを見逃していると思います。率直に (120 行のコードを使用して) 以外にこれを行うより良い方法が見つからないように思われるためです。

new TweenLite('#selector', 1, {delay: 0, useFrames: true, css: {'background-position-x': '-100px'}});
new TweenLite('#selector', 1, {delay: 1, useFrames: true, css: {'background-position-x': '-200px'}});
new TweenLite('#selector', 1, {delay: 2, useFrames: true, css: {'background-position-x': '-300px'}});
new TweenLite('#selector', 1, {delay: 3, useFrames: true, css: {'background-position-x': '-400px'}});
new TweenLite('#selector', 1, {delay: 4, useFrames: true, css: {'background-position-x': '-500px'}});
new TweenLite('#selector', 1, {delay: 5, useFrames: true, css: {'background-position-x': '-600px'}});
new TweenLite('#selector', 1, {delay: 6, useFrames: true, css: {'background-position-x': '-700px'}});
new TweenLite('#selector', 1, {delay: 7, useFrames: true, css: {'background-position-x': '-800px'}});
new TweenLite('#selector', 1, {delay: 8, useFrames: true, css: {'background-position-x': '-800px'}});
new TweenLite('#selector', 1, {delay: 9, useFrames: true, css: {'background-position-x': '-900px'}});

インクリメントする簡単な方法はありますか？

4

2 に答える 2

6

まず、background-position-xは広くサポートされていないため、使用しないでください。

いくつかのオプションがあります:

スプライト シートが 1 行だけに沿って配置されている場合は、次のようにTweenMaxだけを使用するだけで済みます。

var frameWidth = 100, numCols = 12;
var steppedEase = new SteppedEase(numCols);

TweenMax.to('#selector', 6, {backgroundPosition: '-'+(frameWidth*numCols)+'px 0px', ease:steppedEase, repeat:-1});

質問で説明したようにスプライト シートがグリッド内にある場合は、次のようにすべてのトゥイーンを結合するためにTimeLineMaxを取り込む必要があります。

var frameWidth = 100, frameHeight = 100, numCols = 12, numRows = 10;
var steppedEase = new SteppedEase(numCols-1);
var tl = new TimelineMax({repeat:-1});

for(var i=0;i<numRows;i++){
    tl.add( TweenMax.fromTo('#selector', 0.5, { backgroundPosition:'0 -'+(frameHeight*i)+'px'}, { backgroundPosition: '-'+(frameWidth*(numCols-1))+'px -'+(frameHeight*i)+'px', ease:steppedEase} ));
}

これが実際に動作していることを示すために、オンラインで見つけたランダムなスプライト シートを使用して作成したいくつかの実用的なフィドルを次に示します。 SV5Ug/3/

まったく別のオプションは、 CreateJSとZoeを使用してキャンバス上でアニメーション化することです。Zoe では、さまざまなツール (Flash IDE など) からアニメーションをスプライト シートおよび json ファイルとしてエクスポートできます。次に、CreateJS 内で BitmapAnimation クラスを使用して、スプライトシートの画像と json をアニメーションに変換します。

デモと情報はこちら:

http://www.createjs.com/#!/EaselJS/demos/spritesheet

http://www.createjs.com/#!/Zoe

于 2013-11-01T14:16:29.943 に答える
0

TweenMaxスプライトプラグインを使用できます

https://github.com/spalt08/TweenSprite

TweenMax.spriteSheet( document.getElementById('selector'), {
    width: 1000,
    stepX: 100,
    stepY: 0,
    count: 9
}, 1.0);
于 2015-04-05T00:16:45.270 に答える