JS实现图片旋转动画效果封装与使用示例

2019-11-19 13:31:53

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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.getElementById(opts.elemId);    this.startAnim();}SearchAnim.prototype.startAnim = function () {    this.stopAnim();    this.timer = setInterval(() => {      var startIndex = this.opts.startIndex;      if (startIndex == 360) {        this.opts.startIndex = 0;      }      this.elem.style.transform = "rotate("+ (startIndex) +"deg)";      this.opts.startIndex += 5;    }, this.opts.delay);    setTimeout(() => {      this.stopAnim();    }, this.opts.duration);}SearchAnim.prototype.stopAnim = function() {    if (this.timer != null) {      clearInterval(this.timer);    }}SearchAnim.DEFAULTS = {    duration : 60000,    delay : 200,    direction : true,    startIndex : 0,    endIndex : 360}

使用方法：

随便创建一img标签

然后如下调用即可：

new SearchAnim({  elemId : "wait-icon",  delay : 20,});

完整示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>www.VeVB.COm JS旋转动画</title></head><img src="https://files.VeVB.COm/file_images/article/201807/201879100307926.jpg" id="wait-icon"/><script>//图片动画封装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.getElementById(opts.elemId);    this.startAnim();}SearchAnim.prototype.startAnim = function () {    this.stopAnim();    this.timer = setInterval(() => {      var startIndex = this.opts.startIndex;      if (startIndex == 360) {        this.opts.startIndex = 0;      }      this.elem.style.transform = "rotate("+ (startIndex) +"deg)";      this.opts.startIndex += 5;    }, this.opts.delay);    setTimeout(() => {      this.stopAnim();    }, this.opts.duration);}SearchAnim.prototype.stopAnim = function() {    if (this.timer != null) {      clearInterval(this.timer);    }}SearchAnim.DEFAULTS = {    duration : 60000,    delay : 200,    direction : true,    startIndex : 0,    endIndex : 360}new SearchAnim({  elemId : "wait-icon",  delay : 20,});</script><body></body></html>

使用本站HTML/CSS/JS在线运行测试工具：http://tools.VeVB.COm/code/HtmlJsRun，可得到如下测试运行效果：