下面是对“JS实现图片旋转动画效果封装与使用示例”的详细讲解：
标题
JS实现图片旋转动画效果封装与使用示例
描述
本文介绍如何使用JavaScript封装实现图片旋转的动画效果，并提供两个使用示例，帮助读者更好地理解这个实现过程。
动画效果实现原理
要想实现图片旋转动画效果，需要借助CSS3的transform属性。其中，transform属性可以改变元素的形态，包括旋转、缩放、移动等。而实现旋转动画效果，则需要借助transform的rotate属性。具体实现过程可参考以下代码：
.rotate {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
以上代码定义了一个旋转动画效果的CSS类名，当该类名应用于某个元素时，该元素就会以中心点进行旋转。其中，animation属性用于指定动画名称、持续时间、动画速度等信息，而keyframes则是定义动画效果的关键。在本例中，定义了一个从0度到360度的旋转动画效果，持续时间为2秒，并设置了该动画无限循环。
实现过程
接下来，我们基于以上CSS代码，通过JavaScript实现旋转动画效果的封装。
function rotate(element, duration) {
element.classList.add('rotate');
setTimeout(() => {
element.classList.remove('rotate');
}, duration || 2000);
}
以上代码就是一个简单的旋转动画效果的封装函数。其中，函数接收两个参数：element表示需要进行旋转动画的元素，duration表示旋转动画的持续时间（可选，默认值为2000ms）。这里主要介绍函数的实现，使用示例将在下文中介绍。
首先，我们先为元素添加CSS类名rotate，从而触发CSS中定义的旋转动画。接着，通过setTimeout函数，延迟duration时间（默认值为2000ms）之后，从元素中移除CSS类名rotate，从而完成动画效果的结束。
使用示例一
下面，我们结合HTML代码，给出一个使用示例：
<div id="box">这是一个需要进行旋转动画的元素</div>
<button onclick="start()">点击开始动画</button>
function start() {
const box = document.getElementById('box');
rotate(box, 3000); // 持续3秒的旋转动画
}
在上述代码中，我们使用了一个onclick事件，当按钮被点击时，就会调用函数start。在该函数中，通过document.getElementById函数获取到需要进行旋转动画的元素，然后调用之前封装的rotate函数，从而开始进行旋转动画。其中，rotate函数的第二个参数为3000ms，表示将持续3秒时间。
使用示例二
下面，我们再给出一个使用示例，介绍如何通过循环控制，实现多个元素连续进行旋转动画：
<div class="rotate-item">这是第1个需要进行旋转动画的元素</div>
<div class="rotate-item">这是第2个需要进行旋转动画的元素</div>
<div class="rotate-item">这是第3个需要进行旋转动画的元素</div>
<div class="rotate-item">这是第4个需要进行旋转动画的元素</div>
<button onclick="start()">点击开始动画</button>
function start() {
const items = document.querySelectorAll('.rotate-item');
let duration = 2000;
items.forEach((item) => {
setTimeout(() => {
rotate(item, duration); // 持续2秒的旋转动画
}, duration);
duration += 2000;
});
}
在上述代码中，我们使用了一个querySelectorAll函数，获取到所有需要进行旋转动画的元素，然后通过forEach函数对每个元素进行单独的旋转动画。在forEach循环中，我们按照一定的时间间隔，依次对每个元素进行旋转动画。其中，duration变量表示每个元素将持续的旋转时间，其初始值为2000ms，循环结束后该值会累加。由于每个元素的旋转动画时间相同，因此可通过该变量进行简单的计算。