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

经过一段时间的修修补补，本文作者：唐霜，转载请注明出处。Nautil【未经授权禁止转载】终于算是完工了。在 Nautil 中，转载请注明出处：www.tangshuang.net【作者：唐霜】内置了一个用纯 JS 写的 Animat【本文受版权保护】【本文首发于唐霜的博客】ion 组件，你可以在这里转载请注明出处：www.tangshuang.net阅读它的源码。这篇文章，就来聊一聊该组件本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】的实现。

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

问题背景转载请注明出处：www.tangshuang.net

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

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

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

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

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

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

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

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

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

动画补间，简单的说，就是在未给出所有值的【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】情况下，通过计算，算出特定位置的特定值。【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net一般而言，你需要得到一个动画的开始状态和【关注微信公众号：wwwtangshuangnet】【本文受版权保护】结束状态，然后，通过这两个状态去算出两点转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。之间某个位置的值。

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

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

100*0.5=50【作者：唐霜】
【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【本文受版权保护】本文版权归作者所有，未经授权不得转载。

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

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

实际上，计算补间值有一个规律性的公式：【关注微信公众号：wwwtangshuangnet】

value = start + (end【本文首发于唐霜的博客】【作者：唐霜】-start) * factor
【原创内容，转载请注明出处】【原创内容，转载请注明出处】【转载请注明来源】本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net

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

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

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

【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】原创内容，盗版必究。

色值补间。转载请注明出处：www.tangshuang.net

未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】

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

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

总之，上面讲到的补间值计算函数，你可以在这里本文版权归作者所有，未经授权不得转载。得到源码进行阅读。原创内容，盗版必究。

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

缓动【作者：唐霜】

【作者：唐霜】【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net

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

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

动画的重要元素就是时间。【转载请注明来源】

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

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

【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net【本文受版权保护】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。

现在，我们来想象有一个弹珠，从天上掉下来著作权归作者所有，禁止商业用途转载。【转载请注明来源】，掉到地上之后，它会有一个回弹的过程，弹【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。几次之后，才最终静止在地面上。

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

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

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

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

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

再结合前面的一个公式，我们就可以得到：【原创内容，转载请注明出处】

value = start + (end【作者：唐霜】【本文受版权保护】-start) * ease(t/dur本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。ation)
未经授权，禁止复制转载。【转载请注明来源】著作权归作者所有，禁止商业用途转载。

value = fn(t)【原创内容，转载请注明出处】
【未经授权禁止转载】原创内容，盗版必究。【版权所有，侵权必究】【转载请注明来源】【作者：唐霜】

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

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

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

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

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

同时，需要传入 ease，通过上面的公式转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】 factor = ease(t/duration) Transition 可以给出在时间推【本文受版权保护】未经授权，禁止复制转载。进中，每一个 requestAnimat【版权所有】唐霜 www.tangshuang.net【作者：唐霜】ionFrame 的 factor，这需未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net要通过提前在 onUpdate 方法中注【本文首发于唐霜的博客】未经授权，禁止复制转载。册接收函数。

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

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转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】

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

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

【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。

transition: name duration ease delay;

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

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

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

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

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

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

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

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

在设计 Animation 组件时，我把原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。它设计的极其简单，你不需要开发 css 【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。样式。在下文我会详细讲解该组件。

【本文受版权保护】【原创内容，转载请注明出处】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】

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

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

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

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

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

通过这种方式，我就可以保证，一套代码，同【本文受版权保护】【原创内容，转载请注明出处】一个组件，在不同平台下都可以按照相同的方【本文首发于唐霜的博客】【本文受版权保护】式运行。

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

具体实现【未经授权禁止转载】

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

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

你可以通过【未经授权禁止转载】这里【原创内容，转载请注明出处】阅读视频 demo 的源码。未经授权，禁止复制转载。

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

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

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

我一直认为，任何开发出来的东西的一个重要【访问 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未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】ve 属性内配置的动画效果。就是这么简单【本文首发于唐霜的博客】【原创内容，转载请注明出处】。

语法解释【版权所有】唐霜 www.tangshuang.net

上面 enter 和 leave 两个属【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】性是对各自动画效果的配置。我们来解释一下【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net这两个属性的语法是怎么样的。

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

ease 缓动函数名，转载请注明出处：www.tangshuang.net查看【本文受版权保护】

原创内容，盗版必究。

【关注微信公众号：wwwtangshuangnet】

【未经授权禁止转载】

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

【关注微信公众号：wwwtangshuangnet】

duration 持续时间，数字【转载请注明来源】

【作者：唐霜】

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

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

effect:from/to 动画效果
- effect 动画效果名，仅支持 fad【原创内容，转载请注明出处】未经授权，禁止复制转载。e, move, rotate, sca转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】le
  - fade 渐隐渐显，通过 opacity【原创内容，转载请注明出处】【本文首发于唐霜的博客】实现
  - move 位置移动，通过 transfo著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。rm 的 translate 实现
  - rotate 旋转，通过 transfo【作者：唐霜】【作者：唐霜】rm 的 rotate 实现
  - scale 缩放，通过 transfor【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。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

【转载请注明来源】

【未经授权禁止转载】

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

move 时，必须传入一个坐标【关注微信公众号：wwwtangshuangnet】
- left, right 和 top, b【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。ottom 的组合，会使用内置值，例如【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。move:left,top/right,著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】bottom
- 数字，例如 move:-300,12/0【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。,0

【转载请注明来源】

【作者：唐霜】

【转载请注明来源】

rotate 时，必须传入角度，且 fr【未经授权禁止转载】【原创不易，请尊重版权】om 和 end 的单位相同，例如 ro原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】tate:60deg/0deg rota【转载请注明来源】【版权所有，侵权必究】te:0.5turn/0turn

【转载请注明来源】

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

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

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

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

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

【转载请注明来源】

【本文受版权保护】

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

另外，from 不可以省略，to 可以省本文版权归作者所有，未经授权不得转载。【作者：唐霜】略，缺省值为：

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

fade: 1【关注微信公众号：wwwtangshuangnet】

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

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

【关注微信公众号：wwwtangshuangnet】

move: 0,0【本文首发于唐霜的博客】

【未经授权禁止转载】

原创内容，盗版必究。

rotate: 0deg【原创不易，请尊重版权】

【本文受版权保护】

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

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

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

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

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

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

left: -100原创内容，盗版必究。

【未经授权禁止转载】

【本文受版权保护】

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

【关注微信公众号：wwwtangshuangnet】

【转载请注明来源】

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

top: -50原创内容，盗版必究。

原创内容，盗版必究。

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

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

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

原创内容，盗版必究。

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

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

事件回调【作者：唐霜】

Animation 组件隐现过程中，你可【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】以通过如下属性进行监听：

【本文受版权保护】【原创不易，请尊重版权】【本文受版权保护】

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

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

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

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

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

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

原创内容，盗版必究。

【作者：唐霜】

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

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

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

【关注微信公众号：wwwtangshuangnet】

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

【未经授权禁止转载】

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

【作者：唐霜】

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

【转载请注明来源】

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

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

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

【转载请注明来源】

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

【转载请注明来源】

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

【未经授权禁止转载】

原创内容，盗版必究。

自定义容器【原创不易，请尊重版权】

【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】

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

著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】

<Animation component={Text}>

小结【作者：唐霜】

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

本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】【未经授权禁止转载】【未经授权禁止转载】转载请注明出处：www.tangshuang.net

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

2019-07-19 5929 动效, 缓动

唐霜

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

问题背景转载请注明出处：www.tangshuang.net

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

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

缓动【作者：唐霜】

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

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

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

具体实现【未经授权禁止转载】

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

语法解释【版权所有】唐霜 www.tangshuang.net

事件回调【作者：唐霜】

自定义容器【原创不易，请尊重版权】

小结【作者：唐霜】

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

声明

关于

生态