Famo.us のアニメーションが AngularJS で簡単に追加できる famous-angular を使ってみる

プロジェクト用のディレクトリを作成し、famous-angular を bower でインストールします。

```zsh
$ mkdir myFamousAngularProject && cd myFamousAngularProject
$ bower install famous-angular angular-ui-router angular-animate
```

index.html を作成し、angular-famous に必要な JavaScript ファイルと CSS ファイルを読み込んだ下記のような HTML を用意します。

```html
<html lang="ja" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="bower_components/famous-angular/dist/famous-angular.css" />
</head>
<body>

  <script type="text/javascript" src="bower_components/requirejs/require.js"></script>
  <script type="text/javascript">
    require.config({baseUrl: 'bower_components'});
  </script>
  <script type="text/javascript" src="bower_components/angular/angular.js"></script>
  <script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
  <script type="text/javascript" src="bower_components/angular-animate/angular-animate.js"></script>
  <script type="text/javascript" src="bower_components/famous/dist/famous.js"></script>
  <script type="text/javascript" src="bower_components/famous-angular/dist/famous-angular.js"></script>  

</body>
</html>
```

Angular の Controller を記述するための `main.js` を `index.html` と同じディレクトリに作成し、読み込みます。

```html
  <script type="text/javascript" src="main.js"></script>
```

Controller を書きます。x 座標用のプロパティを持ったオブジェクトの配列を items に代入しておきます。

```js
angular.module('myApp', ['famous.angular', 'ui.router', 'ngAnimate'])
  .controller('MainCtrl', function ($scope) {
    $scope.items = [
      {x: 0},
      {x: 50},
      {x: 100},
      {x: 150},
      {x: 200}
    ];
  });
```

次に famous-angular のテンプレートを書きます。famous-angular のエントリーポイントとなる `fa-app` ディレクティブを `ng-controller` ディレクティブと同じ要素に設定します。この際、`fa-app` が高さを持たないため、`height` を設定しておきます。（ここでは `500px`）

```html
<fa-app ng-controller="MainCtrl" style="height: 500px;">
</fa-app>
```

Famo.us の Surface を作成するディレクティブ `fa-surface` を使って緑色でサイズが `30px` の矩形を描画します。

```html
<fa-app ng-controller="MainCtrl" style="height: 500px;">
  <fa-surface fa-size="[30, 30]" fa-background-color="'green'"></fa-surface>
</fa-app>
```

![sc-0.min.png](https://qiita-image-store.s3.amazonaws.com/0/49600/f33ae2cf-6fb8-c837-5181-fe203c4cf296.png)


この矩形を横に並べます。Famo.us の Modifier を作成する `fa-modifier` ディレクティブと `ng-repeat` ディレクティブを使い、先程の Controller に記述した `$scope.items` の x プロパティの座標通りに配置させます。

```html
<fa-app ng-controller="MainCtrl" style="height: 500px;">
  <fa-modifier fa-translate="[item.x, 50]" ng-repeat="item in items">
    <fa-surface fa-size="[30, 30]" fa-background-color="'green'"></fa-surface>
  </fa-modifier>
</fa-app>
```

![sc.min.png](https://qiita-image-store.s3.amazonaws.com/0/49600/be2d819f-eb6b-ca16-374d-fd9f795fbc66.png)

次にこれをアニメーションさせます。アニメーションさせる要素のセレクターとして `fa-modifier` を付けた要素に `class="rotateItem"` を設定します。

```html
<fa-modifier fa-translate="[item.x, 50]" ng-repeat="item in items" class="rotateItem">
```

次に `fa-animation` と `animation` ディレクティブを `ng-app` 要素内に下記のように追加します。`targetModSelector` の値は先程設定したセレクターになります。

```html
<fa-app ng-controller="MainCtrl" style="height: 500px;">
  <fa-modifier fa-translate="[item.x, 50]" ng-repeat="item in items" class="rotateItem">
    <fa-surface fa-size="[30, 30]" fa-background-color="'green'"></fa-surface>
  </fa-modifier>
  <fa-animation timeline="playRotation" autoplay="true" duration="1000" loop="true">
    <animate targetModSelector=".rotateItem" field="rotateZ" startValue="0" endValue="6.283" curve="linear">
    </animate>
  </fa-animation>
</fa-app>
```

この時、`timeline` 属性の値は 0〜1 までの値が返るメソッドを指定します。例えば、

```js
var frame = 0;
$scope.playRotation = function () {
  frame += 0.01;
  return Math.abs(Math.cos(frame));
};
```

のようなメソッドを用意しておくなどでタイムラインを自在に制御できます。

![sc-1.min.png](https://qiita-image-store.s3.amazonaws.com/0/49600/0db6f445-fb93-dfbf-008d-0a1fe7df1681.png)