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、一時停止ボタンを再生ボタンに戻すために必要な 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 で設定することで問題を解決できました。

別の問題は、ビデオの終了後、アニメーション機能内でアニメーションを停止する必要があり、機能しないことでした。そこで、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 に答える