Nativescript無限翻訳アニメーション

Question

こんにちは私は、NativeScriptビューで動く背景イメージを実装しようとしています。

レイアウトはこの

login.xml

<Page loaded="loaded" android:actionBarHidden="true"> 
<GridLayout> 
<Image src="~/img/haloose_bg.png" id="bg"/> 

<StackLayout orientation="vertical" verticalAlignment="center" id="sl_login"> 
... 
</StackLayout> 
</GridLayout> 
</Page> 

ように私は、私は、次のアプローチを試してみましたImageが背景

にランダムな方向に移動したいです：

1）設定された間隔アプローチ

utils.js

utils.animateBG = function(container,id,duration){ 
     var newx = newy = Math.random() + 1.2; 
     container.getViewById(id).animate({ 
      translate : {x: newx - 10 , y : newy + 70 }, 
      duration : duration 
     }); 
} 

login.js

exports.loaded = function(args){ 
page = args.object; 
setInterval(utils.animateBG(page,"bg",3000),3000); 
} 

ユーザーがタップしたときに、私はその後、間隔をクリアしますボタンを押すか、ビューが表示されます。この方法では、4秒後にアプリがクラッシュする。

2）ループアプローチ

login.js

while(!user.hasClickedSomething){ 
    utils.animateBG(page,"bg",3000); 
} 

ながらこのアプローチは、白い画面上のアプリ凍結を行います。

3）再帰的アプローチ

ここでは、アニメーションを方法編集：そして私はそれと呼ばれる条件としてuser.continueAnimationを通過

utils.js

utils.animateBG = function(container,id,duration,continueAnimation){ 
    if(continueAnimation){ 
     var newx = newy = Math.random() + 1.2; 
     container.getViewById(id).animate({ 
      scale : { x: newx, y: newy}, 
      translate : {x: newx - 10 , y : newy + 70 }, 
      duration : duration 
     }).then(function(){ 
      utils.animateBG(container,id,duration,continueAnimation); 
     }); 
    } 
} 

をループを停止する必要があります。 userは、フィールドがデフォルトでtrueに設定されているページにバインドされた観察可能なビューモデルです。

login.js

exports.pageloaded = function(args){ 
page=args.object; 
page.bindingContext = user; 
utils.animateBG(page,"bg",3000,user.continueAnimation); 
} 

私はその後、私は他のボタンをクリックしたときfalseにuser.continueAnimationを設定しよう、何とかそれは常にメソッド内で忠実。この結果、アニメーションが停止することはありません。別のビューに戻って戻ってきたら、アプリケーションがフリーズしたりクラッシュしたりします。

私は何をしようとしていますか？それを行う良い方法はありますか？ ありがとう

Answer 1

＃3は実際にはほぼ正しいです。ここで、固定コードは次のとおりです。

var continueAnimation = true; 
utils.animateBG = function(container,id,duration){ 
    if(continueAnimation){ 
     var newx = newy = Math.random() + 1.2; 
     container.getViewById(id).animate({ 
      scale : { x: newx, y: newy}, 
      translate : {x: newx - 10 , y : newy + 70 }, 
      duration : duration }); 
     }).then(function(){ 
      utils.animateBG(container,id,duration); 
     }); 
    } 
}; 

continueAnimation変数は関数の外で変数への参照でなければならない、それ以外の場合はfalseに設定されることはありません飽きないだろうと、常にその再帰的な兄弟に「true」を渡します。今、私は実際におそらくなるようにコードを変更しないだろう：それはもはや再帰的であるように（賢明なコールスタック）

var continueAnimation = true; 
utils.animateBG = function(container,id,duration){ 
    if(continueAnimation){ 
     var newx = newy = Math.random() + 1.2; 
     container.getViewById(id).animate({ 
      scale : { x: newx, y: newy}, 
      translate : {x: newx - 10 , y : newy + 70 }, 
      duration : duration }); 
     }).then(function(){ 
      setTimeout(function() { 
       utils.animateBG(container,id,duration); 
      },0); 
     }); 
    } 
}; 

、しかし、あなたは、コールスタックを超えていないことを確認します（JSを持っているとして、かなり大きなコールスタック制限はなく、人が、このランニングを残し、コールスタックを超えて排除するのsetTimeoutを使用して、離れて歩く

も無限のアニメーションのための別の異なるアプローチがある

Answer 2

場合 - CSS-アニメーションを使用した例 ：。

。

、page.css

@keyframes example { 
    0% { transform: translate(0, 0); } 
    25% { transform: translate(200, 0); } 
    50% { transform: translate(200, 200); } 
    75% { transform: translate(0, 200); } 
    100% { transform: translate(0, 0); } 
} 


.img-logo { 
    animation-name: example; 
    animation-duration: 2s; 
    animation-iteration-count: infinite; 
} 

あなたのpage.xmlで

<StackLayout> 
    <Image src="res://logo" class="img-logo"/> 
</StackLayout> 

CSS-animations in NativeScript