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

经过一段时间的修修补补，Nautil 终于算是完工了。在 Nautil 中，著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】内置了一个用纯 JS 写的 Animat未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netion 组件，你可以在这里阅读它的源码。这篇文章，就来聊一聊该组件未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】的实现。

本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】

问题背景

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

未经授权，禁止复制转载。【本文受版权保护】著作权归作者所有，禁止商业用途转载。

在写 Nautil 的时候，又产生了另外【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。一个问题，即跨端开发。css 在 web未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net 上是没有问题的，但是到 react-n著作权归作者所有，禁止商业用途转载。【本文受版权保护】ative 中呢？或者再移植到其他平台中转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。呢？

著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【本文受版权保护】

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

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

架构设计

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

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

以上是该组件实现的所有部分，你可以通过这里获得源码。你可以看到，它其实分了 5 个著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。部分，接下来，我会对每一个部分做详细的讲原创内容，盗版必究。未经授权，禁止复制转载。解。

【本文首发于唐霜的博客】【转载请注明来源】【未经授权禁止转载】

补间

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

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

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

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

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

【本文受版权保护】【本文受版权保护】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。

value = start + (end转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。-start) * factor
原创内容，盗版必究。原创内容，盗版必究。未经授权，禁止复制转载。

结束值减去起始值就是变化的值域，值域乘以著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】变化因子就是已经变化了的值，在起始值的基【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。础上加上该值，就是当前的补间值。

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

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

转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】

色值补间。

【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【转载请注明来源】

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

【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】

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

缓动

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

【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【原创不易，请尊重版权】

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

未经授权，禁止复制转载。【本文受版权保护】

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

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

现在，我们来想象有一个弹珠，从天上掉下来原创内容，盗版必究。转载请注明出处：www.tangshuang.net，掉到地上之后，它会有一个回弹的过程，弹【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】几次之后，才最终静止在地面上。

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

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

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

factor = ease(t/dura著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】tion)
转载请注明出处：www.tangshuang.net原创内容，盗版必究。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。

【转载请注明来源】【关注微信公众号：wwwtangshuangnet】

其中，duration 一旦确定之后，基未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】本上是不会变的，可以认为是一个常量。t 【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】则是不断持续增长的值，而且这个增长是匀速著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】的等差数列增长。

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

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

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

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

【未经授权禁止转载】【本文受版权保护】【未经授权禁止转载】未经授权，禁止复制转载。

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

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

value = fn(t)
本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】

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

所有 Nautil 支持的缓动函数，你可【未经授权禁止转载】【作者：唐霜】以在这里看源码。css 中的缓动函数，你可以看这里。

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

过渡

到目前为止，我们知道利用缓动函数，可以获【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】得非线性增长的补间值。但是，到目前为止，【未经授权禁止转载】【作者：唐霜】我们还没有动起来，我们得到的仍然是静态值【未经授权禁止转载】【未经授权禁止转载】，我们只能算出某一个值。接下来，我们通过转载请注明出处：www.tangshuang.net【版权所有，侵权必究】“过渡”来认识动起来的补间效果。

【转载请注明来源】【未经授权禁止转载】

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

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

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

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

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

【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】

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

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

Transition 只是在时间流逝过程未经授权，禁止复制转载。【转载请注明来源】中，获得 factor，但要得到具体补间著作权归作者所有，禁止商业用途转载。【本文受版权保护】值，还需要使用补间函数获取。这样使得整体著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。的可复用可扩展性极强。

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

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

动画

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

让我们再回头看 css transiti未经授权，禁止复制转载。【原创不易，请尊重版权】on 属性：

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

transition: name duration ease delay;

一个 transition 属性，实际上本文作者：唐霜，转载请注明出处。【转载请注明来源】是确定了 ease, duration，【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】通过 name 样式的值变化来决定 st【转载请注明来源】著作权归作者所有，禁止商业用途转载。art 和 end。每一次一个样式的值发未经授权，禁止复制转载。未经授权，禁止复制转载。生变化时，transition 被触发，著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】此时，原来的老样式值被作为 start，【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。新的样式被作为 end。一旦 trans【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。ition 被触发之后，浏览器引擎就会按【原创不易，请尊重版权】【转载请注明来源】照 transition 的这些参数进行【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】运算，并将补间值赋值给样式，直到结束。其【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net中 delay 本文未涉及。css 的著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.nettransition 不仅解决了补间、缓原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net动、过渡，而且直接将过渡效果运用到属性所【版权所有】唐霜 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转载请注明出处：www.tangshuang.net【作者：唐霜】t 和 end。这里有两个点：“多个属性本文作者：唐霜，转载请注明出处。【本文受版权保护】”“多段”，这两个特点使得 animat【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】ion 和 transition 属性区【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】别巨大。同时，animation 还比【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。transition 多了 iterat【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netion-count, direction【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net 这些值，它们可以实现动画的持续性播放，【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。而不是像 transition 一样，只【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。有一个过程。

【原创不易，请尊重版权】原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】

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

现在让我们回到 Animation 这个原创内容，盗版必究。转载请注明出处：www.tangshuang.net组件。

著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】

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

在设计 Animation 组件时，我把【转载请注明来源】【关注微信公众号：wwwtangshuangnet】它设计的极其简单，你不需要开发 css 著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。样式。在下文我会详细讲解该组件。

跨平台

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

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

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

【未经授权禁止转载】转载请注明出处：www.tangshuang.net

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

具体实现

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

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

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

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

使用方法

我一直认为，任何开发出来的东西的一个重要著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】原则，就是简单。什么是简单，简单就是“少【作者：唐霜】原创内容，盗版必究。”，理解起来容易。我在写 Animati【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。on 组件的时候就是这个想法。那么怎么少本文作者：唐霜，转载请注明出处。【访问 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 属性本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】内配置的动画效果，隐藏的时候使用 lea未经授权，禁止复制转载。原创内容，盗版必究。ve 属性内配置的动画效果。就是这么简单原创内容，盗版必究。原创内容，盗版必究。。

【关注微信公众号：wwwtangshuangnet】【本文受版权保护】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。

语法解释

著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。

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

ease 缓动函数名，查看

【关注微信公众号：wwwtangshuangnet】

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

duration 持续时间，数字

【本文受版权保护】

【转载请注明来源】

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

【关注微信公众号：wwwtangshuangnet】

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

原创内容，盗版必究。

起始值和结束值需要根据 effect 名【本文受版权保护】著作权归作者所有，禁止商业用途转载。字来决定：

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

fade 时，必须传入用以表示透明度的值
- in 或者 out，例如 fade:in【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】, fade:out
- 0-1 之间的数字，例如 fade:0/【本文受版权保护】【原创不易，请尊重版权】1, fade:1/0.5

【关注微信公众号：wwwtangshuangnet】

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

【转载请注明来源】

move 时，必须传入一个坐标
- left, right 和 top, b【转载请注明来源】本文作者：唐霜，转载请注明出处。ottom 的组合，会使用内置值，例如原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】move:left,top/right,原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netbottom
- 数字，例如 move:-300,12/0【版权所有，侵权必究】【原创内容，转载请注明出处】,0

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

【本文受版权保护】

【作者：唐霜】

rotate 时，必须传入角度，且 fr本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。om 和 end 的单位相同，例如 ro【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。tate:60deg/0deg rota著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。te:0.5turn/0turn

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

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

scale 时，必须传入数字，例如 sc转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。ale:1.2/1 scale:1/0.【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】5

【转载请注明来源】

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

【本文受版权保护】

另外，from 不可以省略，to 可以省【转载请注明来源】原创内容，盗版必究。略，缺省值为：

未经授权，禁止复制转载。【本文受版权保护】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。

fade: 1

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

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

move: 0,0

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

【关注微信公众号：wwwtangshuangnet】

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

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

rotate: 0deg

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

【未经授权禁止转载】

【作者：唐霜】

scale: 1

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

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

原创内容，盗版必究。

对于坐标而言，x 不可以省，y 可省，缺【转载请注明来源】转载请注明出处：www.tangshuang.net省值为 0. 例如：move:left 【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。表示从左边 -100px,0 位置向右位【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】移至 0,0 位置。

left: -100

【本文受版权保护】

【关注微信公众号：wwwtangshuangnet】

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

【本文受版权保护】

right: 100

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

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

top: -50

原创内容，盗版必究。

bottom: 50

【转载请注明来源】

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

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

事件回调

onEnterStart

【转载请注明来源】

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

【未经授权禁止转载】

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

onEnterUpdate

【本文受版权保护】

onEnterStop

原创内容，盗版必究。

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

【作者：唐霜】

原创内容，盗版必究。

onLeaveStart

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

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

【本文受版权保护】

【转载请注明来源】

onLeaveUpdate

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

【关注微信公众号：wwwtangshuangnet】

原创内容，盗版必究。

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

onLeaveStop

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

【作者：唐霜】

自定义容器

默认情况下，Animation 依赖 S【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。ection 作为容器来实现隐现效果。有【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】的时候，你希望使用类似 Button 甚原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。至 Text 作为容器，可以传入 com【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。ponent 来使用对应的组件。

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

<Animation component={Text}>

小结

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

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

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

2019-07-19 6497 动效, 缓动

唐霜

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

问题背景

架构设计

补间

缓动

过渡

动画

跨平台

具体实现

使用方法

语法解释

事件回调

自定义容器

小结

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

声明

关于

生态