オブジェクトを追加または削除するときにアニメーションを追加する方法 - Fabricjs

Question

イメージ操作ライブラリにFabricJSを使用しています。オブジェクトにアニメーションを追加する方法を知りたいのですが、オブジェクトをキャンバスに追加/削除します。私はサンプルのためにサイトを参照しました。しかし、私は単純なアニメーション（小さなジャンプやユーザーの注意を引くためのフェードイン）のための多くを見つけることができませんでした。

これにobject.animateを使用する必要がありますか？オブジェクトが削除されたときに動作しますか？サンプルコードまたはリファレンスソースが優れています。

Answer 1

fabricJSのように、アニメーションにはいくつかのアプローチがあります。タイムアウト/インターバルのいずれかを使用してそのようなものを変更するか、アニメーション機能（単純なオブジェクトプロパティ用）を使用してそのようにすることができます。このようなことについては、アニメーション機能の使用が簡単だと思います。例えば

：

var canvas = new fabric.Canvas(...); 
var rect = new fabric.Rect(...); 

function startAnimation() { 
    // If the object was removed, add it back 
    if (rect.opacity === 0) { 
     canvas.add(rect); 
    } 

    // Animate the opacity of the rectangle from 0 - 1 and back 
    rect.animate('opacity', rect.opacity === 0 ? 1 : 0, { 
     duration: 1000, 
     onChange: canvas.renderAll.bind(canvas), 
     onComplete: function() { 
      // Once the animation is complete, remove the object 
      if (rect.opacity === 0) { 
       canvas.remove(rect); 
      } 
     }, 
     easing: fabric.util.ease['easeInQuad'] 
    }); 
} 

JSFiddle：http://jsfiddle.net/qnwjs0aw/

fabricJSドキュメント：​​& http://fabricjs.com/animation-easing