如何让这个JS动画效果在重启前反转?
How to make this JS animation effect reverse before it restart?
这是动画演示文本,当它开始动画时它会完全消失并重新启动。
但是我想先重启它再反转动画再重启。
var textWrapper = document.querySelector('.rks1');
textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {
return `<span class="word">` +
m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") +
`</span>`;
});
anime.timeline({loop: true})
.add({
targets: '.rks1 .letter',
scale: [3,1],
scaleY: [1.5,1],
opacity: [0,1],
translateZ: 0,
easing: "easeOutExpo",
duration: 400,
delay: (el, i) => 60*i
}).add({
opacity: 0,
duration: 2000,
easing: "easeOutExpo",
delay: 800
});
.rks1 {
font-weight: 900;
font-size: 2.5em;
font-family: rr;
}
.rks1 .letter {
display: inline-block;
line-height: 1em;
}
.word {
white-space: nowrap;
}
.span {
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1 class="rks1">
this is demo text that is animated when it will start animation then this completely disappear and restart.
But I want to reverse animation before it restart.
</h1>
& 我想在此 JS 中添加的另一个功能是,html 逐条设置动画的行,例如:
<h1 class="rks1"> this is demo text that is animated first then reverse animation & start next line animation
</h1>
Just like
<h1 class="rks1"> Then Second Line </h1>
<h1 class="rks1"> Then Third Line </h1>
<h1 class="rks1"> Then Fourth Line </h1>
<h1 class="rks1"> Then Fifth Line </h1>
及更多...
可以将动画参数对象中的direction
属性设置为'alternate'
从头到尾,完成后从尾到头。
var textWrapper = document.querySelector('.rks1');
textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {
return `<span class="word">` +
m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") +
`</span>`;
});
anime.timeline({
loop: true,
direction: 'alternate'
})
.add({
targets: '.rks1 .letter',
scale: [3,1],
scaleY: [1.5,1],
opacity: [0,1],
translateZ: 0,
easing: "easeOutExpo",
duration: 400,
delay: (el, i) => 60*i
}).add({
opacity: 0,
duration: 2000,
easing: "easeOutExpo",
delay: 800
});
.rks1 {
font-weight: 900;
font-size: 2.5em;
font-family: rr;
}
.rks1 .letter {
display: inline-block;
line-height: 1em;
}
.word {
white-space: nowrap;
}
.span {
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1 class="rks1">
this is demo text that is animated when it will start animation then this completely disappear and restart.
But I want to reverse animation before it restart.
</h1>
或者将另一个动画添加到您的时间轴,通过反转您想要设置动画的元素的选择来反转动画。
var textWrapper = document.querySelector('.rks1');
textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {
return `<span class="word">` +
m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") +
`</span>`;
});
var targets = Array.from(document.querySelectorAll('.rks1 .letter'));
anime.timeline({
loop: true,
})
.add({
targets: targets,
scale: [3,1],
scaleY: [1.5,1],
opacity: [0,1],
translateZ: 0,
easing: "easeOutExpo",
duration: 400,
delay: (el, i) => 60*i
}).add({
targets: targets.reverse(),
scale: [1,3],
scaleY: [1,1.5],
opacity: [1,0],
translateZ: 0,
easing: "easeOutExpo",
duration: 100,
delay: (el, i) => 30*i
}).add({
opacity: 0,
duration: 2000,
easing: "easeOutExpo",
delay: 800
});
.rks1 {
font-weight: 900;
font-size: 2.5em;
font-family: rr;
}
.rks1 .letter {
display: inline-block;
line-height: 1em;
}
.word {
white-space: nowrap;
}
.span {
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1 class="rks1">
this is demo text that is animated when it will start animation then this completely disappear and restart.
But I want to reverse animation before it restart.
</h1>
这是动画演示文本,当它开始动画时它会完全消失并重新启动。 但是我想先重启它再反转动画再重启。
var textWrapper = document.querySelector('.rks1');
textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {
return `<span class="word">` +
m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") +
`</span>`;
});
anime.timeline({loop: true})
.add({
targets: '.rks1 .letter',
scale: [3,1],
scaleY: [1.5,1],
opacity: [0,1],
translateZ: 0,
easing: "easeOutExpo",
duration: 400,
delay: (el, i) => 60*i
}).add({
opacity: 0,
duration: 2000,
easing: "easeOutExpo",
delay: 800
});
.rks1 {
font-weight: 900;
font-size: 2.5em;
font-family: rr;
}
.rks1 .letter {
display: inline-block;
line-height: 1em;
}
.word {
white-space: nowrap;
}
.span {
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1 class="rks1">
this is demo text that is animated when it will start animation then this completely disappear and restart.
But I want to reverse animation before it restart.
</h1>
& 我想在此 JS 中添加的另一个功能是,html 逐条设置动画的行,例如:
<h1 class="rks1"> this is demo text that is animated first then reverse animation & start next line animation
</h1>
Just like
<h1 class="rks1"> Then Second Line </h1>
<h1 class="rks1"> Then Third Line </h1>
<h1 class="rks1"> Then Fourth Line </h1>
<h1 class="rks1"> Then Fifth Line </h1>
及更多...
可以将动画参数对象中的direction
属性设置为'alternate'
从头到尾,完成后从尾到头。
var textWrapper = document.querySelector('.rks1');
textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {
return `<span class="word">` +
m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") +
`</span>`;
});
anime.timeline({
loop: true,
direction: 'alternate'
})
.add({
targets: '.rks1 .letter',
scale: [3,1],
scaleY: [1.5,1],
opacity: [0,1],
translateZ: 0,
easing: "easeOutExpo",
duration: 400,
delay: (el, i) => 60*i
}).add({
opacity: 0,
duration: 2000,
easing: "easeOutExpo",
delay: 800
});
.rks1 {
font-weight: 900;
font-size: 2.5em;
font-family: rr;
}
.rks1 .letter {
display: inline-block;
line-height: 1em;
}
.word {
white-space: nowrap;
}
.span {
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1 class="rks1">
this is demo text that is animated when it will start animation then this completely disappear and restart.
But I want to reverse animation before it restart.
</h1>
或者将另一个动画添加到您的时间轴,通过反转您想要设置动画的元素的选择来反转动画。
var textWrapper = document.querySelector('.rks1');
textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {
return `<span class="word">` +
m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") +
`</span>`;
});
var targets = Array.from(document.querySelectorAll('.rks1 .letter'));
anime.timeline({
loop: true,
})
.add({
targets: targets,
scale: [3,1],
scaleY: [1.5,1],
opacity: [0,1],
translateZ: 0,
easing: "easeOutExpo",
duration: 400,
delay: (el, i) => 60*i
}).add({
targets: targets.reverse(),
scale: [1,3],
scaleY: [1,1.5],
opacity: [1,0],
translateZ: 0,
easing: "easeOutExpo",
duration: 100,
delay: (el, i) => 30*i
}).add({
opacity: 0,
duration: 2000,
easing: "easeOutExpo",
delay: 800
});
.rks1 {
font-weight: 900;
font-size: 2.5em;
font-family: rr;
}
.rks1 .letter {
display: inline-block;
line-height: 1em;
}
.word {
white-space: nowrap;
}
.span {
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1 class="rks1">
this is demo text that is animated when it will start animation then this completely disappear and restart.
But I want to reverse animation before it restart.
</h1>