Как создать анимированный холст, используя famo.us, интегрированный в angularjs?

Question

Поэтому я пытаюсь создать анимацию, используя canvas в famo.us, интегрированном с angularjs.

Я нашел эту директиву в документах:

<fa-canvas-surface
           fa-size="[400,400]"
           class="main-canvas"
           >
</fa-canvas-surface>

Но у меня нет идей (или учебных пособий), как получить к нему доступ из моего controller.js:

mysiteControllers.controller('UvodCtrl', ['$scope','$famous',
  function($scope,$famous) {


  }]);

или создайте анимированный объект (например, что-то вроде: http://jsfiddle.net/7wEWU/46/). Есть ли у вас какие-либо идеи?

Answer 1

Вы не можете изменить размер поверхности во время выполнения, но вы можете изменить размер модификатора.

Чтобы оживить холст, нужно поместить его внутрь fa-modifier директива, а затем использовать Transitionable оживить изменение размера.

Вот пример анимации размера поверхности от 100x100 до 400x400 за 2 с:

 mysiteControllers.controller('UvodCtrl', ['$scope','$famous',
            function($scope,$famous) {

                // gets famous Transitionable
                var Transitionable = $famous['famous/transitions/Transitionable'];

                // sets initial surface size
                $scope.surfaceSize = new Transitionable([100, 100]);

                // animates surface size change, sets size to 400x400 during 2000ms
                $scope.surfaceSize.set([400, 400], {duration: 2000})

            }]);

<fa-modifier fa-size="surfaceSize.get()">
    <fa-canvas-surface class="main-canvas">
        Surface content
    </fa-canvas-surface>
</fa-modifier>

Вот документы по Transitionables: https://famo.us/docs/transitions/Transitionable

И fa-модификатор: https://famo.us/integrations/angular/docs/unstable/api/directive/faModifier/

PS вы можете использовать Transitionable для анимации любых атрибутов модификатора (fa-rotate, fa-scale, fa-transform, fa-opacity...)