Anime.js随机移动
Anime.js随机移动
提问于 2017-06-22 21:56:41
在基于JS的动画方面有点初学者。尝试使用anime.js创建随机移动的气泡效果。但是，当动画循环时，它遵循相同的随机生成的参数，除非重新加载页面。
我把代码放到这个小提琴里：
https://jsfiddle.net/3ss3c5ma/7/
任何帮助/建议都是非常感谢的！
谢谢
HTML：
<html>
<head>
<link rel="stylesheet" type="text/css" href="custom.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="animatebubbles" class="container">
<h1>Test Page</h1>
<div class="bubblewrapper">
<div class="bubblepath">
<div id="bubble1" class="bubble">
</div>
</div>
<div class="bubblepath">
<div id="bubble2" class="bubble">
</div>
</div>
<div class="bubblepath">
<div id="bubble3" class="bubble">
</div>
</div>
<div class="bubblepath">
<div id="bubble4" class="bubble">
</div>
</div>
</div>
</div>
<footer>
<script type="text/javascript" src="anime.min.js"></script>
<script type="text/javascript" src="custom.js"></script>
</footer>
</body>
</html>CSS：
body {
height: 100%;
margin: 0;
}
h1 {
font-size: 40px;
color: #fff;
margin: 0;
display: inline-block;
position: absolute;
}
.container {
width: 100%;
background-color: #206ca0;
height: 100%;
text-align: center;
}
.bubblewrapper {
display: block;
position: absolute;
left: 0;
height: 100%;
width: 300px;
}
.bubblepath {
height: 100%;
padding: 0 1px;
display: table-cell;
width: 60px;
}
.bubble {
height: 40px;
width: 40px;
border-radius: 100%;
position: absolute;
background-color: #fff;
bottom: 0;
}Javascript：
var randomMovement = function() {
return anime.random(-20, 20) + 'rem'
};
var randomSpeed = function() {
return anime.random(1000, 5000) + 'rem'
};
$(document).ready(function(){
var timelineParameters = anime.timeline({
loop: true
});
timelineParameters
.add({
targets: '#bubble1',
translateX: [ { value: randomMovement }, { value: randomMovement }, { value: randomMovement } ],
translateY: [ { value: -200 }, { value: -400 }, { value: -600 } ],
opacity: [ {value: 0.5 }, { value: 0 }],
easing: 'linear',
duration: randomSpeed
})
.add({
targets: '#bubble2',
translateX: [ { value: randomMovement }, { value: randomMovement }, { value: randomMovement } ],
translateY: [ { value: -200 }, { value: -400 }, { value: -600 } ],
opacity: [ { value: 0.8 }, { value: 0 }],
easing: 'linear',
duration: randomSpeed,
offset: 100
})
.add({
targets: '#bubble3',
translateX: [ { value: randomMovement }, { value: randomMovement }, { value: randomMovement } ],
translateY: [ { value: -200 }, { value: -400 }, { value: -600 } ],
opacity: [ { value: 0.3 }, { value: 0 }],
easing: 'linear',
duration: randomSpeed,
offset: 0
})
.add({
targets: '#bubble4',
translateX: [ { value: randomMovement }, { value: randomMovement }, { value: randomMovement } ],
translateY: [ { value: -200 }, { value: -400 }, { value: -600 } ],
opacity: [ { value: 0.8 }, { value: 0 }],
easing: 'linear',
duration: randomSpeed,
offset: 300
});
});回答 1
Stack Overflow用户
发布于 2017-11-28 17:05:08
回答晚了-但我现在开始使用anime.js，并看到了您的问题。代码的问题是，您只设置了一次时间轴-然后在循环中的所有迭代中将其设置为相同的值。
你需要这样做：
$(document).ready(function(){
animation();
});
function animation() {
var timeline = anime.timeline({loop: false}); // no loop !!
timeline
.add({...})
.add({...})
.add({...});
timeline.complete = function() {animation();};
}这样，您就可以在每次动画完成时从头开始创建动画。下面是你的例子的一个分支：
https://jsfiddle.net/4879trjv/1/
我必须在每个动画开始时为你的目标添加一个初始位置-否则你的目标会消失在你永恒的视窗中;-)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44701536
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号