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）While循环方法

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，并且始终将“ 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确实有相当大的CallStack限制，但是如果此人不停地运行并使用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>

NativeScript中的CSS动画