0

所以我尝试使用与 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/）。你有什么想法？

4

1 回答 1

1

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

要为画布设置动画，您需要将其放置在fa-modifier指令内，然后用于Transitionable动画大小更改。

这是在 2 秒内将表面尺寸从 100x100 设置为 400x400 的动画示例：

 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-modifier：https ://famo.us/integrations/angular/docs/unstable/api/directive/faModifier/

ps 你可以使用 Transitionable 为任何修改器的属性设置动画（fa-rotate、fa-scale、fa-transform、fa-opacity...）

于 2015-12-02T14:09:17.530 回答