Vue 组件设计 |如何自定义js和css动画曲线

写在

前面

我们的组件库团队还在招募粉丝贡献，未来有计划添加一些常用组件。欢迎感兴趣的伙伴参与讨论。

仓库地址
单据地址

希望您能支持我，star。如果您愿意贡献或讨论，可以在问题列表中留下您的电子邮件地址，我们会尽快回复您。感谢我们的掘金社区同胞。

动画当前执行进度自定义CSS动画曲线

动画计时功能

在css中，animation和transition具有控制动画曲线的属性，animation-timing-function和transition-timing-function。我们经常看到的值有linear、ease、ease-in...另外，还有一个可自定义的功能cubic-bezier(x1,y1,x2,y2)来管理动画曲线，可以通过两个控制点来确定贝塞曲线。描述一下动画曲线

贝塞曲线

我不会在这里讨论 Putir 曲线的数学细节。通俗地说，就是在坐标系中从(0, 0)到(1, 1)画一条直线，然后通过两条曲线控制点画成一条直线，这条曲线代表了之间的关系和 动画当前执行进度，通常称为 动画曲线。这两个控制点分别对应cubic-bezier(x1,y1,x2,y2)中的(x1, y1)和(x2, y2)，如下图所示。

非常简单的方法

这是一种简单方便的方法。您可以前往该工具站点并拖出贝塞曲线。您可以获取这两个控制点的坐标，也可以直接将生成的贝塞曲线函数复制到您的css中。方便吗？

特殊js动画曲线

在某些情况下，动画css无法满足组件对动画控制和灵活性的要求。例如，您需要实现自定义浏览器滚动到顶部的效果，或者单击某个选项卡自动滚动查看。对于中间的效果，我需要自定义动画执行曲线。这种情况下，最好用js来控制动画的整体执行流程

请求动画帧

该方法的具体细节这里不再讨论。通俗地说，就是在浏览器绘制下一帧之前，完成你想做的任务。这确保每个浏览器框架都可以处理我们。任务绘图使帧下降。

在js中使用贝塞曲线

首先函数是求值过程，那么贝塞曲线动画函数就是通过动画执行时间比率找到动画当前执行进度的过程。这个动画功能可以通过算法来实现。像 bezier-easing 的实现有很多，可以直接通过贝塞er 曲线控制点创建动画功能（timing-function），即下例中的animation。这里我以线性动画为例，实现scrollTo动画方法。

function scrollTo(element, { top = 0, left = 0, duration = 300, animation }) {
  const startTime = Date.now()

  const { scrollTop, scrollLeft } = element

  const frame = () => {
    // 算出动画执行时间比率 0 -> 1
    const progress = (Date.now() - startTime) / duration

    if (progress < 1) {
      const nextTop = scrollTop + (top - scrollTop) * animation(progress)
      const nextLeft = scrollLeft + (left - scrollLeft) * animation(progress)

      element.scrollTo(nextLeft, nextTop)
      requestAnimationFrame(frame)
    } else {
      element.scrollTo(left, top)
    }
  }

  requestAnimationFrame(frame)
}

// 线性增长 x y成正比
const linear = value => value

// 执行方法 元素会线性的滚动到100px的位置
scrollTo(document.getElementById('scroller'), {
  top: 100,
  animation: linear
})