[JavaScript][smartjs]tweenを実装する

昨日、smart.jsで画像を描画する方法を書きましたがアニメーションする方法を書きたいと思います。

ずばり下のように実装すればおｋ

<div style="position:relative;margin:20px 20px;" id="container">
  <div id="sample" style="width:300px;height:300px;background-color:black;"></div>
</div>
<script>
smart.ready({},function(S,imgs){
  var stage = new S.Stage("sample");
  var box = new S.Box(200,100);
  box.x = 50;
  box.y = 100;
  box.bg.color = "pink";

  stage.addChild(box);

  S.tween.start(box,{x:0,y:0},'linear',0.25,0,function(){
    console.log('animation end')
  });
});
</script>

アニメーションの部分は、

S.tween.start(box,{x:0,y:0},'linear',0.25,0,function(){
  console.log('animation end')
});

で最後は、コールバックですね。easingも色々あって便利です。