Javascript Nativescript无限平移动画

您好，我正在尝试在NativeScript视图上实现移动背景图像

布局如下所示

login.xml

login.js

然后，当用户点击按钮或离开视图时，我会清除间隔。这种方法会使应用程序在4秒后崩溃

2）While循环方法

login.js

这种方法使应用程序冻结在白色屏幕上

3）递归方法

在这里，我编辑了动画制作方法：

utils.js

然后我调用它并将

user.continueAnimation

作为应该停止循环的条件传递

user

是绑定到页面的可观察视图模型，默认情况下，

continueAnimation

字段设置为

true

login.js

然后，当我单击其他按钮时，我尝试将

user.continueAnimation

设置为

false

，但不知何故，它在方法中始终保持为true。这将导致动画永不停止，如果我转到另一个视图并返回，应用程序将冻结或崩溃

有人实现了我要做的吗？有更好的方法吗？ 谢谢

你的#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);
        });
    }
};

因此，它不再是递归的（callstack-wise），而是确保您永远不会超过调用堆栈（因为JS确实有一个很大的调用堆栈限制，但是如果用户让它运行并走开，使用setTimeout将消除超过调用堆栈的情况。

您的#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);
        });
    }
};

---

因此，它不再是递归的（callstack-wise），而是确保不会超出调用堆栈（因为JS确实有一个很大的调用堆栈限制，但是如果用户不运行它而走开，那么使用setTimeout将消除调用堆栈的超出。

还有另一种不同的无限动画方法-使用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动画。 例如：

在您的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 2.0.0，现在成功了！谢谢！这种方法看起来很棒！但是代码不起作用=（我将浏览文档并查看需要修复的内容！它对我很有效-尝试安装最新的NativeScript 2.0.0，现在已经安装了！谢谢

@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;
}

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