动画实现剖析：基于纯 JS 的 React Animation 组件-唐霜

问题背景

首先，在读者你心里可能会有个疑问：为什么【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net要用纯 JS 去写一个动画组件呢？直接用【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net市面上已经有的 react 动画组件，或【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】者自己写一个配合 css 的动画组件不就著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】可以了吗。我在正在做的另外一个项目中偶尔【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】遇到一个问题，我利用 css 的 tra【版权所有】唐霜 www.tangshuang.net【本文受版权保护】nsition 去处理一个动画，但是由于著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net时间戳问题，发现画面会有跳动，究其原因，原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】是因为 transition 一旦被打断本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】，剩余动画就不会被执行了，会跳到下一个【本文受版权保护】著作权归作者所有，禁止商业用途转载。transition 直接执行新的动作，【未经授权禁止转载】转载请注明出处：www.tangshuang.net所以画面会有跳动。

原创内容，盗版必究。【转载请注明来源】未经授权，禁止复制转载。

在写 Nautil 的时候，又产生了另外【本文首发于唐霜的博客】【版权所有，侵权必究】一个问题，即跨端开发。css 在 web【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net 上是没有问题的，但是到 react-n【关注微信公众号：wwwtangshuangnet】【作者：唐霜】ative 中呢？或者再移植到其他平台中【作者：唐霜】转载请注明出处：www.tangshuang.net呢？

原创内容，盗版必究。未经授权，禁止复制转载。未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。

总之，使用纯 JS 去实现动画可以有效解著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。决上述两个问题。当然，也会面临性能问题，转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net这需要开发者自己去把握好。本文接下来的原创内容，盗版必究。本文作者：唐霜，转载请注明出处。Animation 组件在讲解过程中，就本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。不再去考虑性能问题，对于使用者而言，也不【本文受版权保护】原创内容，盗版必究。需要在任何时候去用这个组件，而是在其他动【版权所有，侵权必究】【原创内容，转载请注明出处】画组件无法实现某些效果的时候，才考虑本组【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。件。

本文版权归作者所有，未经授权不得转载。【本文受版权保护】

架构设计

一个简单的动画组件还需要架构吗？我们这里【原创不易，请尊重版权】未经授权，禁止复制转载。谈架构，是希望从不同层面拆解一个动画组件【作者：唐霜】原创内容，盗版必究。的构成和实现，从而更好的帮助开发者理解该著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】组件的实现思路和使用技巧。它不是一个系统【本文首发于唐霜的博客】【原创内容，转载请注明出处】，谈不上架构。但是拆解式理解，是我们学习【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】的好方法。如果你读过我之前写的《动效：补间值缓动计算类》这篇文章，但这篇文章讲的不系统，借鉴意【版权所有】唐霜 www.tangshuang.net【本文受版权保护】义不大，因此，本文会详细去解剖编程中的动本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】画开发知识结构。

以上是该组件实现的所有部分，你可以通过这里获得源码。你可以看到，它其实分了 5 个本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】部分，接下来，我会对每一个部分做详细的讲【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】解。

补间

动画补间，简单的说，就是在未给出所有值的转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】情况下，通过计算，算出特定位置的特定值。【转载请注明来源】【本文受版权保护】一般而言，你需要得到一个动画的开始状态和【本文受版权保护】本文作者：唐霜，转载请注明出处。结束状态，然后，通过这两个状态去算出两点原创内容，盗版必究。【未经授权禁止转载】之间某个位置的值。

【转载请注明来源】【作者：唐霜】著作权归作者所有，禁止商业用途转载。

例如，你的动画开始时，值为 0，结束时，【作者：唐霜】著作权归作者所有，禁止商业用途转载。值为 100，在 1min 内完成。请算【本文受版权保护】未经授权，禁止复制转载。出当时间进行到 30s 时的状态值。这样【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。一道简单的题目很容易被算出来，我们知道当【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】时间为 30s 时，值应该为 50. 但转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】是，我们是怎么算出来的呢？实际上，我们的著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。公式如下：

100*0.5=50
【作者：唐霜】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。

【未经授权禁止转载】原创内容，盗版必究。

实际上，计算补间值有一个规律性的公式：

【原创不易，请尊重版权】未经授权，禁止复制转载。

value = start + (end未经授权，禁止复制转载。【本文首发于唐霜的博客】-start) * factor
【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。【转载请注明来源】

结束值减去起始值就是变化的值域，值域乘以本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。变化因子就是已经变化了的值，在起始值的基未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。础上加上该值，就是当前的补间值。

其中，factor（补间因子）是一个 [【关注微信公众号：wwwtangshuangnet】【本文受版权保护】0, 1] 的值。该值在动画中，是一个时著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】间点和整个持续时间（duration）的本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net比值。而在数学中，它可以是任何值域在 [【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。0, 1] 的函数上的任意一个 y 值，原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。例如 sin 这样的三角函数。

色值补间。

原创内容，盗版必究。本文作者：唐霜，转载请注明出处。

颜色本质上也是由值组成，无论是 rgb 【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。还是 hex 的色值，甚至加入了透明度的原创内容，盗版必究。转载请注明出处：www.tangshuang.net rgba，都可以利用上述补间理论计算补【转载请注明来源】【本文首发于唐霜的博客】间结果。在一些应用中，它会提供一个色盘，【转载请注明来源】【原创内容，转载请注明出处】用于让你拾取颜色。难道它需要把所有的颜色本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。都铺满在色盘上吗？当然不是，它只需要提供【原创不易，请尊重版权】【本文首发于唐霜的博客】纵横值域，并通过你拾取位置在整个色盘位置未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】中的比例，再按照上述公式，就可以算出你当著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】前取得的是什么颜色。而色盘上的颜色本身，【关注微信公众号：wwwtangshuangnet】【转载请注明来源】可以通过 css 的渐变函数来实现。

【本文首发于唐霜的博客】原创内容，盗版必究。

总之，上面讲到的补间值计算函数，你可以在这里得到源码进行阅读。

著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。原创内容，盗版必究。

缓动

我们取得一个补间值，它本身是静态的，除非【作者：唐霜】【版权所有，侵权必究】像上面那种取色器应用才有意义，对于我们要【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net进行动画制作时，单纯一个补间值完全没有意【关注微信公众号：wwwtangshuangnet】【转载请注明来源】义。我们必须取得连续的补间值，如何取得连【本文首发于唐霜的博客】【作者：唐霜】续的补间值呢？

原创内容，盗版必究。【本文受版权保护】【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net

动画的重要元素就是时间。

通过时间的推进，来取得连续的补间动画，这【原创内容，转载请注明出处】【转载请注明来源】样的过程被称为“缓动”。缓动的本质，就是未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。获取上述公式中的 factor。但是，缓本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】动的方式有很多种，不同的方式，我们用一种转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。叫“缓动函数”的东西来表达。

【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】

缓动函数让 factor 在时间轴上的变未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。化规律不尽相同。我们可以用 factor【版权所有，侵权必究】【版权所有，侵权必究】的增长加速度不同来表达这个“不同”之处转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。。你可以在这个网站体验到不同缓动函数的加速度（它用视觉的效本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net果让你看到 factor 增长的速度变化【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】）。当你了解 ease 函数之后，你会发本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。现，我们前文指出 factor 是一个原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】[0, 1] 的值，其实不完全正确，因为【作者：唐霜】【未经授权禁止转载】在某些情况下，factor 会超出这个值【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。域，但是总体而言，factor 是从 0【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。开始增长，最终结束时达到 1. 这就是【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net缓动函数的效果，让 factor 的变化【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】具备多种多样性。

现在，我们来想象有一个弹珠，从天上掉下来【转载请注明来源】【未经授权禁止转载】，掉到地上之后，它会有一个回弹的过程，弹本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】几次之后，才最终静止在地面上。

上面这个视频演示了一个 easeOutB未经授权，禁止复制转载。【原创不易，请尊重版权】ounce 的效果，你再看的时候，应该去著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】看右边的那个游标的效果。将它反过来，就是【未经授权禁止转载】【作者：唐霜】我们上面描述的弹珠坠地的效果了。ease原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】OutBounce 是一个缓动函数，它根原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。据当前的时间游标计算出 factor。最本文版权归作者所有，未经授权不得转载。【转载请注明来源】终，我们可以得到一个公式：

【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。未经授权，禁止复制转载。

factor = ease(t/dura【未经授权禁止转载】转载请注明出处：www.tangshuang.nettion)
【原创内容，转载请注明出处】【原创内容，转载请注明出处】【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】

本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。

【本文受版权保护】原创内容，盗版必究。【原创内容，转载请注明出处】

再结合前面的一个公式，我们就可以得到：

value = start + (end【作者：唐霜】本文作者：唐霜，转载请注明出处。-start) * ease(t/dur【版权所有，侵权必究】【本文受版权保护】ation)
【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net

【转载请注明来源】【本文首发于唐霜的博客】原创内容，盗版必究。【转载请注明来源】

在这个公式中，start, end, e【本文受版权保护】【本文受版权保护】ase, duration 一旦在一开始本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。定下来之后，就不会变，所以，这是一个 v【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】alue 关于 t 的一个公式。

本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】【转载请注明来源】【关注微信公众号：wwwtangshuangnet】

value = fn(t)
本文版权归作者所有，未经授权不得转载。【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。

所有 Nautil 支持的缓动函数，你可【原创内容，转载请注明出处】【未经授权禁止转载】以在这里看源码。css 中的缓动函数，你可以看这里。

过渡

到目前为止，我们知道利用缓动函数，可以获著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。得非线性增长的补间值。但是，到目前为止，【作者：唐霜】【版权所有，侵权必究】我们还没有动起来，我们得到的仍然是静态值【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】，我们只能算出某一个值。接下来，我们通过未经授权，禁止复制转载。【作者：唐霜】“过渡”来认识动起来的补间效果。

【原创不易，请尊重版权】【原创内容，转载请注明出处】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。

我们虽然更感知时间在流逝，但是我们无法直【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】接表达这种流逝。为了简介表达时间流逝，人【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】类发明了“时钟”。通过钟表的运动，指示时未经授权，禁止复制转载。【本文首发于唐霜的博客】间的流逝。而在计算机中，也提供了原子钟给【本文受版权保护】本文版权归作者所有，未经授权不得转载。程序使用。但是在 JS 中，我们仍然无法【转载请注明来源】本文作者：唐霜，转载请注明出处。按照准确的时间刻度推进时间。最终，我选择【关注微信公众号：wwwtangshuangnet】【作者：唐霜】了使用 requestAnimation【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】Frame 作为时间演进的工具。

【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net原创内容，盗版必究。

一个过渡，是从时间的这头演进到那头。但是本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。，怎么表达呢？这就是代码层面的设计问题了本文作者：唐霜，转载请注明出处。【作者：唐霜】。我最终设计为，把它设计为一个 Tran本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。sition 类，实例化的时候，传入 d【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.neturation，通过 start 方法开【作者：唐霜】【原创内容，转载请注明出处】始时间推进。另外，我还设计了 pause本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】方法用来暂停时间推荐，设计了 stop【原创内容，转载请注明出处】【本文受版权保护】方法来结束时间推进。

未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。

同时，需要传入 ease，通过上面的公式 factor = ease(t/duration) Transition 可以给出在时间推著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net进中，每一个 requestAnimat著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】ionFrame 的 factor，这需【转载请注明来源】【版权所有】唐霜 www.tangshuang.net要通过提前在 onUpdate 方法中注【未经授权禁止转载】【本文首发于唐霜的博客】册接收函数。

【原创内容，转载请注明出处】原创内容，盗版必究。未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】

const tr = new Transition({ duration, ease })

tr.on('update', (e, factor) => {
  // 再使用补间函数，获得补间值
  const value = tween(start, end, factor)
  // ...
})
tr.start() // 开始推进时间

【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。

具体的代码，你可以通过这里阅读源码。

著作权归作者所有，禁止商业用途转载。【转载请注明来源】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。

动画

让我们再回头看 css transiti本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。on 属性：

transition: name duration ease delay;

一个 transition 属性，实际上著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。是确定了 ease, duration，转载请注明出处：www.tangshuang.net【版权所有，侵权必究】通过 name 样式的值变化来决定 st未经授权，禁止复制转载。【原创不易，请尊重版权】art 和 end。每一次一个样式的值发【转载请注明来源】【原创不易，请尊重版权】生变化时，transition 被触发，著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。此时，原来的老样式值被作为 start，著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net新的样式被作为 end。一旦 trans【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netition 被触发之后，浏览器引擎就会按【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net照 transition 的这些参数进行转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。运算，并将补间值赋值给样式，直到结束。其本文作者：唐霜，转载请注明出处。原创内容，盗版必究。中 delay 本文未涉及。css 的著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。transition 不仅解决了补间、缓【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net动、过渡，而且直接将过渡效果运用到属性所本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。在的样式上去，所以，它本身是一个动画效果原创内容，盗版必究。原创内容，盗版必究。。

再来看看 css animation 属【未经授权禁止转载】【本文受版权保护】性：

【本文受版权保护】转载请注明出处：www.tangshuang.net【未经授权禁止转载】

@keyframes my_animation {
  from {
    margin-left: -150px;
    opacity: 0;
  }
  to {
    margin-left: 0;
    opacity: 1;
  }
}

animation: name duration ease delay iteration-count direction fill-mode play-state;

要使用 animation 需要先定义一转载请注明出处：www.tangshuang.net【本文受版权保护】个 keyframes，这个 keyfr【本文受版权保护】本文版权归作者所有，未经授权不得转载。ames 定义了多个属性的多段 star原创内容，盗版必究。本文作者：唐霜，转载请注明出处。t 和 end。这里有两个点：“多个属性【未经授权禁止转载】【转载请注明来源】”“多段”，这两个特点使得 animat【关注微信公众号：wwwtangshuangnet】【转载请注明来源】ion 和 transition 属性区【转载请注明来源】【未经授权禁止转载】别巨大。同时，animation 还比本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。transition 多了 iterat【未经授权禁止转载】【原创内容，转载请注明出处】ion-count, direction原创内容，盗版必究。【未经授权禁止转载】这些值，它们可以实现动画的持续性播放，本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。而不是像 transition 一样，只著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net有一个过程。

【作者：唐霜】本文作者：唐霜，转载请注明出处。【转载请注明来源】

animation 弥补了 transi原创内容，盗版必究。未经授权，禁止复制转载。tion 的不足：1. 可对多个属性同时转载请注明出处：www.tangshuang.net【未经授权禁止转载】应用过渡效果，2. 可将整个 durat【版权所有，侵权必究】未经授权，禁止复制转载。ion 拆分为多段，3. 可设置重复动画转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】，以及动画的过渡方式（方向）。所以，动画【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】的本质就是一堆 transition 的本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net组合。transition 其实也可以做未经授权，禁止复制转载。【作者：唐霜】到多个属性同时设置，只要用逗号连接多个设【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。置即可，但是相对而言，它仍然只是过渡，而著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net非可以持续触发的动画。

现在让我们回到 Animation 这个本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。组件。

【转载请注明来源】【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】

在 Nautil 的设计中，一个动画被设【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。计为一个组件的隐现方式。组件如何出现在用【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。户的视野里，如何从界面上消失。这两个过程转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】的动画效果是我所关注的和实现的。当然，动【本文首发于唐霜的博客】【原创不易，请尊重版权】画还有很多场景，例如 loading 效著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】果，但这些暂时不在本文的实现范围中，以后本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】有机会会和你分享。它提供了 Animat【转载请注明来源】未经授权，禁止复制转载。ion 组件，用以解决这个问题。通过和前【原创内容，转载请注明出处】【原创内容，转载请注明出处】面的描述对比，你会发现实际上，Nauti本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】l 提供的 Animation 组件并没【原创内容，转载请注明出处】未经授权，禁止复制转载。有实现真正的 animation，而是只转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。实现了一个可多次触发的 transiti未经授权，禁止复制转载。原创内容，盗版必究。on 的效果。这是由我们开发场景中的实际著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。需求决定的，在 Animation 这个本文作者：唐霜，转载请注明出处。【未经授权禁止转载】组件的思路上，你可以扩展出更多的动画组件【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】出来，而且它们都是纯 JS 实现的。

【作者：唐霜】转载请注明出处：www.tangshuang.net

在设计 Animation 组件时，我把【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】它设计的极其简单，你不需要开发 css 未经授权，禁止复制转载。未经授权，禁止复制转载。样式。在下文我会详细讲解该组件。

著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。

跨平台

同一个组件，在不同的平台上如何工作呢？在【版权所有】唐霜 www.tangshuang.net【转载请注明来源】 web 中，我们通过修改 css 属性著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。值来触发动画，在 react-nativ转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】e 中，我们通过其内置的样式规则来触发。【未经授权禁止转载】原创内容，盗版必究。虽然它们大部分都兼容，但是唯独在 tra著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】nsform 属性上兼容的不是很好。因此【作者：唐霜】【未经授权禁止转载】，我将这部分提炼出来，从而可以实现跨平台著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】。

【本文受版权保护】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。

实际上，transform 在 web 【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。平台中和 react-native 平台【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。中的主要区别是输出不同，web 中输出的【转载请注明来源】【关注微信公众号：wwwtangshuangnet】是字符串，而 react-native 【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。中输出的是数组。因此，我写了一个类来控制输入，然后通过原型链覆盖的方式，在 web 平台下输出字符串，在 react-native 平台下输出数组。

通过这种方式，我就可以保证，一套代码，同【本文受版权保护】【未经授权禁止转载】一个组件，在不同平台下都可以按照相同的方【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】式运行。

具体实现

上述的技术理论给我们做好了铺垫。接下来，本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。我们来看下 Animation 这个组件本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】的实现过程。它是一个 React 组件，【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】而且它是一个纯 UI 组件。对于使用者而【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net言，它足够简单，只接收 props，通过转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】外部修改 props 的值来触发内部的动转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。画效果。

【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【原创不易，请尊重版权】

原创内容，盗版必究。原创内容，盗版必究。原创内容，盗版必究。

你可以通过这里阅读视频 demo 的源码。

使用方法

我一直认为，任何开发出来的东西的一个重要【未经授权禁止转载】未经授权，禁止复制转载。原则，就是简单。什么是简单，简单就是“少【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net”，理解起来容易。我在写 Animati未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.neton 组件的时候就是这个想法。那么怎么少【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】才算少呢？我们来看下示例代码：

<Animation 
  enter="easeInElastic 500 fade:in move:right,top scale:1.5/1" 
  leave="easeInQuad 500 fade:out move:0/-300,-100 scale:1/1.5" 
  show={this.state.show}
>
  <Text>这是要动画隐现的部分</Text>
</Animation>

上面这段代码，它会创建一个动画区域，作用【原创不易，请尊重版权】【原创不易，请尊重版权】是通过 show 来控制这个区域的显示和【转载请注明来源】著作权归作者所有，禁止商业用途转载。隐藏。显示的时候，使用 enter 属性【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net内配置的动画效果，隐藏的时候使用 lea【版权所有】唐霜 www.tangshuang.net【本文受版权保护】ve 属性内配置的动画效果。就是这么简单未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net。

语法解释

上面 enter 和 leave 两个属原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】性是对各自动画效果的配置。我们来解释一下【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】这两个属性的语法是怎么样的。

著作权归作者所有，禁止商业用途转载。【转载请注明来源】

ease duration effect:from/to effect2:from/to ...

ease 缓动函数名，查看

duration 持续时间，数字

【本文受版权保护】

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

【未经授权禁止转载】

【转载请注明来源】

effect:from/to 动画效果
- effect 动画效果名，仅支持 fad【原创不易，请尊重版权】【原创内容，转载请注明出处】e, move, rotate, sca原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】le
  - fade 渐隐渐显，通过 opacity原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。实现
  - move 位置移动，通过 transfo著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】rm 的 translate 实现
  - rotate 旋转，通过 transfo原创内容，盗版必究。【未经授权禁止转载】rm 的 rotate 实现
  - scale 缩放，通过 transfor【未经授权禁止转载】【本文首发于唐霜的博客】m 的 scale 实现
- from 起始值
- to 结束值

原创内容，盗版必究。

【原创不易，请尊重版权】

【作者：唐霜】

起始值和结束值需要根据 effect 名未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】字来决定：

本文作者：唐霜，转载请注明出处。原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。

fade 时，必须传入用以表示透明度的值
- in 或者 out，例如 fade:in【版权所有，侵权必究】转载请注明出处：www.tangshuang.net, fade:out
- 0-1 之间的数字，例如 fade:0/【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net1, fade:1/0.5

【本文首发于唐霜的博客】

原创内容，盗版必究。

【本文受版权保护】

move 时，必须传入一个坐标
- left, right 和 top, b【作者：唐霜】本文作者：唐霜，转载请注明出处。ottom 的组合，会使用内置值，例如【转载请注明来源】著作权归作者所有，禁止商业用途转载。move:left,top/right,本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。bottom
- 数字，例如 move:-300,12/0【本文首发于唐霜的博客】【未经授权禁止转载】,0

【访问 www.tangshuang.net 获取更多精彩内容】

【未经授权禁止转载】

rotate 时，必须传入角度，且 fr【转载请注明来源】【关注微信公众号：wwwtangshuangnet】om 和 end 的单位相同，例如 ro未经授权，禁止复制转载。【原创不易，请尊重版权】tate:60deg/0deg rota【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.nette:0.5turn/0turn

原创内容，盗版必究。

【作者：唐霜】

scale 时，必须传入数字，例如 sc【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netale:1.2/1 scale:1/0.转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。5

【访问 www.tangshuang.net 获取更多精彩内容】

【作者：唐霜】

转载请注明出处：www.tangshuang.net

【原创不易，请尊重版权】

另外，from 不可以省略，to 可以省未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】略，缺省值为：

转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】

fade: 1

本文版权归作者所有，未经授权不得转载。

【原创不易，请尊重版权】

【本文首发于唐霜的博客】

move: 0,0

本文版权归作者所有，未经授权不得转载。

【转载请注明来源】

rotate: 0deg

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

本文版权归作者所有，未经授权不得转载。

本文作者：唐霜，转载请注明出处。

【访问 www.tangshuang.net 获取更多精彩内容】

scale: 1

本文版权归作者所有，未经授权不得转载。

本文作者：唐霜，转载请注明出处。

对于坐标而言，x 不可以省，y 可省，缺本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。省值为 0. 例如：move:left 未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。表示从左边 -100px,0 位置向右位本文版权归作者所有，未经授权不得转载。【作者：唐霜】移至 0,0 位置。

left: -100

【访问 www.tangshuang.net 获取更多精彩内容】

【原创内容，转载请注明出处】

right: 100

本文版权归作者所有，未经授权不得转载。

转载请注明出处：www.tangshuang.net

top: -50

未经授权，禁止复制转载。

【本文受版权保护】

【本文首发于唐霜的博客】

【关注微信公众号：wwwtangshuangnet】

bottom: 50

本文作者：唐霜，转载请注明出处。

【访问 www.tangshuang.net 获取更多精彩内容】

【原创不易，请尊重版权】

事件回调

【作者：唐霜】【作者：唐霜】【原创不易，请尊重版权】

onEnterStart

本文版权归作者所有，未经授权不得转载。

未经授权，禁止复制转载。

转载请注明出处：www.tangshuang.net

onEnterUpdate

【转载请注明来源】

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

转载请注明出处：www.tangshuang.net

onEnterStop

本文作者：唐霜，转载请注明出处。

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

onLeaveStart

本文版权归作者所有，未经授权不得转载。

onLeaveUpdate

本文版权归作者所有，未经授权不得转载。

【访问 www.tangshuang.net 获取更多精彩内容】

未经授权，禁止复制转载。

onLeaveStop

未经授权，禁止复制转载。

本文作者：唐霜，转载请注明出处。

【访问 www.tangshuang.net 获取更多精彩内容】

自定义容器

默认情况下，Animation 依赖 S原创内容，盗版必究。【本文受版权保护】ection 作为容器来实现隐现效果。有【本文首发于唐霜的博客】【原创不易，请尊重版权】的时候，你希望使用类似 Button 甚本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。至 Text 作为容器，可以传入 com【本文受版权保护】本文版权归作者所有，未经授权不得转载。ponent 来使用对应的组件。

【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。

<Animation component={Text}>

小结

本文虽然是介绍 Nautil 中 Ani【版权所有，侵权必究】未经授权，禁止复制转载。mation 组件的实现，但是通过一层层【原创内容，转载请注明出处】【本文首发于唐霜的博客】概念解释，实际上把 JS 编程中动画编程【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。的原理都捋了一遍，对于想要实现一些动画效未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net果的同学，这篇文章其实也是一个比较好的借【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。鉴。当然，文章还有一些不足之处，希望你在本文作者：唐霜，转载请注明出处。【作者：唐霜】下方留言和我讨论。

【原创不易，请尊重版权】原创内容，盗版必究。【作者：唐霜】

【本文首发于唐霜的博客】【作者：唐霜】著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】【本文受版权保护】本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【作者：唐霜】本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。

2019-07-19 6388 动效, 缓动

唐霜

动画实现剖析：基于纯 JS 的 React Animation 组件

问题背景

架构设计

补间

缓动

过渡

动画

跨平台

具体实现

使用方法

语法解释

事件回调

自定义容器

小结

为价值买单，打赏一杯咖啡

声明

关于

生态