资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/一个精简的js动画库实现 (可自行扩展须要的内容)

一个精简的js动画库实现 (可自行扩展须要的内容)

Benedict Evans / 852人阅读

摘要：一个精简的动画库实现项目地址由于项目须要做一些动画，并不想让整个项目引入太多的内容导致文件过大，所以为了满足要求写了一个精简的可扩展的动画库功能是简单模仿里面的函数用法这里的会返回到之间的数字再根据情况自己处理须要处理的动画改变属性到代码过

一个精简的js动画库实现 项目地址

animation.js

由于项目须要做一些动画，并不想让整个项目引入太多的内容导致文件过大，所以为了满足要求写了一个精简的可扩展的动画库功能是简单模仿d3.js里面的tween函数

用法： 
</>复制代码 
  1. Animation()
  2.   .easing(Animation.easing.Linear)
  3.   .delay(500)
  4.   .duration(1000)
  5.   .run((i) => {
  6.     // 这里的i会返回0到1之间的数字
  7.     // 再根据情况自己处理须要处理的动画
  8.     // eg: 改变div left 属性 10 到 100
  9.     document.querySelector(".box").style.left = 10 + 90 * i + "px"
  10.   })
  11.   .then(() => {
  12.     alert("finish")
  13.   })
代码过程：

首先，须要一个缓动函数，这个网上一搜一大把
这里帖上一个

</>复制代码 
  1. let easing = {
  2.   Linea: function (t, b, c, d) {
  3.     return c * t / d + b
  4.   },
  5.   Quad: {
  6.     easeIn: function (t, b, c, d) {
  7.       return c * (t /= d) * t + b
  8.     },
  9.     easeOut: function (t, b, c, d) {
  10.       return -c * (t /= d) * (t - 2) + b
  11.     },
  12.     easeInOut: function (t, b, c, d) {
  13.       if ((t /= d / 2) < 1) return c / 2 * t * t + b
  14.       return -c / 2 * ((--t) * (t - 2) - 1) + b
  15.     }
  16.   },
  17.   Cubic: {
  18.     easeIn: function (t, b, c, d) {
  19.       return c * (t /= d) * t * t + b
  20.     },
  21.     easeOut: function (t, b, c, d) {
  22.       return c * ((t = t / d - 1) * t * t + 1) + b
  23.     },
  24.     easeInOut: function (t, b, c, d) {
  25.       if ((t /= d / 2) < 1) return c / 2 * t * t * t + b
  26.       return c / 2 * ((t -= 2) * t * t + 2) + b
  27.     }
  28.   },
  29.   Quart: {
  30.     easeIn: function (t, b, c, d) {
  31.       return c * (t /= d) * t * t * t + b
  32.     },
  33.     easeOut: function (t, b, c, d) {
  34.       return -c * ((t = t / d - 1) * t * t * t - 1) + b
  35.     },
  36.     easeInOut: function (t, b, c, d) {
  37.       if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b
  38.       return -c / 2 * ((t -= 2) * t * t * t - 2) + b
  39.     }
  40.   },
  41.   Quint: {
  42.     easeIn: function (t, b, c, d) {
  43.       return c * (t /= d) * t * t * t * t + b
  44.     },
  45.     easeOut: function (t, b, c, d) {
  46.       return c * ((t = t / d - 1) * t * t * t * t + 1) + b
  47.     },
  48.     easeInOut: function (t, b, c, d) {
  49.       if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b
  50.       return c / 2 * ((t -= 2) * t * t * t * t + 2) + b
  51.     }
  52.   },
  53.   Sine: {
  54.     easeIn: function (t, b, c, d) {
  55.       return -c * Math.cos(t / d * (Math.PI / 2)) + c + b
  56.     },
  57.     easeOut: function (t, b, c, d) {
  58.       return c * Math.sin(t / d * (Math.PI / 2)) + b
  59.     },
  60.     easeInOut: function (t, b, c, d) {
  61.       return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b
  62.     }
  63.   },
  64.   Expo: {
  65.     easeIn: function (t, b, c, d) {
  66.       return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b
  67.     },
  68.     easeOut: function (t, b, c, d) {
  69.       return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b
  70.     },
  71.     easeInOut: function (t, b, c, d) {
  72.       if (t == 0) return b
  73.       if (t == d) return b + c
  74.       if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b
  75.       return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b
  76.     }
  77.   },
  78.   Circ: {
  79.     easeIn: function (t, b, c, d) {
  80.       return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b
  81.     },
  82.     easeOut: function (t, b, c, d) {
  83.       return c * Math.sqrt(1 - (t = t / d - 1) * t) + b
  84.     },
  85.     easeInOut: function (t, b, c, d) {
  86.       if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b
  87.       return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b
  88.     }
  89.   },
  90.   Elastic: {
  91.     easeIn: function (t, b, c, d, a, p) {
  92.       if (t == 0) return b
  93.       if ((t /= d) == 1) return b + c
  94.       if (!p) p = d * 0.3
  95.       if (!a || a < Math.abs(c)) {
  96.         a = c
  97.         var s = p / 4
  98.       } else var s = p / (2 * Math.PI) * Math.asin(c / a)
  99.       return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b
  100.     },
  101.     easeOut: function (t, b, c, d, a, p) {
  102.       if (t == 0) return b
  103.       if ((t /= d) == 1) return b + c
  104.       if (!p) p = d * 0.3
  105.       if (!a || a < Math.abs(c)) {
  106.         a = c
  107.         var s = p / 4
  108.       } else var s = p / (2 * Math.PI) * Math.asin(c / a)
  109.       return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b)
  110.     },
  111.     easeInOut: function (t, b, c, d, a, p) {
  112.       if (t == 0) return b
  113.       if ((t /= d / 2) == 2) return b + c
  114.       if (!p) p = d * (0.3 * 1.5)
  115.       if (!a || a < Math.abs(c)) {
  116.         a = c
  117.         var s = p / 4
  118.       } else var s = p / (2 * Math.PI) * Math.asin(c / a)
  119.       if (t < 1) return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b
  120.       return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b
  121.     }
  122.   },
  123.   Back: {
  124.     easeIn: function (t, b, c, d, s) {
  125.       if (s == undefined) s = 1.70158
  126.       return c * (t /= d) * t * ((s + 1) * t - s) + b
  127.     },
  128.     easeOut: function (t, b, c, d, s) {
  129.       if (s == undefined) s = 1.70158
  130.       return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b
  131.     },
  132.     easeInOut: function (t, b, c, d, s) {
  133.       if (s == undefined) s = 1.70158
  134.       if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b
  135.       return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b
  136.     }
  137.   },
  138.   Bounce: {
  139.     easeIn: function (t, b, c, d) {
  140.       return c - Tween.Bounce.easeOut(d - t, 0, c, d) + b
  141.     },
  142.     easeOut: function (t, b, c, d) {
  143.       if ((t /= d) < (1 / 2.75)) {
  144.         return c * (7.5625 * t * t) + b
  145.       } else if (t < (2 / 2.75)) {
  146.         return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b
  147.       } else if (t < (2.5 / 2.75)) {
  148.         return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b
  149.       } else {
  150.         return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b
  151.       }
  152.     },
  153.     easeInOut: function (t, b, c, d) {
  154.       if (t < d / 2) return Tween.Bounce.easeIn(t * 2, 0, c, d) * 0.5 + b
  155.       else return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b
  156.     }
  157.   }
  158. }

其次，我们须要用到requestAnimationFrame,要先解决一下兼容性问题
这个也是网上一找一大把,这里贴上我用的代码

</>复制代码 
  1. var vendors = ["webkit", "moz"]
  2. for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
  3.   window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"]
  4.   window.cancelAnimationFrame = window[vendors[x] + "CancelAnimationFrame"] ||
  5.     window[vendors[x] + "CancelRequestAnimationFrame"]
  6. }
  7. if (!window.requestAnimationFrame) {
  8.   window.requestAnimationFrame = function (callback, element) {
  9.     var currTime = new Date().getTime()
  10.     var timeToCall = Math.max(0, 16.7 - (currTime - lastTime))
  11.     var id = window.setTimeout(function () {
  12.       callback(currTime + timeToCall)
  13.     }, timeToCall)
  14.     lastTime = currTime + timeToCall
  15.     return id
  16.   }
  17. }
  18. if (!window.cancelAnimationFrame) {
  19.   window.cancelAnimationFrame = function (id) {
  20.     clearTimeout(id)
  21.   }
  22. }

然后，我们须要定义一下时间戳的兼容函数，后面会用到

</>复制代码 
  1. function time () {
  2.   if (typeof performance !== "undefined" && performance.now) {
  3.     return performance.now()
  4.   }
  5.   return Date.now ? Date.now() : (new Date()).getTime()
  6. }

最后，我们要开始制作整个动画的主要内容了

核心是利用缓动函数进行目标值生成

缓动参数的说明:
t: 已经流逝的时间
b: 初始值
c: 目标值
d: 总时间

可以看出来缓动函数的大概功能是
根据 【t所占d的比例】
算出 【b-c之间的值】

我们只须要开始一个轮询，传入执行函数的时间和值直到结束就行了
下面看代码

</>复制代码 
  1. class AnimationCore {
  2.   constructor () {
  3.     this.__duration__ // 执行动画的时间
  4.     this.__delay__ = 0 // 开始动画的间隔
  5.     this.__action__ // 传入的处理函数
  6.     this.__easing__ = easing.Linear // 缓动函数
  7.     this.__startTime__ // 开始动画的时间戳
  8.     this.resolve = null
  9.     this.timer = null
  10.   }
  11.   /**
  12.    * 设置 执行动画的时间
  13.    * 
  14.    */
  15.   duration (d) {
  16.     this.__duration__ = d
  17.     return this
  18.   }
  19.   /**
  20.    * 设置 开始动画的间隔
  21.    * 
  22.    */
  23.   delay (d) {
  24.     this.__delay__ = d
  25.     return this
  26.   }
  27.   /**
  28.    * 设置 缓动函数
  29.    * 
  30.    */
  31.   easing (e) {
  32.     this.__easing__ = e
  33.     return this
  34.   }
  35.   /**
  36.    * 停止
  37.    * 
  38.    */
  39.   stop () {
  40.     if (this.timer) {
  41.       cancelAnimationFrame(this.timer)
  42.       this.timer = null
  43.     }
  44.   }
  45.   /**
  46.    * 结束并到最后状态
  47.    * 
  48.    */
  49.   finish () {
  50.     if (this.timer) {
  51.       cancelAnimationFrame(this.timer)
  52.       this.timer = null
  53.       this.action(1)
  54.       this.resolve()
  55.     }
  56.   }
  57.   /**
  58.    * 开始 动画
  59.    * 
  60.    */
  61.   run (action, easingfunction) {
  62.     return new Promise((resolve, reject) => {
  63.       // 根据设置的delay来进行延时
  64.       setTimeout(() => {
  65.         // 获取开始时间
  66.         this.__startTime__ = time()
  67.         easingfunction = easingfunction || this.__easing__ || easing.Linear
  68.         this.action = action
  69.         this.resolve = resolve
  70.         // 这里先执行一次 因为下次执行时可能跳过了第一帖
  71.         this.action(0)
  72.         // 下面是每贴要执行的内容
  73.         let step = () => {
  74.           // 获取流逝了的时间
  75.           var passedTime = Math.min(time() - this.__startTime__, this.__duration__)
  76.           // 获取0到1之间的值是通过缓动函数
  77.           // 参数说明:
  78.           //  t: 已经流逝的时间
  79.           //  b: 初始值
  80.           //  c: 目标值
  81.           //  d: 总时间
  82.           this.action(
  83.             easingfunction(
  84.               passedTime,
  85.               0,
  86.               1,
  87.               this.__duration__
  88.             )
  89.           )
  90.           if (passedTime >= this.__duration__) {
  91.             this.start = null
  92.             this.timer = null
  93.             this.resolve()
  94.           } else this.timer = requestAnimationFrame(step)
  95.         }
  96.         this.timer = requestAnimationFrame(step)
  97.       }, this.__delay__)
  98.     })
  99.   }
  100. }

导出内容

</>复制代码 
  1. function Animation () {
  2.   return new AnimationCore()
  3. }
  4. Animation.easing = easing
  5. // 导出
  6. export default Animation
云服务器 GPU云服务器 java 动画库 弹性可扩展的云计算服务器计划 阿里云复制一个服务器的内容 html必须要的标签

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89689.html

相关文章

  • 值得看看，2019 年 11 个受欢迎的 JavaScript 动画库！

    摘要：超过的星星，是一个动画库，可以处理属性，单个转换，或任何属性以及对象。超过星星，这个动画库大小只有。超过星星，这个库基允许你以选定的速度为字符串创建打字动画。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ 1.Three.js showImg(https://segmentfault.com/img/bVbkQ4X?w=551&h=358); 超过46K的星星，...

    浠ラ箍 评论0 收藏0

  • 2018年值得期待11个Javascript动画库

    摘要：超过的，是一个动画库，可以处理属性，单个转换，或任何属性以及对象。在，是一个快速的动画引擎，具有与的相同的。在，这个功能和反应动画库只重。由和其他人使用，这个库既流行又令人惊讶地有用。 在浏览网页寻找一个整洁的Javascript动画库时，我发现很多recommended的动画库一段时间都没有维护。 经过一些研究，我收集了11个最好的库，在你的应用程序中使用。我还添加了一些，主要是非维...

    call_me_R 评论0 收藏0

  • 2018年值得期待11个Javascript动画库

    摘要：超过的，是一个动画库，可以处理属性，单个转换，或任何属性以及对象。在，是一个快速的动画引擎，具有与的相同的。在，这个功能和反应动画库只重。由和其他人使用，这个库既流行又令人惊讶地有用。 在浏览网页寻找一个整洁的Javascript动画库时，我发现很多recommended的动画库一段时间都没有维护。 经过一些研究，我收集了11个最好的库，在你的应用程序中使用。我还添加了一些，主要是非维...

    teren 评论0 收藏0

发表评论

登陆后可评论

0条评论

Benedict Evans

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<