LoginSignup
2
2

More than 5 years have passed since last update.

Createjsで★を動かす

Last updated at Posted at 2014-06-06

サンプル

位置調整

//canvasの幅と高さを取得
nWidth = canvasElement.width;
nHeight = canvasElement.height;

//位置調整
colorStar.x = nWidth * Math.random();
colorStar.y = nHeight / 2;

Tweenアニメーション

Tween()コンストラクタで基本設定
Tween.to()メソッドにプロパティを追加

//書き方
new Tween(対象オブジェクト, 初期設定オブジェクト)
Tweenオブジェクト.to(プロパティ値のオブジェクト,間隔,イージング関数)

var myTween = new createjs.Tween(target, {loop:true});
myTween.to({y:nHeight-40, rotation:360}, 1000, Ease.bounceOut);

アニメーションの種類

IN はじめが加速するかんじ
OUT おわりが減速するかんじ
INOUT はじめとおわり両方ある

線形

linear
none

増減

backIn
backInOut
backOut
bounceIn
bounceInOut
bounceOut

滑らかな曲線

circIn
circInOut
circOut
cubicIn
cubicInOut
cubicOut
elasticIn
elasticInOut
elasticOut
quadIn
quadInOut
quadOut
quartIn
quartInOut
quartOut
quintIn
quintInOut
quintOut
sineIn
sineInOut
sineOut

引数で変えられるメソッド

getBackIn
getBackInOut
getBackOut
getElasticIn
getElasticInOut
getElasticOut
getPowIn
getPowInOut
getPowOut

アニメーションの動きは下記参考に
TwennJS Spark Table

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2