Question

我用动力学画布创建了视频播放器。点击播放按钮后，动力学动画开始，按钮变为暂停。动画完成后，我想再次播放按钮。这是代码：

角：

    $scope.isPreviewPlaying = function(){
       return preview != null && preview.isRunning();
    }
    $scope.playPreview = function(){
         .....
         preview.stop;
    }
    $scope.pausePreview = function(){
      preview.stop();
    }

HTML：

    <button ng-click="playPreview()" ng-show="!isPreviewPlaying()">

    <button ng-click="pausePreview()" ng-show="isPreviewPlaying()">

Answer 1

所以我假设您使用的是Kinetic.Tween权利，而不是Kinetic.Animation？

不同之处在于补间是一个火与忘的动画，它有一个开始和一个端点（听起来像你所拥有的），而动画是一个循环运行的动画。

您可以使用onFinish的{{1}}事件属性来运行将“暂停”按钮切换回“播放”按钮所需的任何angularJS代码：

Kinetic.Tween

Answer 2

我可以通过为playBack提取变量来解决问题 - $ scope.previewPlaying并使用$ scope设置它。$ apply在我的动画中。

另一个问题是，在完成视频后，我需要在动画功能中停止动画，但它不起作用。所以我使用了由Miszy提出的$ scope。$ watch，代码如下：

          var preview;
          $scope.previewPlaying = false;

          $scope.playPreview = function(){
             ........
             preview = new Kinetic.Animation(function(frame) {
               if(condition) {
                    $scope.$apply(function() {
                            $scope.previewPlaying = false;
                    })
              }
            )}
         }
         $scope.$watch('previewPlaying', function() {
             if(!$scope.previewPlaying) {
               preview.stop();
             }
         })

       <button ng-click="playPreview()" ng-show="!previewPlaying">

       <button ng-click="pausePreview()" ng-show="previewPlaying">

动力学动画结束后更新角度按钮

2 个答案: