SplitText使用方法

SplitText 插件是GreenSock 动画平台用于将文本打散成数组从而进行动画。

GreenSock 文件包中并没有包含SplitText 插件，因此需要另外下载。

载入SplitText文件

首先下载SplitText破解版。SplitText并非免费插件，商用时请注意版权
由于要用到stagger方法，因此还需要载入TweenMax.js等文件。

下载TweenMax和SplitText

在页面中载入TweenMax.min.js和SplitText.min.js文件

<script src="js/TweenMax.min.js"> </script>
<script src="js/SplitText.min.js"> </script>

准备需要进行TweenMax动画的文字

<div id="text">拟把疏狂图一醉。对酒当歌，强乐还无味。衣带渐宽终不悔。为伊消得人憔悴。</div>

使用SplitText把文字打散并获取打散后的数组

mySplitText = new SplitText("#text", {type:"chars"}); //{type:"chars,words,lines"}打散成字、词、行
chars = mySplitText.chars;//获取字 mySplitText.words获取词 mySplitText.lines获取行

chars是按照单个字打散，还可以设置按照词组words打散(通过空格区分)，按行lines打散（通过换行符区分）

将打散的文字进行TweenMax的stagger动画

TweenMax.staggerFrom(chars, 0.8, {opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50", ease:Back.easeOut}, 0.01);

运行结果：

拟把疏狂图一醉。对酒当歌，强乐还无味。衣带渐宽终不悔。为伊消得人憔悴。

mySplitText = new SplitText("#text", {type:"chars"}); 
chars = mySplitText.chars;
TweenMax.set("#text", {perspective:400});
TweenMax.staggerFrom(chars, 0.8, {opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50", ease:Back.easeOut}, 0.01);