How to create animated canvas using famo.us integrated to angularjs?

Question

So I try to create animation using canvas in famo.us integreted with angularjs.

I found this directive in docs:

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

But I have no ideas (or tutorials) how to access it from my controller.js:

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


  }]);

or create an animated object (for example this something like: http://jsfiddle.net/7wEWU/46/ ). Do you have any ideas?

Answer 1

You cannot change the size of the surface in runtime, but you can change the size of a modifier.

To animate the canvas you need to place it inside fa-modifier directive and then use Transitionable to animate size change.

Here is the example of animating surface size from 100x100 to 400x400 over 2s:

 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>

Here are the docs on Transitionables: https://famo.us/docs/transitions/Transitionable

And fa-modifier: https://famo.us/integrations/angular/docs/unstable/api/directive/faModifier/

p.s. you can use Transitionable to animate any of the modifier's attributes (fa-rotate, fa-scale, fa-transform, fa-opacity...)