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

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