[phina.js] Tweenerを使いこなそう! [Tweener 基本編]

# phina.js とは
ゲームが簡単に作れるライブラリです!
ゲームに限らずアプリやWEBサイトのちょっとしたアクセントなんかにも使えます。

- [github](https://github.com/phi-jp/phina.js)
- [gitter](https://gitter.im/phi-jp/phina.js)
- [advent-calendar/2015](http://qiita.com/advent-calendar/2015/phinajs)
- [ドキュメント](http://phinajs.com/docs/)

# まえがき

この記事でphina.jsについて解説してる点で疑問に思ったことやわからないことがあればコメントか、
[@simiraaaa](https://twitter.com/simiraaaa)にDMかリプライで質問してくれればわかる範囲で答えます。

また、誤字脱字や間違っている点があれば、**編集リクエスト**をお願いします。

すべてのサンプルで`https://rawgit.com/phi-jp/phina.js/v0.1.0/build/phina.js`をScriptタグで読み込んでいます。

今はまだphina.jsの情報は検索してもあまり出てこないので、代わりにtmlibで検索すると、似たようなサンプルが出てきたりします。ちょっと使い方が違ったりしますが、だいたい同じなのでtmlibのサンプルを参考にphina.jsを書けることもあるかと思います。

あとこれも多少参考になります
[[tmlib.js] リファレンスのようなもの](http://qiita.com/simiraaaa/items/4f566e811d507c384666)

# Tweenerを使いこなそう!

Tweenerを使ったサンプルなどはたくさんありますが、詳しく説明してる記事は少ない印象だったので、この記事では詳しく解説します。

## Tweenerとは

Tweenというアニメーションをオブジェクトに付与するためのものです。
要するに**アニメーション**です。
実際に見てもらったほうがわかりやすいと思いますので、説明は基本的にサンプル付きで行います。

サンプルのページは**右下のアイコンをクリック**するとコードを読むことができます。

<a href="http://goo.gl/WACL6n" target="_blank">サンプル
<img width="320" alt="Tweenerサンプル1" src="https://qiita-image-store.s3.amazonaws.com/0/60690/180601ed-f876-c338-5f5c-5d7859978f40.png">
</a>


Tweenerはphina.jsのオブジェクトの値ならなんでもアニメーションできます。
また、Tweenerを複数使って複雑なアニメーションをさせることができますが、ほとんど使うことはなくやり方もちょっと面倒なので、今回は単一のアニメーションを使ったもののみで解説します。

## Tweenerの種類

[ドキュメント](http://phinajs.com/docs/#!/api/phina.util.Tween)に書いてありますが、文字だけだとどんなアニメーションかわかりにくいですね。

アニメーション付きの一覧を作ったので、どんな動きができるのか見てみてください。

<a href="http://goo.gl/KmsoTu" target="_blank">Tweener一覧
![Tweener一覧](https://qiita-image-store.s3.amazonaws.com/0/60690/43f903ea-1992-073f-3e81-97c6e64ef1b3.png)
</a>


## Tweenerの基本的な使い方

phina.jsでTweenerを利用したアニメーション表現の基本的な使い方です。

```js

// 星生成
var star= StarShape({radius:60});

// シーンに追加(表示)
star.addChildTo(this);

// 位置
star.x = 100;
star.y = 200;

// Tweener
star.tweener.to({
  x:500,
  y:800,
  rotation:360
},1000,"swing")
.wait(500)
.set({
  sides:10,
  fill:"blue",
  rotation:0,
})
.by({
  x:-400,
  rotation:360,
},1000,"easeOutElastic")
.call(function(){
  console.log("call");
  var circle = CircleShape({radius:30})
  .addChildTo(star);
  
  circle.tweener.wait(1000).call(function(){
    circle.remove();
  });
  
  star.fill="green";
  
}).setLoop(true);

```

<a href="http://goo.gl/KXTXns" target="_blank">サンプル<img width="320" alt="image" src="https://qiita-image-store.s3.amazonaws.com/0/60690/55be67c6-6c9c-26c3-a191-0a2d0f47ad16.png">
</a>

### 図形オブジェクトの生成、追加

これは半径60pxの星型の図形を生成しています。
`var star= StarShape({radius:60});`

次にシーンに追加しています。
`star.addChildTo(this);`

シーンに追加すると星のオブジェクトが表示されるようになります。
phina.jsでは画像を用意しなくても、図形で簡単にテストやサンプルが作れるような仕組みが用意されています。

位置の設定

```js

star.x = 100;
star.y = 200;
```

`x`は左から100px
`y`は上から200pxの位置になります。

生成できる図形の種類は

- RectangleShape 四角形
- CircleShape 円
- StarShape 星
- HeartShape ハート
- PolygonShape 多角形
- TriangleShape 三角形

これらのクラスについては詳しく説明しませんが、サンプルの`StarShape`の部分を置き換えるだけでも、使えるものもあるので、いろいろ試してみてくださいね。

### アニメーションする

前置きが長くなりましたが、ようやくアニメーションさせる部分の説明です。

### `Tweener`クラスで使えるメソッド(関数)

`to(prop, time, easing)`
`by(prop, time, easing)`
第一引数は、変化させたいプロパティを指定します。
第二引数は、変化にかける時間をミリ秒で指定します。(デフォルト:1000)
第三匹数は、どういう風に変化させるかアニメーションの名前を指定します。(デフォルト:default)

`to`は現在の値に関係なく第一引数の値になります。
`by`は現在の値に第一引数の値を加算した値になります。

`wait(time)`
timeミリ秒待機します。
`set(prop)`
setを使った時の時間でpropの値に書き換えます。
`call(func)`
callを使った時の時間にfuncを実行します。
`setLoop(bool)`
boolにはtrueかfalseを渡します。
trueの場合はアニメーションを繰り返し行います。

メソッドはサンプルのように `.`で繋いでいくことができます。

### サンプルのTweenerの詳しい説明

サンプルのコードを使ってさらに詳しく説明するので、ここからは、コードと一緒に読んでください。

まず、この部分では

```js

star.tweener.to({
  x:500,
  y:800,
  rotation:360
},1000,"swing")

```
`to`なので
`star`の
`x`は`500`
`y`は`800`
`rotation`は`360`
になるまで、`1000`ミリ秒かけて`'swing'`な感じにアニメーションをしています。

そのあとに
`.wait(500)`
500ミリ秒停止します。
500ミリ秒全く動きません。

500ミリ秒経過したら

```js

.set({
  sides:10,
  fill:"blue",
  rotation:0,
})

```

`sides`(星のとげの数)を`10`
`fill`(塗りつぶし色)を`'blue'`
`rotation`(回転)を`0`
にセットしています。

このタイミングで

```js

star.sides = 10;
star.fill = 'blue';
star.rotation = 0;

```

というコードが実行されるようなイメージです。

`set`が終わってからすぐに次のアニメーションが始まります。

```js

.by({
  x:-400,
  rotation:360,
},1000,"easeOutElastic")

```

これは`by`なので、この時点の`star`の状態から変化させます。

`star`の
`x`が今の`star.x`から`-400`
`rotation`は`360`
それぞれ`1000`ミリ秒かけて`"easeOutElastic"`**(びよよん)**な感じに加算されます。
加算されるといっても `x`は`-400`なので、`400`減算されるんですけどね笑

`by`によるアニメーションが終了したら、次に書いてあるコード

```js

.call(function(){
  console.log("call");
  var circle = CircleShape({radius:30})
  .addChildTo(star);
  
  circle.tweener.wait(1000).call(function(){
    circle.remove();
  });
  
  star.fill="green";
  
})

```

`call`が実行されます。
`console.log("call");`
は説明するまでもないですね。
コンソールに`"call"`という文字を出力しています。

`var circle = CircleShape({radius:30}).addChildTo(star);`
これは星の上に円の図形を追加しています。

そして、その円にもアニメーションを付与しています。といっても`wait`だけです。

```js

circle.tweener.wait(1000).call(function(){
    circle.remove();
  });
```
1000ミリ秒後に円を消します。
予約みたいなものですね。

星の色を緑にしています。
`star.fill="green";`

最後
`.setLoop(true);`

これは一番最初の `to`の部分から設定したアニメーションを繰り返すということです。

サンプルの動きを見ると繰り返されているのがわかると思います。
ただし、`y`は変化しなくなっていますね。
これは`to`による変化なので、一度`y`が`800`になったら動きません。

最初は `star.y = 200;` としているので、`200` から `800`に変化します。つまり、上から下に移動する動きになりますが、
1ループ後は `800` → `800` の動きになり上下の動きがないように見えます。

## あとがき

以上で基本的な`Tweener`を使ったアニメーションの解説は終わりです。

サンプルのコードをいじったりしていろいろ試してみてくださいね。
そうしてるうちに使いこなせるようになると思います。