第31页
第三步，加入足球的飞行轨迹，对于1号球我们设置了简单的位移。
而对于后续足球，我们采用了沿轨迹飞行的设定。
在这些设定中，begin和end的数值至关重要，通过采用click和click +时间的方式，才最终实现了踢足球的效果。
群组动画与连续触发
在足球的案例中，我们提到了“群组”的概念。假设我们要让众多元素同时发生一个相同的动画，或者让一个复杂多路径的图像整体产生动效，这时候我们可以将其合并为群组，直接对该群组添加需要的动画。
群组通过的方式形成，在之前的案例中，你已经看到这种方式。可以通过手动在需要的若干路径前后分别加上和形成群组，其实对于大型项目而言，在*Adobe *Illustrator直接使用群组功能更方便。
在软件中，我们可以对群组路径设置名称。当SVG代码展示时它将对应id，方便你在调试时快速查找并定位关键群组和路径。
通过群组可以实现连续触发的效果，比如“点击A，使B运动，再使C运动……”。只要设置好适当的动画顺序并充分利用人的视觉错觉，这样的案例往往会呈现精彩的效果。
以《新媒体科技树》的交互图文为例，请在JZCreative公众号中回复“svg0108”观察连续触发的效应。
所谓连续，并非实际映射关系，而是通过群组的特殊排序，使一次点击后触发多个元件各不相同的排序动画。虽然SVG完整手册支持用id进行指向触发，但由于微信图文中的CSS整体取消了id的识别，所以接下来介绍的方法是实现连续触发的唯一方式。
群组关系
群组动画的视觉设计并不复杂，尽管在*Adobe *Illustrator中的视觉效果可能一样，但是群组方式的差异将直接决定连续触发是否可行。
对于需要群组触发的内容来说，其群组有如下标准。
主触发器位于群组最内部，图层排序一般在最下方。我们以作品第一列“文案”为例，触发器是一个覆盖在“文案”上方的透明不可见矩形（如图3-22所示）。
图3-22 主触发器
在软件中制作这一列时，我们可以把所有路径都平行排列，确保需要完成动画的内容自下而上排列。
接下来开始编组，在相同时间的相同动效路径可以被放在一个平行组内。虽然同一平行组内的路径上下顺序不会影响连续触发，但是建议都向上分配编组，以便于查看。
现在，你已经观察到群组的基本特性。下一步是加入动画代码，我们先介绍一个简单的例子。请在JZCreative公众号中回复“svg0109”，查看一篇通过stroke-dashoffset动画实现的一次连续。
在这个案例中，近似饼图的动画实际上是描边动画：一个圆形居于时钟中央，当描边宽度接近于直径时它将形成饼分效果（如图3-23所示）。
图3-23 饼分效果的描边动画
由于在没有点击前描边无法被触发，所以我们选择在画面上再覆盖一个透明矩形来触发下方的描边动画。路径效果如下。
确保矩形触发器位于最内部群组，再在circle平行的标签中加动画，得到如下代码。
这样，即便circle在初始状态无法被点击到，但是rect可以被触发，因此这个触发传递给了circle。基于这样的连续传递逻辑，我们实现了科技树的排版。在群组完成后，我们将动画加载平行于动画元件的位置，而非放在元件的代码内部，依然可以保证这个元件的动效播放。这是和普通SVG动画书写时的最大差异。
防误触
防误触是交互设计的七大基本原则之一，所谓“防误触”指防止用户的错误触发，包括触发到其他位置引发其他页面交互、触发到空白区域而未执行我们期待的交互和触发到原始区域导致交互重复甚至叠加发生。
在交互图文设计中，防误触需要的场景非常多，解决办法各不相同，不过总体上可以分为两种类型：
· 扩大隐形触发区（热区式）；
· 通过隐形路径遮挡原触发区。
因而，新媒体运营者设计的交互区其实比用户看到的更大。它往往是覆盖在可见按钮上的另一个透明矩形或其他形状，面积超过了按钮，以确保用户的点击生效；或者当用户完成点击后，一个透明矩形移动到按钮处，使用户无法再点击该按钮；也可能当点击并发生动效后，动态内容全部进入一个透明矩形区下方，使用户无法再复现（Playback）整个动效……
对于具体的防误触思路，我们将在后面的商业案例中提及。
在图文中载入数学公式
什么是La Te X
LaTeX（/'lɑtεx/，常被读作/'lɑItεk/或/'le Itεk/），是一种基于TEX的排版系统，由美国计算机科学家莱斯利·兰伯特在20世纪80年代初期开发。通过这种格式系统的处理，即使用户没有排版和程序设计的知识也可以充分发挥由它提供的强大功能，不必一一亲自去设计或校对，能在几天甚至几小时内生成很多具有书籍品质的印刷品。对于生成复杂表格和数学公式，这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技、数学和化学文档。这个系统同样适用于生成从简单的信件到完整书籍的所有种类的文档。