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

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

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

index.html を作成し、angular-famous に必要な JavaScript ファイルと CSS ファイルを読み込んだ下記のような 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 と同じディレクトリに作成し、読み込みます。

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

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

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）

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

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

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

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

<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>

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

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

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

<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 までの値が返るメソッドを指定します。例えば、

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

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