缓动是动效中不可避免要用到的东西，缓动函转载请注明出处：www.tangshuang.net【作者：唐霜】数是大部分动效计算的基础，其中就包括了 【作者：唐霜】转载请注明出处：www.tangshuang.netcss 的动画属性。你可以通过这里【作者：唐霜】来了解一些缓动函数和它的实际效果。缓动函【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】数，说的简单点，就是通过时间计算当前时间【本文受版权保护】【关注微信公众号：wwwtangshuangnet】点上的值。经过抽象之后，缓动函数的计算结【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net果是一个比例，用这个比例，去乘以对应的实著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。际值，就是该时间点上的应得值。

缓动函数【作者：唐霜】

上面是一个 sin 函数的曲线，假如一个本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。人的身高和年龄的关系按照 sin 函数来本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】长，年龄小的时候长的慢，青年时期长的很快【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】，年龄再大又不长。假设身高为 h，年龄为转载请注明出处：www.tangshuang.net【未经授权禁止转载】 t，那么 h = easeInSin(转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】t). easeInSin 的 js 实【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。现就是今天我们这篇文章的主角。这里可以告【转载请注明来源】本文版权归作者所有，未经授权不得转载。诉你答案，easeInSin = t => 1 + Math.sin(Math.PI / 2 * t - Math.PI / 2) 这便是一个缓动函数。【版权所有】唐霜 www.tangshuang.net

你一眼看过去，觉得有意思，但是不知道具体【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。怎么应用。现在，你来想象，你现在就是用 【作者：唐霜】【作者：唐霜】canvas 来画这个人，他的身高和胖瘦原创内容，盗版必究。【作者：唐霜】都是按照 easeInSin 来变化，你转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net的 canvas 画布高度为 200，你【转载请注明来源】本文作者：唐霜，转载请注明出处。的人现在 20 岁，你这个人现在在画布中著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net的身高为 172，现在，让你用 canv本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。as 动画，实现这个人从一个受精卵长大成【本文首发于唐霜的博客】原创内容，盗版必究。现在这个身高，你是不是就有思路了。假设时【未经授权禁止转载】【转载请注明来源】间每过 1 秒相当于这个人年长 1 岁，【本文受版权保护】原创内容，盗版必究。那么你需要通过 setTimeout 来【未经授权禁止转载】【转载请注明来源】得到一个 20 秒的计时器，每一个秒刻度【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。时，需要通过 easeInSin 函数算【本文首发于唐霜的博客】【作者：唐霜】出这个时候这个人应该多高，具体翻译为：h【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。 = easeInSin(t) * 17未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。2, 乘以 172 就得到当前岁数对应的转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net身高了，然后在通过 js 重绘人物就行了著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】。

现在回头看，是不是很简单。转载请注明出处：www.tangshuang.net

接下来，我们都来了解一下都有哪些缓动函数著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。。

一般来说，有 4 种形式的缓动函数，它们本文作者：唐霜，转载请注明出处。原创内容，盗版必究。通过 h 值的增长速度（加速度）加以区分【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】，只增不减的是 in 函数，只减不增的是【版权所有，侵权必究】转载请注明出处：www.tangshuang.net out 函数，先增后减的是 in-ou【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。t 函数，先减后增的是 out-in 函【原创内容，转载请注明出处】【原创不易，请尊重版权】数。你可以通过这里著作权归作者所有，禁止商业用途转载。研究不同缓动函数的图形。一般来说，in 【转载请注明来源】【转载请注明来源】和 out 函数相对应，将 in 函数图【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net形旋转 180 度之后，就得到 out 本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。函数图形。in-out 和 out-in【版权所有，侵权必究】【版权所有，侵权必究】 函数相对，将 in-out 函数旋转 【本文受版权保护】未经授权，禁止复制转载。90 度之后，对称翻转，就得到 out-本文版权归作者所有，未经授权不得转载。【转载请注明来源】in 函数图形。一般，out-in 函数【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。相对更难实现。

补间值计算转载请注明出处：www.tangshuang.net

那么有没有现成的库呢？比较知名的 Twe【作者：唐霜】原创内容，盗版必究。en.js 内置了缓动函数，但是，它太过【版权所有】唐霜 www.tangshuang.net【本文受版权保护】复杂，并非我想要的。我从这里【本文首发于唐霜的博客】得到了很多高手无私贡献的缓动函数，经过整著作权归作者所有，禁止商业用途转载。【作者：唐霜】理之后，撰写了一个类，用来进行补间值的计【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。算。

import Etx from 'etx'

class Motion extends Etx {
  constructor(options = {}) {
    super()

    const { type = 'linear', start = 0, end = 1, duration = 0, loop = false } = options

    this.type = type
    this.start = start
    this.end = end
    this.duration = duration
    this.loop = loop
    this.current = start

    this.status = -1
    this.time = 0
  }
  animate() {
    if (this.status < 1) {
      return
    }
    requestAnimationFrame(() => {
      const currentTime = Date.now()
      const t = (currentTime - this.time) / this.duration
      const tw = t > 1 ? 1 : t < 0 ? 0 : t
      const easing = Motion.easings[this.type]
      const scale = easing(tw)
      const end = this.end
      const start = this.start
      const value = (end - start) * scale + start
      this.current = value
      this.emit('update', value)

      if (tw === 1 && this.loop) {
        this.time = currentTime
      }
      else if (tw === 1) {
        this.stop()
        return
      }

      this.animate()
    })
  }
  start() {
    if (!easings[this.type] || this.duration <= 0) {
      const value = this.end
      this.current = value
      this.emit('update', value)
      this.stop()
      return
    }

    if (this.status > 0) {
      return
    }
    if (this.status < 0) {
      this.time = Date.now()
    }

    this.status = 1
    this.emit('start')
    this.animate()
  }
  pause() {
    this.status = 0
    this.emit('pause')
  }
  stop() {
    this.status = -1
    this.emit('stop')
  }
}

// https://gist.github.com/gre/1650294
// https://easings.net/
Motion.easings = {
  // no easing, no acceleration
  linear: t => t,
  // accelerating from zero velocity
  easeInQuad: t => t*t,
  // decelerating to zero velocity
  easeOutQuad: t => t*(2-t),
  // acceleration until halfway, then deceleration
  easeInOutQuad: t => t<.5 ? 2*t*t : -1+(4-2*t)*t,
  // accelerating from zero velocity
  easeInCubic: t => t*t*t,
  // decelerating to zero velocity
  easeOutCubic: t => (--t)*t*t+1,
  // acceleration until halfway, then deceleration
  easeInOutCubic: t => t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1,
  // accelerating from zero velocity
  easeInQuart: t => t*t*t*t,
  // decelerating to zero velocity
  easeOutQuart: t => 1-(--t)*t*t*t,
  // acceleration until halfway, then deceleration
  easeInOutQuart: t => t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t,
  // accelerating from zero velocity
  easeInQuint: t => t*t*t*t*t,
  // decelerating to zero velocity
  easeOutQuint: t => 1+(--t)*t*t*t*t,
  // acceleration until halfway, then deceleration
  easeInOutQuint: t => t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t,
  // elastic bounce effect at the beginning
  easeInElastic: t => (.04 - .04 / t) * Math.sin(25 * t) + 1,
  // elastic bounce effect at the end
  easeOutElastic: t => .04 * t / (--t) * Math.sin(25 * t),
  // elastic bounce effect at the beginning and end
  easeInOutElastic: t => (t -= .5) < 0 ? (.02 + .01 / t) * Math.sin(50 * t) : (.02 - .01 / t) * Math.sin(50 * t) + 1,
  easeInSin: t => 1 + Math.sin(Math.PI / 2 * t - Math.PI / 2),
  easeOutSin: t => Math.sin(Math.PI / 2 * t),
  easeInOutSin: t => (1 + Math.sin(Math.PI * t - Math.PI / 2)) / 2,
}

使用方法：著作权归作者所有，禁止商业用途转载。

const motion = new Motion({
  type: 'easeInElastic',
  start: 24,
  end: 60,
  duration: 2000,
})

function render() {
  const height = motion.current
  document.querySelecotry('#some').style.height = height + 'px'
}

motion.on('update', render)

motion.start()

上面定义了一个基于 easeInElas原创内容，盗版必究。【作者：唐霜】tic 缓动函数的计算器，它的缓动起始位著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】置为 24，结束位置为 60，整个动效过原创内容，盗版必究。原创内容，盗版必究。程时间是 2 秒。在定义好计算器之后，我【未经授权禁止转载】【本文首发于唐霜的博客】们调用 start() 开始计算，通过 著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】on 方法监听计算结果，并且修改某个元素【本文受版权保护】原创内容，盗版必究。的 height，这样，#some 这个【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】元素的高度，就会从 24 开始缓缓涨到 【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】60，完成整个动作过程。

比较秒的设计是，它提供了一个 pause【版权所有，侵权必究】【原创不易，请尊重版权】 方法，可以用来暂停动画。

基于这样的方法，我们可以进行更为复杂的扩【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net展，比如同时设置多个 css 属性之类的【未经授权禁止转载】【版权所有，侵权必究】。

缓动效果【版权所有】唐霜 www.tangshuang.net

接下来我们来看看都有哪些缓动效果。总体上原创内容，盗版必究。【原创不易，请尊重版权】，我们将效果分为 4 大类：渐变、位移、【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】转体、缩放。其中转体比较复杂，又可以分为【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】：旋转、翻转、3D特效。

渐变相关的一般包括透明度、长宽、色值等。【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。位移包括直线、曲线，可以通过 css 的本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。位置相关属性来控制。

• fade转载请注明出处：www.tangshuang.net
【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。
• to【未经授权禁止转载】
【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【本文受版权保护】【版权所有，侵权必究】
• resize本文作者：唐霜，转载请注明出处。
【原创不易，请尊重版权】【未经授权禁止转载】【作者：唐霜】【本文首发于唐霜的博客】
• gradient著作权归作者所有，禁止商业用途转载。
【原创不易，请尊重版权】【本文受版权保护】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。
• tween【本文首发于唐霜的博客】
【转载请注明来源】转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。

这些单词是在处理缓动效果时经常使用的，比【本文首发于唐霜的博客】【本文受版权保护】如 fadeIn, fadeOut 等。

如何将缓动函数应用到缓动效果呢？其实很简转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net单，只需要通过上面的缓动计算器修改对应的【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。 css 属性值即可。例如，fadeIn【转载请注明来源】未经授权，禁止复制转载。 的实现：

const motion = new Motion({
  duration: 0.5,
})

function fadeIn() {
  const opacity = motion.current
  $('#some').css({ opacity })
}

fadeIn() // 初始值
motion.on('update', fadeIn())
motion.start()

这样就完成了一个渐显的动画效果。但是实际【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】上，我们很少直接用 js 去处理这种简单【未经授权禁止转载】本文作者：唐霜，转载请注明出处。的效果，因为考虑到性能问题，每一次修改 未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。css，都会让浏览器重绘，这会阻塞其他进原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】程，如果计算过于复杂，就会造成卡顿。但是著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】，在一些特殊的场合，我们无法通过简单的 【本文受版权保护】转载请注明出处：www.tangshuang.netcss 来实现的时候，这也是一种方式。