本文实例讲述了JS实现图片旋转动画效果封装与使用。分享给大家供大家参考，具体如下：
核心封装代码如下：
//图片动画封装
function SearchAnim(opts) {
for(var i in SearchAnim.DEFAULTS) {
if (opts[i] === undefined) {
opts[i] = SearchAnim.DEFAULTS[i];
}
}
this.opts = opts;
this.timer = null;
this.elem = document.getElemen
JavaScript（JS）是一种广泛用于网页和网络应用的脚本语言，尤其在实现动态交互效果方面具有强大能力。本文将深入探讨如何使用JavaScript实现一个图片旋转的动画效果，并对其封装进行详细解析。
我们看到一个名为`SearchAnim`的函数，这是用来封装图片旋转动画的核心。这个函数接受一个参数`opts`，它是一个对象，包含了动画的各种配置选项。在函数内部，通过`for...in`循环遍历`SearchAnim.DEFAULTS`对象，这通常是预设的一些默认值，如果用户未提供某个选项，就使用默认值填充。`opts`对象的属性包括`duration`(动画持续时间)，`delay`(每次旋转之间的延迟)，`direction`(旋转方向)，`startIndex`(起始角度)，以及`endIndex`(结束角度)。
`SearchAnim.prototype`是`SearchAnim`构造函数的原型对象，其中定义了两个方法：`startAnim`和`stopAnim`。`startAnim`方法用于启动动画，它首先停止当前可能正在运行的动画，然后设置一个定时器，每间隔`delay`毫秒，更新图片元素的`transform`样式，使其旋转一定的角度。当`startIndex`达到360度时，将其重置为0，以实现无限旋转的效果。同时，设定一个超时函数，在`duration`毫秒后自动停止动画。
`stopAnim`方法用于停止动画，检查并清除定时器，以防止不必要的资源浪费。
在实际使用时，我们可以创建一个新的`SearchAnim`实例，传入包含特定配置的对象，如图片元素的ID(`elemId`)，以及自定义的延迟时间和持续时间。例如：
```javascript
new SearchAnim({
elemId: "wait-icon",
delay: 20,
});
```
这段代码会找到ID为"wait-icon"的图片元素，并启动一个旋转动画，每次旋转等待20毫秒，整个动画持续`SearchAnim.DEFAULTS.duration`毫秒。
完整示例代码中，包括了一个简单的HTML页面，引入了`SearchAnim`函数，并创建了一个`img`标签，ID为"wait-icon"，然后通过`new SearchAnim`实例化动画效果。
通过JavaScript实现图片旋转动画，主要涉及的知识点有：JavaScript函数、原型对象、DOM操作（获取元素，修改样式）、定时器（`setInterval`和`setTimeout`）、以及对象属性的默认值处理。这样的封装方式使得代码复用性高，且易于理解和维护。在实际开发中，可以依据需求调整动画参数，实现不同效果的图片旋转动画。
