paper.jsのスプライトアニメーション

Question

私はPaper.jsで自分のプロジェクトに取り組んでいます。

この部分では、アニメーション付きのスプライトを使用する必要があります。

これを試すには、私は画面上のどこにでも置くことができる宇宙船を持っています。時々起こる渦動の影響があります。

私は10フレームのスプライトシートを用意しました。私はPaper.js RASTERクラスを使用してそれをロードし、すべてのフレームでアニメーション化します。

問題は、私はラスタ

let slide = new Raster({ 
    source: 'assets/sprite.png', 
    position: [0, 0] 
}); 

をロードすると、私は非常に長い画像の中心を参照してください...私はそれらを計算する方法を知っていないことを、位置に

です私は最初のフレームを見る必要があります。

私の考えはcontaintsでグループを使用していたが、私は動的に位置を変更し、同時に広がりをアニメーション化することができます（正方形）

let mask = new Rectangle({ 
    position: [220, 100], 
    size:  [186, 154], 
}); 

をマスクします。

それは可能でしょうか？ ラスタのマスクに対する位置を計算することはできませんが、今私にとっては不可能と思われます。

誰でも簡単な方法でこれを達成する方法がありますか？

乾杯。

Answer 1

私のプロジェクトでこれを調べました。キーは、ピボットポイントを持つグループを使用しています。このコードは確かに未完成と生のJavaScriptであるが、それはあなたに良いアイデアを与える必要があります：私は実装を完了したことがないので、私は実際にはもう私のプロジェクトでスプライトを使用していない

var Sprite = paper.Group.extend({ 
    _class: 'Sprite', 
    initialize: function Sprite(url, size) { 
     var maskSize = size || new paper.Size(256, 256); 
     var that = this; 

     this._raster = new paper.Raster(url); 
     this._raster.pivot = new paper.Point(); 
     this._raster.on('load', function() { 
      that._spriteSheetWidth = Math.floor(this.size.width/maskSize.width); 
      that.setIndex(that._spriteIndex || 0); 
     }); 
     this._clipRect = new paper.Path.Rectangle(new paper.Point(), maskSize); 

     Sprite.base.call(this, [this._clipRect, this._raster]); 

     this.clipped = true; 

     // Just use a blank point if you want the position to be in the corner 
     this.pivot = new paper.Point(maskSize.divide(2)); 
    }, 

    setIndex: function (index) { 
     if (typeof this._spriteSheetWidth !== "undefined") { 
      // TODO: FINISH SPRITE SHEET IMPLEMENTATION 
     } 
     this._spriteIndex = index; 
    } 
}); 

。しかし、複雑なコンセプトは上記で完了する必要があります。つまり、paper.jsがピボットポイントとクリッピングマスクを実装する方法です。オブジェクトの位置は、デフォルトでは境界の中心です...これは、イメージの位置が変化するように見えるように、またはパスの内容が変更されたときなど、多くの理由で不安定です。ですから、オブジェクトを作成した直後にピボットを0,0に設定するのが好きです。次の主要なセクションでは、クリッピングマスクはGroupsでしか機能しません。最後に、Groupクラスを拡張して、標準のSpriteクラスを作成することができます。

通常のスプライトシフトthis._raster.position.xとthis._raster.position.yはこの実装をオフにする必要があります。

編集：...私の実装を完了しましたhttps://jsfiddle.net/willstott101/vgxq9kak/