如何使用集成到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創建動畫畫布？

回答

相關問題