下面是使用Anime.js库创建一个拖动滑块并更新旋转速度的示例代码:
HTML代码:
CSS代码:
#slider {
width: 200px;
height: 10px;
background-color: #ccc;
position: relative;
}
#circle {
width: 50px;
height: 50px;
background-color: blue;
border-radius: 50%;
position: absolute;
top: -20px;
left: 0;
}
JavaScript代码:
// 创建一个动画对象
var animation = anime({
targets: '#circle',
rotate: 360, // 初始旋转角度
duration: 1000, // 动画持续时间
loop: true, // 循环播放
autoplay: false // 不自动播放
});
// 监听滑块拖动事件
var slider = document.getElementById('slider');
slider.addEventListener('input', function() {
// 更新动画的旋转速度
animation.pause();
animation.seek(animation.duration * (slider.value / 100));
});
// 启动动画
animation.play();
这段代码使用Anime.js库创建了一个动画对象,将目标元素指定为id为"circle"的div元素。通过调整滑块的值,可以更新动画的旋转速度。滑块的值被映射到动画的持续时间,每当滑块的值发生变化时,我们通过调用animation.seek()
方法来更新动画的进度。