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

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

问题背景

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

在写 Nautil 的时候，又产生了另外著作权归作者所有，禁止商业用途转载。【作者：唐霜】一个问题，即跨端开发。css 在 web原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】上是没有问题的，但是到 react-n【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。ative 中呢？或者再移植到其他平台中著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。呢？

著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】

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

本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net【转载请注明来源】【原创内容，转载请注明出处】

架构设计

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

转载请注明出处：www.tangshuang.net【转载请注明来源】【本文受版权保护】

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

补间

动画补间，简单的说，就是在未给出所有值的【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net情况下，通过计算，算出特定位置的特定值。【转载请注明来源】本文版权归作者所有，未经授权不得转载。一般而言，你需要得到一个动画的开始状态和未经授权，禁止复制转载。【版权所有，侵权必究】结束状态，然后，通过这两个状态去算出两点【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。之间某个位置的值。

【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】

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

100*0.5=50
【作者：唐霜】【转载请注明来源】【作者：唐霜】未经授权，禁止复制转载。

【关注微信公众号：wwwtangshuangnet】【作者：唐霜】本文作者：唐霜，转载请注明出处。【本文受版权保护】

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

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

value = start + (end【关注微信公众号：wwwtangshuangnet】【作者：唐霜】-start) * factor
【作者：唐霜】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net

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

结束值减去起始值就是变化的值域，值域乘以原创内容，盗版必究。【本文受版权保护】变化因子就是已经变化了的值，在起始值的基本文版权归作者所有，未经授权不得转载。【转载请注明来源】础上加上该值，就是当前的补间值。

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

其中，factor（补间因子）是一个 [【未经授权禁止转载】未经授权，禁止复制转载。0, 1] 的值。该值在动画中，是一个时【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】间点和整个持续时间（duration）的【作者：唐霜】【关注微信公众号：wwwtangshuangnet】比值。而在数学中，它可以是任何值域在 [【版权所有，侵权必究】未经授权，禁止复制转载。0, 1] 的函数上的任意一个 y 值，原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】例如 sin 这样的三角函数。

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

色值补间。

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

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

【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。

缓动

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

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

本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】

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

转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】

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

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

现在，我们来想象有一个弹珠，从天上掉下来著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】，掉到地上之后，它会有一个回弹的过程，弹【未经授权禁止转载】本文作者：唐霜，转载请注明出处。几次之后，才最终静止在地面上。

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

本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。

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

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

factor = ease(t/dura【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。tion)
【本文受版权保护】著作权归作者所有，禁止商业用途转载。

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

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

value = start + (end【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】-start) * ease(t/dur著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netation)
【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。

在这个公式中，start, end, e本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】ase, duration 一旦在一开始著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】定下来之后，就不会变，所以，这是一个 v【转载请注明来源】【原创内容，转载请注明出处】alue 关于 t 的一个公式。

value = fn(t)
本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【作者：唐霜】

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

转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】

过渡

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

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

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

著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。

一个过渡，是从时间的这头演进到那头。但是本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】，怎么表达呢？这就是代码层面的设计问题了【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】。我最终设计为，把它设计为一个 Tran【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netsition 类，实例化的时候，传入 d原创内容，盗版必究。【本文受版权保护】uration，通过 start 方法开本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】始时间推进。另外，我还设计了 pause【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】方法用来暂停时间推荐，设计了 stop本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】方法来结束时间推进。

同时，需要传入 ease，通过上面的公式 factor = ease(t/duration) Transition 可以给出在时间推原创内容，盗版必究。【原创不易，请尊重版权】进中，每一个 requestAnimat【版权所有，侵权必究】【作者：唐霜】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本文版权归作者所有，未经授权不得转载。

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

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

动画

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

【转载请注明来源】【本文受版权保护】未经授权，禁止复制转载。【作者：唐霜】

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

transition: name duration ease delay;

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

【转载请注明来源】【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】

再来看看 css animation 属未经授权，禁止复制转载。【作者：唐霜】性：

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

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

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

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

现在让我们回到 Animation 这个未经授权，禁止复制转载。原创内容，盗版必究。组件。

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

在设计 Animation 组件时，我把转载请注明出处：www.tangshuang.net【本文受版权保护】它设计的极其简单，你不需要开发 css 【关注微信公众号：wwwtangshuangnet】【作者：唐霜】样式。在下文我会详细讲解该组件。

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

跨平台

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

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

实际上，transform 在 web 【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】平台中和 react-native 平台原创内容，盗版必究。原创内容，盗版必究。中的主要区别是输出不同，web 中输出的【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】是字符串，而 react-native 【本文首发于唐霜的博客】【原创内容，转载请注明出处】中输出的是数组。因此，我写了一个类来控制输入，然后通过原型链覆盖的方式，在 web 平台下输出字符串，在 react-native 平台下输出数组。

【未经授权禁止转载】【作者：唐霜】【转载请注明来源】

具体实现

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

【作者：唐霜】【本文受版权保护】

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

使用方法

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

【原创不易，请尊重版权】未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】

<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 属性【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。内配置的动画效果，隐藏的时候使用 lea【转载请注明来源】【原创内容，转载请注明出处】ve 属性内配置的动画效果。就是这么简单【原创不易，请尊重版权】【作者：唐霜】。

本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】【本文首发于唐霜的博客】

语法解释

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

ease 缓动函数名，查看

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

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

原创内容，盗版必究。

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

duration 持续时间，数字

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

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

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

effect:from/to 动画效果
- effect 动画效果名，仅支持 fad转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】e, move, rotate, sca本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netle
  - fade 渐隐渐显，通过 opacity【本文首发于唐霜的博客】【未经授权禁止转载】实现
  - move 位置移动，通过 transfo未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netrm 的 translate 实现
  - rotate 旋转，通过 transfo未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netrm 的 rotate 实现
  - scale 缩放，通过 transfor【关注微信公众号：wwwtangshuangnet】【作者：唐霜】m 的 scale 实现
- from 起始值
- to 结束值

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

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

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

起始值和结束值需要根据 effect 名本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。字来决定：

fade 时，必须传入用以表示透明度的值
- in 或者 out，例如 fade:in【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。, fade:out
- 0-1 之间的数字，例如 fade:0/著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】1, fade:1/0.5

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

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

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

move 时，必须传入一个坐标
- left, right 和 top, b原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netottom 的组合，会使用内置值，例如【本文首发于唐霜的博客】【版权所有，侵权必究】move:left,top/right,【本文受版权保护】转载请注明出处：www.tangshuang.netbottom
- 数字，例如 move:-300,12/0【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。,0

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

【转载请注明来源】

原创内容，盗版必究。

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

rotate 时，必须传入角度，且 fr【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netom 和 end 的单位相同，例如 ro【版权所有，侵权必究】【原创不易，请尊重版权】tate:60deg/0deg rota著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。te:0.5turn/0turn

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

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

scale 时，必须传入数字，例如 sc本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】ale:1.2/1 scale:1/0.【版权所有，侵权必究】【转载请注明来源】5

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

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

另外，from 不可以省略，to 可以省【本文首发于唐霜的博客】未经授权，禁止复制转载。略，缺省值为：

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

fade: 1

原创内容，盗版必究。

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

move: 0,0

【未经授权禁止转载】

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

rotate: 0deg

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

【本文受版权保护】

scale: 1

【未经授权禁止转载】

原创内容，盗版必究。

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

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

left: -100

【作者：唐霜】

right: 100

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

top: -50

【本文受版权保护】

【未经授权禁止转载】

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

bottom: 50

原创内容，盗版必究。

【未经授权禁止转载】

事件回调

Animation 组件隐现过程中，你可未经授权，禁止复制转载。【本文首发于唐霜的博客】以通过如下属性进行监听：

onEnterStart

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

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

【关注微信公众号：wwwtangshuangnet】

onEnterUpdate

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

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

onEnterStop

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

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

onLeaveStart

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

原创内容，盗版必究。

【关注微信公众号：wwwtangshuangnet】

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

onLeaveUpdate

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

【转载请注明来源】

onLeaveStop

原创内容，盗版必究。

【关注微信公众号：wwwtangshuangnet】

【未经授权禁止转载】

自定义容器

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

<Animation component={Text}>

小结

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

【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。【转载请注明来源】

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

2019-07-19 6471 动效, 缓动

唐霜

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

问题背景

架构设计

补间

缓动

过渡

动画

跨平台

具体实现

使用方法

语法解释

事件回调

自定义容器

小结

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

声明

关于

生态