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）遞歸方法

在這裏，我編輯的動畫的方法：

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.continueAnimation作爲條件應該停止循環。 user是一個可觀察的視圖模型，默認情況下該頁面的continueAnimation字段設置爲true。

login.js

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

然後我嘗試設置user.continueAnimation到false當我點擊其他按鈕，但不知何故，它總是在方法內保持真實。這導致動畫永不停止，如果我轉到另一個視圖並返回，該應用程序會凍結或崩潰。

有沒有人實施我想要做的？有沒有更好的方法來做到這一點？ 謝謝

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，將始終傳遞「真」到它的遞歸兄弟。現在，我真的可能會改變的代碼是：

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的動畫 例如：

。

in your 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