开一个新系列，主要是使用GreenSock来编写和实现动画效果，熟悉GreenSock的各个方法和一些使用技巧。
这次要实现的效果如下图所示：
准备基本的结构和样式
图中的图形使用的是SVG格式，代码比较多，详细的代码可以去下面的地址查看：
添加CSS类
为了更方便的操作相关的元素来实现动画效果，从上面的图中可以看到有6个元素有动画效果，所以需要给对应的元素添加CSS类：
- bracketLeft
- bracketRight
- tomatoLeft
- tomatoRight
- tomatoLeaves
- letters
初始化设置
编写动画效果之前，先来进行一些初始化设置，主要相关元素变量的定义。
var tomato = $("#tomato"),
bracketRight = $(".bracketRight"),
bracketLeft = $(".bracketLeft"),
tomatoLeft = $(".tomatoLeft"),
tomatoRight = $(".tomatoRight"),
tomatoLeaves = $(".tomatoLeaves"),
tl;
定义好之后，然后创建TimelineMax的实例，以便后面来编写相关的动画效果。
tl = new TimelineMax();
这里还需要对图形中的整个西红柿进行一些设置：
主要是西红柿的左半部分和右半部分的位置，初始化的时候是粘在一起的。以及西红柿上面的叶子移动了西红柿的中间。
tl.set([tomatoLeft], {xPercent: 23.6});
tl.set([tomatoLeaves], {xPercent: 41});
tl.set([tomato], {left: 10, rotation: 13, transformOrigin:"center center"});
最后还设置了西红柿的transform-origin，因为在默认的情况下，SVG在不同的浏览器中的transform-origin表现不一致，所以需要设置一下。具体原因可以去这个地址看看。
清除画布
在动画开始前，各个元素是不可见的。所以需要把各个元素移出当前的可视范围。
使用GreenSock中的set方法就可以做到。
tl.set(tomato, {yPercent: -100});
tl.set(bracketRight, {xPercent: 100});
tl.set(bracketLeft, {xPercent: -100});
使用transform这个属性就可以把元素移出当前的可视范围。
让元素动起来
第一步的动画主要包含一下几个部分：
- brackets元素（两边的箭头）恢复到原始位置，对应方法是xPercent: 0
- tomato元素（西红柿）掉下来并且伴随着一个弹跳的效果，使用GreenSock中的运动曲线可以做到
- tomato元素（西红柿）旋转到初始位置
- tomato元素（西红柿）分成两半
对应到GreenSock中的代码也很简单：
tl.to([bracketRight,bracketLeft], 0.3, {xPercent: 0, ease:Power4.easeOut}, 2)
.to(tomato, 0.5, {yPercent: 0, ease:Bounce.easeOut})
.to(tomato, 0.2, {rotation: 0, xPercent: -4})
.to([tomatoLeft, tomatoLeaves], 0.2, {xPercent: 0}, "split")
.to(tomato, 0.2, {rotation: 0, xPercent: 0}, "split")
.to(tomatoRight, 0.2, {xPercent: 2}, "split");
仔细观察上面图中的动画效果，可以发现有几个效果是同时运动的。西红柿掉下来之后，左半部分和叶子、西红柿的旋转以及西红柿的右半部分这几个元素的效果是一起进行的。所以在这三个元素的动画效果的代码后面打了一个标记split，而在GreenSock中，如果在相关的元素的动画代码中，有同一个标记，那么它们会一起执行对应的代码。
文字动画效果
最后是文字的动画效果。
这里的文字也是使用SVG来绘制的，当然你也可以使用SVG中text元素来插入文字。
文字效果是用staggerFrom方法来实现的。
.staggerFrom(letters, 0.01, {autoAlpha: 0}, 0.03);
staggerFrom方法是针对多个元素实现相同的动画效果而设的，比如这里的文字的动画效果，通过改变文字的透明度来完成动画效果。并且针对每个元素还可以设置一定的延迟时间来执行动画效果。
一个动感的出场动画效果就这么简单的完成了。
总结
总结一下，这个动画效果中需要关注的重点方法和技巧：
- 标记，当需要同时一起运行多个动画效果的时候，可以给对应的动画效果代码打上一个标记
- staggerFrom方法，当需要多个元素实现同样的动画效果，可以使用staggerFrom方法
本文主要是从How To Animate SVG With GreenSock这篇文章截取了一部分，有疏漏或者理解不到位的地方，还请多多指教！
