简介

每天我们都要花很多的时间在考虑，根据用户的操作来设计“怎么样”让屏幕上的元素出现和消失。我们经常遇到的情况是需要设计多个过渡动画以让这些转场动效符合用户在现实生活中的直觉。利用好序列动画肯定能够提升我们的设计水平，也会让你的作品更加有吸引力，体验更加友好。

 引子

如果一次只是触发一个动效非常的简单，使用“ Switch”和“Condition”即可。但是当我们需要在一个用户操作，处理两个或者以上的动效的时候就会变的麻烦。如果需要按照一定的顺序来执行，就会更加的麻烦。

 上面这个例子： 用户在按下“Go”的时候，两个cell需要按照一定的顺序进入屏幕，当用户再次按下“Go”的时候，需要按照一定的顺序再次出去。

 用上面这个Pach组合可以满足上面的例子。

 问题：

如果我们在进入的时候，让cell1 先进入，cell2 后进入。但是出去的时候，让cell2 先出去，cell1 后出去。上面的path就无法满足了。那么该怎么办？

 传统解决方案：

这是我们平时解决这个问题的方案，动效1做完了，动效1告诉动效2“该你了”。这种方式麻烦在于，当有很多动效需要处理的时候，就会变的很复杂，而且可维护性也变的复杂了。

 创新解决方案：

有一个处理中心，跟交通指挥中心一样。每一个动效完事之后，就告诉指挥中心“我完事了，该下一个了”。然后指挥中心告诉下一个该执行的动效“该你执行了，快去执行吧”

"Animation Dispacher" ： 指挥中心。

"Chained Animation": 你要开始的动画

应用案例：

上面的案例中有6个连续的动效需要完成，大家可以看一下Pach连接方式

逻辑很清晰，而且可维护性高了很多。

使用陷阱：

1: 一定要保证 Chain Length 与实际的动画数量一致

2: Trigger 连接的一定是Interration

3: Index: 一定要从1开始，不能出现两个index相同

原文地址：

http://macoscope.com/blog/chaining-animations-is-easy/#main

文中使用到的Pach下载地址：Github