如何使用集成到angularjs的famo.us创建动画画布？

所以我尝试在famo.us中使用canvas创建动画并与angularjs集成。如何使用集成到angularjs的famo.us创建动画画布？

我发现这个指令的文档：

<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/）。你有什么想法？

来源

2015-05-12 Matúš Bartko

您不能在运行时更改曲面的大小，但可以更改修改器的大小。

要为画布设置动画，您需要将其放置在fa-modifier指令中，然后使用Transitionable动画尺寸更改。

下面是从100×100的动画表面的尺寸，以400×400超过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 ...）

来源

2015-12-02 14:09:17 mihaellenic

如何使用集成到angularjs的famo.us创建动画画布？

回答

相关问题