循环图形动画
循环图形动画
提问于 2021-09-29 20:37:52
我看到了这个代码：https://codepen.io/alex_rodrigues/pen/ogYZdr你可以在这里看到javascipt代码：
setTimeout(function start (){
$('.bar').each(function(i){
var $bar = $(this);
$(this).append('<span class="count"></span>')
setTimeout(function(){
$bar.css('width', $bar.attr('data-percent'));
}, i*100);
});
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).parent('.bar').attr('data-percent')
}, {
duration: 2000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now) +'%');
}
});
});
}, 500)我想让图表完成动画，停止3-5秒，然后重复动画。目前，它完成了动画，但没有循环。任何帮助都是非常感谢的。谢谢!
回答 1
Stack Overflow用户
发布于 2021-09-29 23:38:43
您可以创建以下函数：
- 将重置栏的
width并重置动画。
可以将此函数设置为在以下条件下调用：
($('.bar').length - 1) * 100 + 2000 + your_chosen_delay_in_ms
为了让它起作用，我们必须去掉所有不需要重复的东西，比如$(this).append('<span class="count"></span>')。
结合在一起，它看起来像这样：
var animation_offset = 100;
var animation_duration = 2000;
var reanimate_delay = 3000;
function animateBars() {
$('.bar').each(function(i){
var $bar = $(this);
setTimeout(function(){
$bar.css('width', $bar.attr('data-percent'));
}, i*animation_offset);
});
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).parent('.bar').attr('data-percent')
}, {
duration: animation_duration,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now) +'%');
}
});
});
setTimeout(
reAnimateBars,
(
($('.bar').length - 1) * animation_offset // Moment the last bar starts animating
+ animation_duration // Animation duration
+ reanimate_delay // Your chosen delay
)
);
}
function reAnimateBars() {
// Reset the bars
$('.bar .count').text('');
$('.bar').css('width', '0%');
// This will take some time (as per CSS transition property) to reset.
// So we have to wait for that too.
// Start the animation (again)
// after CSS transition time for resetting is over
setTimeout(animateBars, animation_duration);
}
setTimeout(function() {
// Put non-repeating things here:
$('.bar').append('<span class="count"></span>');
// Start animation (first time)
animateBars();
}, 500);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69383086
复制相关文章
相似问题
腾讯云开发者
