0

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

角度：

    $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()">
4

2 回答 2

0

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

不同之处在于补间是具有开始和结束点（听起来像您所拥有的）的即发即忘动画，并且动画是在循环中运行的动画。

您可以使用onFinisha 的 event 属性Kinetic.Tween来运行将 Pause 按钮​​切换回 Play 按钮所需的任何 angularJS 代码：

var rect = new Kinetic.Rect({
  x: 100,
  y: 100,
  width: 100,
  height: 50,
  fill: 'green',
  stroke: 'black',
  strokeWidth: 2,
  opacity: 0.2
}); 

var tween = new Kinetic.Tween({
  node: rect, 
  duration: 1,
  x: 400,
  y: 30,
  rotation: Math.PI * 2,
  opacity: 1,
  strokeWidth: 6,
  scaleX: 1.5,
  onFinish: function() {
    //AngularJS Code to set button here.
  }
});
于 2013-09-05T14:37:38.363 回答
0

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

另一个问题是，在完成视频后，我需要在 Animation 函数中停止动画，但它不起作用。所以我使用了 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">
于 2013-09-06T08:53:47.993 回答