着名的角动画

Question

在下面的着名角度代码中，动画在第一次点击时起作用，但在第二次点击时不起作用。 缺少哪些代码可以使每次点击都能正常工作？

谢谢！

的js

$scope.animate = function(index) {
        $scope.list[index].rotate.set(Math.PI * 4, {curve: Easing.inOutElastic, duration: 3000 })
    };

HTML

<fa-grid-layout fa-options="myGridLayoutOptions">
    <fa-modifier ng-repeat="item in list"
                 fa-origin="[0.5, 0.5]"
                 fa-align="[0.5, 0.5]"
                 fa-rotate-z="item.rotate.get()">
      <fa-surface fa-background-color="item.bgColor" fa-click="animate($index)">
        {{item.content}}
      </fa-surface>
    </fa-modifier>
  </fa-grid-layout>             

Answer 1

由于您已经转换为（Math.PI * 4），现在是旋转的当前状态，因此无处可以转换为。换句话说，可转换器不会累积。将Transitionable重置回原始状态，然后再次转换。

$scope.animate = function(index) {
    $scope.list[index].rotate.set(0);
    $scope.list[index].rotate.set(Math.PI * 4, {curve: Easing.inOutElastic, duration: 3000 })
};