经过一段时间的修修补补，著作权归作者所有，禁止商业用途转载。Nautil本文版权归作者所有，未经授权不得转载。 终于算是完工了。在 Nautil 中，原创内容，盗版必究。【原创内容，转载请注明出处】内置了一个用纯 JS 写的 Animat【作者：唐霜】【转载请注明来源】ion 组件，你可以在这里未经授权，禁止复制转载。阅读它的源码。这篇文章，就来聊一聊该组件原创内容，盗版必究。【未经授权禁止转载】的实现。
【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。【转载请注明来源】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。问题背景【作者：唐霜】
【作者：唐霜】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。未经授权，禁止复制转载。首先，在读者你心里可能会有个疑问：为什么【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】要用纯 JS 去写一个动画组件呢？直接用【关注微信公众号：wwwtangshuangnet】【本文受版权保护】市面上已经有的 react 动画组件，或本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】者自己写一个配合 css 的动画组件不就【转载请注明来源】【版权所有】唐霜 www.tangshuang.net可以了吗。我在正在做的另外一个项目中偶尔转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】遇到一个问题，我利用 css 的 tra【本文首发于唐霜的博客】【版权所有，侵权必究】nsition 去处理一个动画，但是由于著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】时间戳问题，发现画面会有跳动，究其原因，【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】是因为 transition 一旦被打断转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】，剩余动画就不会被执行了，会跳到下一个 【作者：唐霜】本文版权归作者所有，未经授权不得转载。transition 直接执行新的动作，【作者：唐霜】【原创不易，请尊重版权】所以画面会有跳动。
未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】在写 Nautil 的时候，又产生了另外著作权归作者所有，禁止商业用途转载。【本文受版权保护】一个问题，即跨端开发。css 在 web未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。 上是没有问题的，但是到 react-n【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】ative 中呢？或者再移植到其他平台中【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net呢？
转载请注明出处：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本文作者：唐霜，转载请注明出处。的好方法。如果你读过我之前写的《动效：补间值缓动计算类转载请注明出处：www.tangshuang.net》这篇文章，但这篇文章讲的不系统，借鉴意【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】义不大，因此，本文会详细去解剖编程中的动转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】画开发知识结构。
未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【版权所有，侵权必究】【本文首发于唐霜的博客】
以上是该组件实现的所有部分，你可以通过本文版权归作者所有，未经授权不得转载。这里【本文受版权保护】获得源码。你可以看到，它其实分了 5 个【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。部分，接下来，我会对每一个部分做详细的讲【本文受版权保护】【关注微信公众号：wwwtangshuangnet】解。
【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】补间【原创不易，请尊重版权】
【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】未经授权，禁止复制转载。动画补间，简单的说，就是在未给出所有值的【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】情况下，通过计算，算出特定位置的特定值。【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】一般而言，你需要得到一个动画的开始状态和【转载请注明来源】【原创不易，请尊重版权】结束状态，然后，通过这两个状态去算出两点【版权所有，侵权必究】【本文受版权保护】之间某个位置的值。
转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】【转载请注明来源】【本文受版权保护】例如，你的动画开始时，值为 0，结束时，本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net值为 100，在 1min 内完成。请算本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。出当时间进行到 30s 时的状态值。这样著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。一道简单的题目很容易被算出来，我们知道当未经授权，禁止复制转载。【版权所有，侵权必究】时间为 30s 时，值应该为 50. 但【未经授权禁止转载】【未经授权禁止转载】是，我们是怎么算出来的呢？实际上，我们的【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】公式如下：
原创内容，盗版必究。【本文受版权保护】转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】【本文首发于唐霜的博客】【版权所有，侵权必究】未经授权，禁止复制转载。未经授权，禁止复制转载。100*0.5=50【转载请注明来源】
【原创内容，转载请注明出处】【转载请注明来源】本文版权归作者所有，未经授权不得转载。【转载请注明来源】【本文受版权保护】
现在题目变了，起始和和结束值变为 20 【作者：唐霜】著作权归作者所有，禁止商业用途转载。和 80，那么 30s 时的补间值该是多原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。少呢？40. 如果整体时间延长至 2mi转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netn 呢？
【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net实际上，计算补间值有一个规律性的公式：本文作者：唐霜，转载请注明出处。
原创内容，盗版必究。原创内容，盗版必究。【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netvalue = start + (end【原创不易，请尊重版权】未经授权，禁止复制转载。-start) * factor
本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。
结束值减去起始值就是变化的值域，值域乘以著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net变化因子就是已经变化了的值，在起始值的基【未经授权禁止转载】【原创不易，请尊重版权】础上加上该值，就是当前的补间值。
【原创不易，请尊重版权】【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。【作者：唐霜】其中，factor（补间因子）是一个 [著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。0, 1] 的值。该值在动画中，是一个时【本文首发于唐霜的博客】【版权所有，侵权必究】间点和整个持续时间（duration）的【未经授权禁止转载】【未经授权禁止转载】比值。而在数学中，它可以是任何值域在 [著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。0, 1] 的函数上的任意一个 y 值，【转载请注明来源】【版权所有】唐霜 www.tangshuang.net例如 sin 这样的三角函数。
【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】色值补间。【原创不易，请尊重版权】
【原创不易，请尊重版权】【本文首发于唐霜的博客】【本文受版权保护】颜色本质上也是由值组成，无论是 rgb 【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】还是 hex 的色值，甚至加入了透明度的原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】 rgba，都可以利用上述补间理论计算补本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】间结果。在一些应用中，它会提供一个色盘，本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】用于让你拾取颜色。难道它需要把所有的颜色转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。都铺满在色盘上吗？当然不是，它只需要提供【本文首发于唐霜的博客】未经授权，禁止复制转载。纵横值域，并通过你拾取位置在整个色盘位置本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】中的比例，再按照上述公式，就可以算出你当转载请注明出处：www.tangshuang.net【作者：唐霜】前取得的是什么颜色。而色盘上的颜色本身，本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net可以通过 css 的渐变函数来实现。
本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】总之，上面讲到的补间值计算函数，你可以在这里【本文首发于唐霜的博客】得到源码进行阅读。【版权所有，侵权必究】
未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】缓动本文作者：唐霜，转载请注明出处。
【本文受版权保护】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net【作者：唐霜】我们取得一个补间值，它本身是静态的，除非【本文受版权保护】本文版权归作者所有，未经授权不得转载。像上面那种取色器应用才有意义，对于我们要本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】进行动画制作时，单纯一个补间值完全没有意【本文受版权保护】著作权归作者所有，禁止商业用途转载。义。我们必须取得连续的补间值，如何取得连【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net续的补间值呢？
本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】【作者：唐霜】动画的重要元素就是时间。转载请注明出处：www.tangshuang.net
本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】【原创内容，转载请注明出处】通过时间的推进，来取得连续的补间动画，这原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。样的过程被称为“缓动”。缓动的本质，就是【本文首发于唐霜的博客】原创内容，盗版必究。获取上述公式中的 factor。但是，缓著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。动的方式有很多种，不同的方式，我们用一种【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】叫“缓动函数”的东西来表达。
【转载请注明来源】【原创不易，请尊重版权】【转载请注明来源】【未经授权禁止转载】缓动函数让 factor 在时间轴上的变【转载请注明来源】本文版权归作者所有，未经授权不得转载。化规律不尽相同。我们可以用 factor原创内容，盗版必究。【本文首发于唐霜的博客】 的增长加速度不同来表达这个“不同”之处【作者：唐霜】转载请注明出处：www.tangshuang.net。你可以在这个网站【访问 www.tangshuang.net 获取更多精彩内容】体验到不同缓动函数的加速度（它用视觉的效【本文受版权保护】【转载请注明来源】果让你看到 factor 增长的速度变化【未经授权禁止转载】【转载请注明来源】）。当你了解 ease 函数之后，你会发著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。现，我们前文指出 factor 是一个 转载请注明出处：www.tangshuang.net【未经授权禁止转载】[0, 1] 的值，其实不完全正确，因为本文作者：唐霜，转载请注明出处。原创内容，盗版必究。在某些情况下，factor 会超出这个值【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】域，但是总体而言，factor 是从 0本文版权归作者所有，未经授权不得转载。【作者：唐霜】 开始增长，最终结束时达到 1. 这就是【版权所有，侵权必究】【本文受版权保护】缓动函数的效果，让 factor 的变化【关注微信公众号：wwwtangshuangnet】【作者：唐霜】具备多种多样性。
本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【作者：唐霜】现在，我们来想象有一个弹珠，从天上掉下来【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】，掉到地上之后，它会有一个回弹的过程，弹转载请注明出处：www.tangshuang.net原创内容，盗版必究。几次之后，才最终静止在地面上。
【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】上面这个视频演示了一个 easeOutB转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。ounce 的效果，你再看的时候，应该去【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。看右边的那个游标的效果。将它反过来，就是本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】我们上面描述的弹珠坠地的效果了。ease未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】OutBounce 是一个缓动函数，它根未经授权，禁止复制转载。未经授权，禁止复制转载。据当前的时间游标计算出 factor。最著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】终，我们可以得到一个公式：
著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net【转载请注明来源】转载请注明出处：www.tangshuang.netfactor = ease(t/dura著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。tion)
著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】【未经授权禁止转载】
其中，duration 一旦确定之后，基本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】本上是不会变的，可以认为是一个常量。t 【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】则是不断持续增长的值，而且这个增长是匀速【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】的等差数列增长。
【作者：唐霜】【版权所有，侵权必究】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。再结合前面的一个公式，我们就可以得到：转载请注明出处：www.tangshuang.net
【作者：唐霜】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。原创内容，盗版必究。【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】value = start + (end【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。-start) * ease(t/dur本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。ation)
本文作者：唐霜，转载请注明出处。【未经授权禁止转载】转载请注明出处：www.tangshuang.net
在这个公式中，start, end, e【版权所有】唐霜 www.tangshuang.net【本文受版权保护】ase, duration 一旦在一开始【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】定下来之后，就不会变，所以，这是一个 v本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。alue 关于 t 的一个公式。
【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netvalue = fn(t)著作权归作者所有，禁止商业用途转载。
【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。
所有 Nautil 支持的缓动函数，你可【作者：唐霜】【原创内容，转载请注明出处】以在这里【本文首发于唐霜的博客】看源码。css 中的缓动函数，你可以看【访问 www.tangshuang.net 获取更多精彩内容】这里【访问 www.tangshuang.net 获取更多精彩内容】。【原创不易，请尊重版权】
【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。过渡【本文首发于唐霜的博客】
【版权所有】唐霜 www.tangshuang.net【转载请注明来源】本文作者：唐霜，转载请注明出处。到目前为止，我们知道利用缓动函数，可以获转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】得非线性增长的补间值。但是，到目前为止，【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。我们还没有动起来，我们得到的仍然是静态值【未经授权禁止转载】未经授权，禁止复制转载。，我们只能算出某一个值。接下来，我们通过本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。“过渡”来认识动起来的补间效果。
【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。我们虽然更感知时间在流逝，但是我们无法直【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。接表达这种流逝。为了简介表达时间流逝，人本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】类发明了“时钟”。通过钟表的运动，指示时【版权所有】唐霜 www.tangshuang.net【作者：唐霜】间的流逝。而在计算机中，也提供了原子钟给【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。程序使用。但是在 JS 中，我们仍然无法【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。按照准确的时间刻度推进时间。最终，我选择【本文受版权保护】【未经授权禁止转载】了使用 requestAnimation【作者：唐霜】【版权所有】唐霜 www.tangshuang.netFrame 作为时间演进的工具。
【转载请注明来源】原创内容，盗版必究。【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net一个过渡，是从时间的这头演进到那头。但是【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net，怎么表达呢？这就是代码层面的设计问题了本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。。我最终设计为，把它设计为一个 Tran原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。sition 类，实例化的时候，传入 d【本文受版权保护】著作权归作者所有，禁止商业用途转载。uration，通过 start 方法开未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。始时间推进。另外，我还设计了 pause【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。 方法用来暂停时间推荐，设计了 stop未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net 方法来结束时间推进。
【原创内容，转载请注明出处】【本文受版权保护】本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】同时，需要传入 ease，通过上面的公式【本文首发于唐霜的博客】【版权所有，侵权必究】 factor = ease(t/duration) Transition 可以给出在时间推【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。进中，每一个 requestAnimat本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】ionFrame 的 factor，这需【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。要通过提前在 onUpdate 方法中注【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】册接收函数。
const tr = new Transition({ duration, ease })
tr.on('update', (e, factor) => {
// 再使用补间函数，获得补间值
const value = tween(start, end, factor)
// ...
})
tr.start() // 开始推进时间
Transition 只是在时间流逝过程【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】中，获得 factor，但要得到具体补间【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】值，还需要使用补间函数获取。这样使得整体转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net的可复用可扩展性极强。
转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。【作者：唐霜】具体的代码，你可以通过【本文首发于唐霜的博客】这里【本文首发于唐霜的博客】阅读源码。转载请注明出处：www.tangshuang.net
著作权归作者所有，禁止商业用途转载。【本文受版权保护】【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】动画【本文受版权保护】
本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】原创内容，盗版必究。【原创不易，请尊重版权】【未经授权禁止转载】所有以上的内容，目的都是为了实现一个动画本文版权归作者所有，未经授权不得转载。【本文受版权保护】。动画实质上，是将一个或多个过渡应用到物【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。体身上。动画意味着用户可以看到的界面效果原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。在变化，因此，它是一个涉及到界面操作的过转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net程。
原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net让我们再回头看 css transiti【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。on 属性：
未经授权，禁止复制转载。未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【作者：唐霜】【原创内容，转载请注明出处】transition: name duration ease delay;
一个 transition 属性，实际上【原创不易，请尊重版权】【未经授权禁止转载】是确定了 ease, duration，【版权所有】唐霜 www.tangshuang.net【本文受版权保护】通过 name 样式的值变化来决定 st原创内容，盗版必究。【版权所有，侵权必究】art 和 end。每一次一个样式的值发【未经授权禁止转载】转载请注明出处：www.tangshuang.net生变化时，transition 被触发，原创内容，盗版必究。原创内容，盗版必究。此时，原来的老样式值被作为 start，原创内容，盗版必究。【转载请注明来源】新的样式被作为 end。一旦 trans本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netition 被触发之后，浏览器引擎就会按【本文受版权保护】【原创内容，转载请注明出处】照 transition 的这些参数进行【本文首发于唐霜的博客】【版权所有，侵权必究】运算，并将补间值赋值给样式，直到结束。其本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。中 delay 本文未涉及。css 的 未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。transition 不仅解决了补间、缓未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net动、过渡，而且直接将过渡效果运用到属性所【未经授权禁止转载】【原创不易，请尊重版权】在的样式上去，所以，它本身是一个动画效果转载请注明出处：www.tangshuang.net【未经授权禁止转载】。
【访问 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 需要先定义一本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】个 keyframes，这个 keyfr【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。ames 定义了多个属性的多段 star本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。t 和 end。这里有两个点：“多个属性【本文受版权保护】【关注微信公众号：wwwtangshuangnet】”“多段”，这两个特点使得 animat【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。ion 和 transition 属性区【本文受版权保护】未经授权，禁止复制转载。别巨大。同时，animation 还比 【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.nettransition 多了 iterat转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】ion-count, direction【作者：唐霜】转载请注明出处：www.tangshuang.net 这些值，它们可以实现动画的持续性播放，著作权归作者所有，禁止商业用途转载。【本文受版权保护】而不是像 transition 一样，只未经授权，禁止复制转载。【本文受版权保护】有一个过程。
【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】animation 弥补了 transi【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。tion 的不足：1. 可对多个属性同时【原创不易，请尊重版权】未经授权，禁止复制转载。应用过渡效果，2. 可将整个 durat【关注微信公众号：wwwtangshuangnet】【本文受版权保护】ion 拆分为多段，3. 可设置重复动画未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。，以及动画的过渡方式（方向）。所以，动画原创内容，盗版必究。原创内容，盗版必究。的本质就是一堆 transition 的本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net组合。transition 其实也可以做【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。到多个属性同时设置，只要用逗号连接多个设原创内容，盗版必究。原创内容，盗版必究。置即可，但是相对而言，它仍然只是过渡，而【原创不易，请尊重版权】未经授权，禁止复制转载。非可以持续触发的动画。
【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net现在让我们回到 Animation 这个【版权所有，侵权必究】【本文首发于唐霜的博客】组件。
【原创不易，请尊重版权】【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】【未经授权禁止转载】在 Nautil 的设计中，一个动画被设【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net计为一个组件的隐现方式。组件如何出现在用【作者：唐霜】【作者：唐霜】户的视野里，如何从界面上消失。这两个过程本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net的动画效果是我所关注的和实现的。当然，动【本文首发于唐霜的博客】【未经授权禁止转载】画还有很多场景，例如 loading 效【未经授权禁止转载】【转载请注明来源】果，但这些暂时不在本文的实现范围中，以后【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net有机会会和你分享。它提供了 Animat【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】ion 组件，用以解决这个问题。通过和前【版权所有，侵权必究】【作者：唐霜】面的描述对比，你会发现实际上，Nauti未经授权，禁止复制转载。【原创不易，请尊重版权】l 提供的 Animation 组件并没未经授权，禁止复制转载。【原创不易，请尊重版权】有实现真正的 animation，而是只原创内容，盗版必究。【原创内容，转载请注明出处】实现了一个可多次触发的 transiti本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】on 的效果。这是由我们开发场景中的实际【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】需求决定的，在 Animation 这个本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】组件的思路上，你可以扩展出更多的动画组件转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】出来，而且它们都是纯 JS 实现的。
著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】在设计 Animation 组件时，我把本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】它设计的极其简单，你不需要开发 css 【本文受版权保护】本文版权归作者所有，未经授权不得转载。样式。在下文我会详细讲解该组件。
本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】跨平台转载请注明出处：www.tangshuang.net
本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。同一个组件，在不同的平台上如何工作呢？在【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】 web 中，我们通过修改 css 属性原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。值来触发动画，在 react-nativ【未经授权禁止转载】【本文首发于唐霜的博客】e 中，我们通过其内置的样式规则来触发。著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】虽然它们大部分都兼容，但是唯独在 tra未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】nsform 属性上兼容的不是很好。因此【未经授权禁止转载】本文作者：唐霜，转载请注明出处。，我将这部分提炼出来，从而可以实现跨平台【作者：唐霜】【原创内容，转载请注明出处】。
转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。原创内容，盗版必究。【原创内容，转载请注明出处】【转载请注明来源】实际上，transform 在 web 未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】平台中和 react-native 平台未经授权，禁止复制转载。原创内容，盗版必究。中的主要区别是输出不同，web 中输出的【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】是字符串，而 react-native 未经授权，禁止复制转载。原创内容，盗版必究。中输出的是数组。因此，我写了一个类本文作者：唐霜，转载请注明出处。来控制输入，然后通过原型链覆盖的方式，【版权所有】唐霜 www.tangshuang.net在 web 平台下本文版权归作者所有，未经授权不得转载。输出字符串，【转载请注明来源】在 react-native 平台【本文首发于唐霜的博客】下输出数组。【转载请注明来源】
未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net通过这种方式，我就可以保证，一套代码，同转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。一个组件，在不同平台下都可以按照相同的方【原创不易，请尊重版权】未经授权，禁止复制转载。式运行。
未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。具体实现【未经授权禁止转载】
转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【转载请注明来源】上述的技术理论给我们做好了铺垫。接下来，【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。我们来看下 Animation 这个组件转载请注明出处：www.tangshuang.net原创内容，盗版必究。的实现过程。它是一个 React 组件，未经授权，禁止复制转载。【原创内容，转载请注明出处】而且它是一个纯 UI 组件。对于使用者而【未经授权禁止转载】未经授权，禁止复制转载。言，它足够简单，只接收 props，通过【版权所有，侵权必究】【原创内容，转载请注明出处】外部修改 props 的值来触发内部的动本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net画效果。
著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】【本文受版权保护】【作者：唐霜】你可以通过著作权归作者所有，禁止商业用途转载。这里本文作者：唐霜，转载请注明出处。阅读视频 demo 的源码。【本文首发于唐霜的博客】
【本文首发于唐霜的博客】未经授权，禁止复制转载。【原创不易，请尊重版权】使用方法【原创内容，转载请注明出处】
【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】我一直认为，任何开发出来的东西的一个重要【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。原则，就是简单。什么是简单，简单就是“少【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net”，理解起来容易。我在写 Animati【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。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 属性【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】内配置的动画效果，隐藏的时候使用 lea本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。ve 属性内配置的动画效果。就是这么简单【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】。
转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】语法解释【原创不易，请尊重版权】
本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。上面 enter 和 leave 两个属【原创不易，请尊重版权】【本文首发于唐霜的博客】性是对各自动画效果的配置。我们来解释一下【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net这两个属性的语法是怎么样的。
【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netease duration effect:from/to effect2:from/to ...
- ease 缓动函数名，【版权所有】唐霜 www.tangshuang.net查看【访问 www.tangshuang.net 获取更多精彩内容】 【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net
- duration 持续时间，数字原创内容，盗版必究。 【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】原创内容，盗版必究。
- effect:from/to 动画效果
- effect 动画效果名，仅支持 fad本文版权归作者所有，未经授权不得转载。【本文受版权保护】e, move, rotate, sca本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】le
- fade 渐隐渐显，通过 opacity本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】 实现 本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net
- move 位置移动，通过 transfo【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。rm 的 translate 实现 未经授权，禁止复制转载。【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net
- rotate 旋转，通过 transfo【原创不易，请尊重版权】【本文首发于唐霜的博客】rm 的 rotate 实现 未经授权，禁止复制转载。【本文受版权保护】【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。
- scale 缩放，通过 transfor本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】m 的 scale 实现 著作权归作者所有，禁止商业用途转载。【转载请注明来源】本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net
【关注微信公众号：wwwtangshuangnet】【作者：唐霜】【转载请注明来源】
- from 起始值【转载请注明来源】 【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【本文受版权保护】
- to 结束值【版权所有】唐霜 www.tangshuang.net 原创内容，盗版必究。【原创不易，请尊重版权】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】
【转载请注明来源】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net
- effect 动画效果名，仅支持 fad本文版权归作者所有，未经授权不得转载。【本文受版权保护】e, move, rotate, sca本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】le
起始值和结束值需要根据 effect 名【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。字来决定：
著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net【转载请注明来源】- fade 时，必须传入用以表示透明度的值【本文首发于唐霜的博客】【转载请注明来源】
- in 或者 out，例如 fade:in本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】, fade:out 【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。未经授权，禁止复制转载。【作者：唐霜】
- 0-1 之间的数字，例如 fade:0/【原创不易，请尊重版权】【原创不易，请尊重版权】1, fade:1/0.5 【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】
【作者：唐霜】【转载请注明来源】【转载请注明来源】
- move 时，必须传入一个坐标
转载请注明出处：www.tangshuang.net
- left, right 和 top, b本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netottom 的组合，会使用内置值，例如 【原创内容，转载请注明出处】【版权所有，侵权必究】move:left,top/right,【本文受版权保护】著作权归作者所有，禁止商业用途转载。bottom 著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net
- 数字，例如 move:-300,12/0本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net,0 【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】
著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【转载请注明来源】
- rotate 时，必须传入角度，且 fr【原创不易，请尊重版权】未经授权，禁止复制转载。om 和 end 的单位相同，例如 ro转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。tate:60deg/0deg rota【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】te:0.5turn/0turn 著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net
- scale 时，必须传入数字，例如 sc【版权所有，侵权必究】【未经授权禁止转载】ale:1.2/1 scale:1/0.【本文首发于唐霜的博客】【未经授权禁止转载】5 【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net
另外，from 不可以省略，to 可以省【本文首发于唐霜的博客】【原创不易，请尊重版权】略，缺省值为：
【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】- fade: 1原创内容，盗版必究。 【版权所有，侵权必究】【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。
- move: 0,0转载请注明出处：www.tangshuang.net 【作者：唐霜】【转载请注明来源】原创内容，盗版必究。
- rotate: 0deg著作权归作者所有，禁止商业用途转载。 【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】
- scale: 1【未经授权禁止转载】 【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】【本文受版权保护】未经授权，禁止复制转载。
对于坐标而言，x 不可以省，y 可省，缺【原创不易，请尊重版权】【原创不易，请尊重版权】省值为 0. 例如：move:left 【原创内容，转载请注明出处】【作者：唐霜】表示从左边 -100px,0 位置向右位本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。移至 0,0 位置。
【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【未经授权禁止转载】- left: -100转载请注明出处：www.tangshuang.net 转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。
- right: 100本文版权归作者所有，未经授权不得转载。 未经授权，禁止复制转载。【作者：唐霜】【版权所有，侵权必究】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net
- top: -50转载请注明出处：www.tangshuang.net 未经授权，禁止复制转载。【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net
- bottom: 50本文作者：唐霜，转载请注明出处。 未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】
事件回调转载请注明出处：www.tangshuang.net
【本文受版权保护】转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】Animation 组件隐现过程中，你可【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】以通过如下属性进行监听：
【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】- onEnterStart【转载请注明来源】 转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】
- onEnterUpdate【原创内容，转载请注明出处】 原创内容，盗版必究。【原创内容，转载请注明出处】【未经授权禁止转载】【作者：唐霜】
- onEnterStop【版权所有，侵权必究】 【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【作者：唐霜】
- onLeaveStart【版权所有，侵权必究】 【本文受版权保护】【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。
- onLeaveUpdate【版权所有】唐霜 www.tangshuang.net 【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net【本文受版权保护】原创内容，盗版必究。【版权所有，侵权必究】
- onLeaveStop【转载请注明来源】 转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。【版权所有，侵权必究】原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net
自定义容器【原创不易，请尊重版权】
【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【作者：唐霜】默认情况下，Animation 依赖 S【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】ection 作为容器来实现隐现效果。有【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net的时候，你希望使用类似 Button 甚著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。至 Text 作为容器，可以传入 com【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netponent 来使用对应的组件。
转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】<Animation component={Text}>
小结著作权归作者所有，禁止商业用途转载。
转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。本文虽然是介绍 Nautil 中 Ani【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】mation 组件的实现，但是通过一层层本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。概念解释，实际上把 JS 编程中动画编程著作权归作者所有，禁止商业用途转载。【作者：唐霜】的原理都捋了一遍，对于想要实现一些动画效转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。果的同学，这篇文章其实也是一个比较好的借【转载请注明来源】【版权所有】唐霜 www.tangshuang.net鉴。当然，文章还有一些不足之处，希望你在【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。下方留言和我讨论。
【原创内容，转载请注明出处】【本文受版权保护】原创内容，盗版必究。未经授权，禁止复制转载。【本文首发于唐霜的博客】
