您好我正在尝试在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，但不知怎的，它在方法中始终保持正确。这导致动画永不停止，如果我转到另一个视图并返回，应用程序会冻结或崩溃。
有没有人实施我想要做的事情？有没有更好的方法呢？ 感谢
答案 0 :(得分：2)
你的＃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并始终传递＆＃34; true＆＃34;进入它的递归兄弟。现在我实际上可能会改为代码：
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明智的），但是会确保你不会超过调用堆栈（因为JS确实有一个非常大的CallStack限制，但是如果这个人离开了这个并且走了离开，使用setTimeout将消除超过callstack。
答案 1 :(得分：2)
对于无限动画，还有另一种不同的方法 - 使用CSS动画。 例如：
你的page.css中的
<header>
<div class="logo">
<center>
<img src="../img/logo.png" alt="The Thrive Magazine">
</center>
</div>
</header>
<nav class="unfixed">
<img src="../img/logo.png" alt="The Thrive Magazine">
<ul>
<li><a href="..//index.html">Home</a>
</li>
<li><a href="column.html">Columns</a>
<ul>
<li><a href="column.html">Articles</a>
</li>
<li><a href="fashion.html">Fashion</a>
</li>
<li><a href="video.html">Videos</a>
</li>
<li><a href="interview.html">Interview</a>
</li>
</ul>
</li>
<li><a href="team.html">Team Thrive</a>
</li>
<li><a href="sexed.html">Sex-Ed Module</a>
</li>
<li><a href="forum.html">Share Your Story</a>
</li>
</ul>
</nav>
<div class="arts">
<div class="submission">
<h1>SHARE YOUR STORY</h1>
<form action="submit.php" method="post">
<label>Name :</label>
<input type="text" name="name" placeholder="optional">
<br />
<label>Title :</label>
<input type="text" name="title" placeholder="required" required="required">
<br />
<label>Your Story</label>
<br />
<textarea name="story" required="required"></textarea>
<br />
<input type="submit" name="submit" value="submit">
</form>
</div>
<div class="row">
<article class="managerfc">
<h1 class="namerest">Submissions</h1>
<h2 class="desigrest">Manager - Fashion Column</h2>
<div class="inforest">
<p>Hi! I'm Jaya, I love fashion and believe that there is no easier way to express yourself than through your clothes.</p>
<br>
<p>Clothes aren't only an expression of who you are but are also a very good medium to share a message with people you meet. Fashion, through its passing conformities, helps to bridge the greater transitions of the process of social change. Life
isn't a dress rehearsal; it's the one and only life you've got.</p>
</div>
</article>
<article class="creativedesig">
<h1 class="namerest">Social Feeds</h1>
<div class="inforest">
<p>Hi I'm Anshul, I wish to spread love wherever I go. I do not believe in letting anyone come to me without leaving them a little bit happier. And that is why I have faith in Thrive- It has the power to spread love, happiness, hope... and magic.</p>
</div>
</article>
</div>
</div>
<footer>
<h3>The Thrive Magazine. All Rights Reserved.</h3>
<br>
<h3>Site designed by Dhruv Agarwal, Rasik Raj and Kush Parmar.</h3>
<h3>Introductory movie by Jahanvi Chopra.</h3>
<h3>Photographs by Jatin Kumar Sawhney.</h3>
<br>
<br>
<div class="social">
We are social
<br>
<a href="https://www.facebook.com/thethrivemag" target="_blank">
<img src="../img/fb.png" alt="Social - Facebook">
</a>
<a href="https://twitter.com/thethrive_mag?lang=en" target="_blank">
<img src="../img/twitter.png" alt="Social - Twitter">
</a>
<a href="https://instagram.com/thethrivemagazine/" target="_blank">
<img src="../img/insta.png" alt="Social - Instagram">
</a>
<br>Reach us at:
<br>
<u>thethrivemag@gmail.com</u>
</div>
</div>
</footer>在你的page.xml中
@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;
}