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

著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。

问题背景

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

在写 Nautil 的时候，又产生了另外本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。一个问题，即跨端开发。css 在 web【本文受版权保护】【原创不易，请尊重版权】上是没有问题的，但是到 react-n【作者：唐霜】【未经授权禁止转载】ative 中呢？或者再移植到其他平台中原创内容，盗版必究。【原创不易，请尊重版权】呢？

【本文受版权保护】【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】

总之，使用纯 JS 去实现动画可以有效解【转载请注明来源】【版权所有】唐霜 www.tangshuang.net决上述两个问题。当然，也会面临性能问题，未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。这需要开发者自己去把握好。本文接下来的未经授权，禁止复制转载。【未经授权禁止转载】Animation 组件在讲解过程中，就【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】不再去考虑性能问题，对于使用者而言，也不未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】需要在任何时候去用这个组件，而是在其他动【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】画组件无法实现某些效果的时候，才考虑本组转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】件。

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

架构设计

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

【原创内容，转载请注明出处】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。

以上是该组件实现的所有部分，你可以通过这里获得源码。你可以看到，它其实分了 5 个【未经授权禁止转载】转载请注明出处：www.tangshuang.net部分，接下来，我会对每一个部分做详细的讲著作权归作者所有，禁止商业用途转载。【作者：唐霜】解。

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

补间

动画补间，简单的说，就是在未给出所有值的【作者：唐霜】【版权所有，侵权必究】情况下，通过计算，算出特定位置的特定值。【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。一般而言，你需要得到一个动画的开始状态和【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】结束状态，然后，通过这两个状态去算出两点本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】之间某个位置的值。

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

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

100*0.5=50
【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】

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

现在题目变了，起始和和结束值变为 20 本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。和 80，那么 30s 时的补间值该是多转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】少呢？40. 如果整体时间延长至 2mi【原创内容，转载请注明出处】未经授权，禁止复制转载。n 呢？

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

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

【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。

value = start + (end【转载请注明来源】【原创内容，转载请注明出处】-start) * factor
本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】

【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。【本文受版权保护】

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

【原创内容，转载请注明出处】【转载请注明来源】原创内容，盗版必究。【转载请注明来源】

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

本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【未经授权禁止转载】【转载请注明来源】

色值补间。

著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net

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

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

【本文首发于唐霜的博客】【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。

缓动

我们取得一个补间值，它本身是静态的，除非本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】像上面那种取色器应用才有意义，对于我们要【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。进行动画制作时，单纯一个补间值完全没有意转载请注明出处：www.tangshuang.net【作者：唐霜】义。我们必须取得连续的补间值，如何取得连【未经授权禁止转载】转载请注明出处：www.tangshuang.net续的补间值呢？

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

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

【未经授权禁止转载】原创内容，盗版必究。【本文首发于唐霜的博客】【作者：唐霜】

通过时间的推进，来取得连续的补间动画，这原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】样的过程被称为“缓动”。缓动的本质，就是【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】获取上述公式中的 factor。但是，缓【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。动的方式有很多种，不同的方式，我们用一种【未经授权禁止转载】未经授权，禁止复制转载。叫“缓动函数”的东西来表达。

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

转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。

现在，我们来想象有一个弹珠，从天上掉下来【本文受版权保护】本文作者：唐霜，转载请注明出处。，掉到地上之后，它会有一个回弹的过程，弹【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net几次之后，才最终静止在地面上。

【转载请注明来源】本文版权归作者所有，未经授权不得转载。

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

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

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

factor = ease(t/dura本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.nettion)
本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。

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

其中，duration 一旦确定之后，基【作者：唐霜】本文版权归作者所有，未经授权不得转载。本上是不会变的，可以认为是一个常量。t 【未经授权禁止转载】【本文受版权保护】则是不断持续增长的值，而且这个增长是匀速本文版权归作者所有，未经授权不得转载。【本文受版权保护】的等差数列增长。

【原创内容，转载请注明出处】【原创不易，请尊重版权】【原创内容，转载请注明出处】【未经授权禁止转载】

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

value = start + (end【原创内容，转载请注明出处】【作者：唐霜】-start) * ease(t/dur本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】ation)
未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】

【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】转载请注明出处：www.tangshuang.net

在这个公式中，start, end, e【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。ase, duration 一旦在一开始【原创不易，请尊重版权】【原创内容，转载请注明出处】定下来之后，就不会变，所以，这是一个 v著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。alue 关于 t 的一个公式。

未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】【本文首发于唐霜的博客】

value = fn(t)
本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】

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

【作者：唐霜】转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。

过渡

到目前为止，我们知道利用缓动函数，可以获【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。得非线性增长的补间值。但是，到目前为止，本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。我们还没有动起来，我们得到的仍然是静态值【未经授权禁止转载】未经授权，禁止复制转载。，我们只能算出某一个值。接下来，我们通过原创内容，盗版必究。【本文首发于唐霜的博客】“过渡”来认识动起来的补间效果。

我们虽然更感知时间在流逝，但是我们无法直本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。接表达这种流逝。为了简介表达时间流逝，人著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net类发明了“时钟”。通过钟表的运动，指示时【未经授权禁止转载】原创内容，盗版必究。间的流逝。而在计算机中，也提供了原子钟给本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。程序使用。但是在 JS 中，我们仍然无法转载请注明出处：www.tangshuang.net【未经授权禁止转载】按照准确的时间刻度推进时间。最终，我选择【版权所有】唐霜 www.tangshuang.net【作者：唐霜】了使用 requestAnimation原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。Frame 作为时间演进的工具。

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

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

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

同时，需要传入 ease，通过上面的公式 factor = ease(t/duration) Transition 可以给出在时间推【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。进中，每一个 requestAnimat【作者：唐霜】【关注微信公众号：wwwtangshuangnet】ionFrame 的 factor，这需【版权所有，侵权必究】原创内容，盗版必究。要通过提前在 onUpdate 方法中注【作者：唐霜】【转载请注明来源】册接收函数。

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

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

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

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

【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net

动画

所有以上的内容，目的都是为了实现一个动画【转载请注明来源】【关注微信公众号：wwwtangshuangnet】。动画实质上，是将一个或多个过渡应用到物【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。体身上。动画意味着用户可以看到的界面效果本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。在变化，因此，它是一个涉及到界面操作的过【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】程。

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

让我们再回头看 css transiti【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.neton 属性：

本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】【作者：唐霜】

transition: name duration ease delay;

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

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

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

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

现在让我们回到 Animation 这个本文作者：唐霜，转载请注明出处。【本文受版权保护】组件。

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

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

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

跨平台

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

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

未经授权，禁止复制转载。【本文首发于唐霜的博客】

具体实现

上述的技术理论给我们做好了铺垫。接下来，【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】我们来看下 Animation 这个组件原创内容，盗版必究。【原创不易，请尊重版权】的实现过程。它是一个 React 组件，著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。而且它是一个纯 UI 组件。对于使用者而【未经授权禁止转载】【作者：唐霜】言，它足够简单，只接收 props，通过【原创内容，转载请注明出处】【未经授权禁止转载】外部修改 props 的值来触发内部的动【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net画效果。

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

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

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

【原创内容，转载请注明出处】【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。

使用方法

我一直认为，任何开发出来的东西的一个重要【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。原则，就是简单。什么是简单，简单就是“少本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。”，理解起来容易。我在写 Animati著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。on 组件的时候就是这个想法。那么怎么少【版权所有，侵权必究】【版权所有，侵权必究】才算少呢？我们来看下示例代码：

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

<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>

上面这段代码，它会创建一个动画区域，作用转载请注明出处：www.tangshuang.net【本文受版权保护】是通过 show 来控制这个区域的显示和【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】隐藏。显示的时候，使用 enter 属性【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。内配置的动画效果，隐藏的时候使用 lea【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。ve 属性内配置的动画效果。就是这么简单【未经授权禁止转载】【本文首发于唐霜的博客】。

本文版权归作者所有，未经授权不得转载。【本文受版权保护】【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net

语法解释

上面 enter 和 leave 两个属【本文受版权保护】【本文受版权保护】性是对各自动画效果的配置。我们来解释一下【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。这两个属性的语法是怎么样的。

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

ease 缓动函数名，查看

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

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

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

duration 持续时间，数字

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

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

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

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

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

起始值和结束值需要根据 effect 名【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】字来决定：

【原创内容，转载请注明出处】【未经授权禁止转载】

fade 时，必须传入用以表示透明度的值
- in 或者 out，例如 fade:in【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。, fade:out
- 0-1 之间的数字，例如 fade:0/未经授权，禁止复制转载。【版权所有，侵权必究】1, fade:1/0.5

原创内容，盗版必究。

【作者：唐霜】

move 时，必须传入一个坐标
- left, right 和 top, b转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】ottom 的组合，会使用内置值，例如【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。move:left,top/right,本文版权归作者所有，未经授权不得转载。【转载请注明来源】bottom
- 数字，例如 move:-300,12/0【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】,0

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

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

rotate 时，必须传入角度，且 fr【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netom 和 end 的单位相同，例如 ro本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】tate:60deg/0deg rota【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】te:0.5turn/0turn

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

【关注微信公众号：wwwtangshuangnet】

scale 时，必须传入数字，例如 sc【未经授权禁止转载】转载请注明出处：www.tangshuang.netale:1.2/1 scale:1/0.未经授权，禁止复制转载。【本文首发于唐霜的博客】5

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

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

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

原创内容，盗版必究。【作者：唐霜】

fade: 1

【本文受版权保护】

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

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

【关注微信公众号：wwwtangshuangnet】

move: 0,0

【本文受版权保护】

【作者：唐霜】

rotate: 0deg

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

原创内容，盗版必究。

scale: 1

【作者：唐霜】

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

left: -100

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

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

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

right: 100

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

【本文受版权保护】

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

top: -50

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

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

bottom: 50

【转载请注明来源】

【作者：唐霜】

事件回调

Animation 组件隐现过程中，你可转载请注明出处：www.tangshuang.net【转载请注明来源】以通过如下属性进行监听：

onEnterStart

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

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

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

onEnterUpdate

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

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

【关注微信公众号：wwwtangshuangnet】

onEnterStop

【关注微信公众号：wwwtangshuangnet】

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

onLeaveStart

【作者：唐霜】

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

onLeaveUpdate

【本文受版权保护】

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

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

onLeaveStop

【本文受版权保护】

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

自定义容器

默认情况下，Animation 依赖 S【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netection 作为容器来实现隐现效果。有【本文受版权保护】【本文受版权保护】的时候，你希望使用类似 Button 甚转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。至 Text 作为容器，可以传入 com【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。ponent 来使用对应的组件。

著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。

<Animation component={Text}>

小结

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

原创内容，盗版必究。【作者：唐霜】

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

2019-07-19 6616 动效, 缓动

唐霜

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

问题背景

架构设计

补间

缓动

过渡

动画

跨平台

具体实现

使用方法

语法解释

事件回调

自定义容器

小结

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

声明

关于

生态