英文:
Is there a way to loop a stepped animation?
问题
我已经为标志设计创建了一个分步动画，但似乎无法使其循环。我尝试在最后一步中重新调用该函数，使用setInterval，但我对JQuery还不是100%确定语法。有人有什么建议吗？
这是我现有的代码：
function move(step1, step2, step3, step4, step5) {
$('.pupil').animate({
left: '+=' + step1,
}, 800, function() {
$(this).animate({
top: '+=' + step2,
}, 800, function() {
$(this).animate({
left: '+=' + step3,
}, 800, function() {
$(this).animate({
top: '+=' + step4,
}, 800, function() {
$(this).animate({
left: '+=' + step5,
}, 800);
});
});
});
});
}
$(function() {
move(2, 2, -4, -2, 2);
});
这是代码的链接，以查看HTML和CSS：
https://codepen.io/kaitruss/pen/mdzxeZV
当我尝试循环动画时，大多数情况下它只会停止工作。我尝试添加第六步，其中调用了函数以重新启动它，但它完全停止工作。使用setInterval并调用函数既没有破坏它，也没有使其循环。
英文:
I've created a stepped animation for a logo design, but I can't seem to get it to loop. I've tried recalling the function in the final step, using setInterval, but I'm pretty new to JQuery so I'm not 100% sure on the syntax. Does anyone have any suggestions?
Here is my existing code:
function move(step1, step2, step3, step4, step5) {
$('.pupil').animate({
left: '+=' + step1,
}, 800, function() {
$(this).animate({
top: '+=' + step2,
}, 800, function() {
$(this).animate({
left: '+=' + step3,
}, 800, function(){
$(this).animate({
top: '+=' + step4,
}, 800, function() {
$(this).animate({
left: '+=' + step5,
}, 800,);
})
});
});
});
}
$(function() {
move(2, 2, -4, -2, 2);
});
And a link to the codepen to see the html and css:
https://codepen.io/kaitruss/pen/mdzxeZV
When I tried to loop the animation, most of the time it would just stop working. I attempted to add a sixth step where the function was called in order to restart it, but it just stopped working altogether. Using setInterval and calling the function didn't break it, but it also didn't loop.
答案1
得分: 0
我已清理了一下javascript代码，现在它可以运行了。以下是代码pen链接：
https://codepen.io/Crist-bal-D-az-lvarez/pen/BaqVqrr
只编辑了javascript：
function move($element, movements, time) {
if (movements.length > 0) {
$element.animate(movements[0], time, function() {
movements.shift();
move($element, movements, time);
});
}
}
function animateEye() {
move($('.pupil'), [
{ left: '+=2' },
{ top: '+=2' },
{ left: '+=-4' },
{ top: '+=-2' },
{ left: '+=2' }
], 800);
}
var interval = setInterval(animateEye, 800 * 5 + 2000); // wait 2 seconds after the five animation cycles
animateEye();
// clearInterval(interval); // stop the infinite loop animation
英文:
I have cleaned a little the javascript code and now it is working, here is the code pen:
https://codepen.io/Crist-bal-D-az-lvarez/pen/BaqVqrr
Only edited the javascript
function move($element, movements, time) {
if (movements.length > 0) {
$element.animate(movements[0], time, function() {
movements.shift();
move($element, movements, time);
});
}
}
function animateEye() {
move($('.pupil'), [
{ left: '+=2' },
{ top: '+=2' },
{ left: '+=-4' },
{ top: '+=-2' },
{ left: '+=2' }
], 800);
}
var interval = setInterval(animateEye, 800 * 5 + 2000); // wait 2 seconds after the five animation cycles
animateEye();
// clearInterval(interval); // stop the infinite loop animation
Here is snippet version
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function move($element, movements, time) {
if (movements.length > 0) {
$element.animate(movements[0], time, function() {
movements.shift();
move($element, movements, time);
});
}
}
function animateEye() {
move($('.pupil'), [
{ left: '+=2' },
{ top: '+=2' },
{ left: '+=-4' },
{ top: '+=-2' },
{ left: '+=2' }
], 800);
}
var interval = setInterval(animateEye, 800 * 5 + 2000); // wait 2 seconds after the five animation cycles
animateEye();
// clearInterval(interval); // stop the infinite loop animation
<!-- language: lang-css -->
.text{
color:#222345;
font-size:100px;
font-family: 'Cedarville Cursive', cursive;
}
.logo{
position:relative;
height: 150px;
width:100px;
overflow:hidden;
}
.K{
position:absolute;
z-index:5;
top: 0px;
left: 0px;
}
.R{
position:absolute;
top: 25px;
left: 24px;
}
.iris{
position:absolute;
width:22px;
height:20px;
background-color:#0DAB76;
border-radius:30px;
top:76px;
left:4px;
}
.pupil{
position:absolute;
width:4px;
height:12px;
background-color:#272727;
border-radius:15px;
top:81px;
left:13.5px;
}
.lid{
position:absolute;
width:15px;
height:1px;
top:75px;
left:5px;
border-radius:15px;
z-index:6;
transform:rotate(-7deg);
}
<!-- language: lang-html -->
<head><link href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="logo">
<div class="text K"> K </div>
<div class="text R"> R </div>
<div class="lid"></div>
<div class="iris"></div>
<div class="pupil"></div>
</div>
</body>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论