JS實現(xiàn)圖片旋轉(zhuǎn)動畫效果封裝與使用示例

2019-11-19 13:31:53

字體：大中小

供稿：網(wǎng)友

本文實例講述了JS實現(xiàn)圖片旋轉(zhuǎn)動畫效果封裝與使用。分享給大家供大家參考，具體如下：

核心封裝代碼如下：

//圖片動畫封裝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}

使用方法：

隨便創(chuàng)建一img標(biāo)簽

然后如下調(diào)用即可：

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.survivalescaperooms.com JS旋轉(zhuǎn)動畫</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，可得到如下測試運行效果：