<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
<channel>
<title><![CDATA[湖南长沙前端开发与培训－通途工作室 - greenSock]]></title>
<link>http://blog.258754.cn/</link>
<description><![CDATA[前端开发,技术培训,动效研究,求职信息]]></description>
<language>zh-cn</language>
<copyright><![CDATA[Copyright 2005 PBlog3 v2.8]]></copyright>
<webMaster><![CDATA[dudu@258754.cn(嘟嘟)]]></webMaster>
<generator>PBlog2 v2.4</generator> 
<image>
	<title>湖南长沙前端开发与培训－通途工作室</title>
	<url>http://blog.258754.cn/images/logos.gif</url>
	<link>http://blog.258754.cn/</link>
	<description>湖南长沙前端开发与培训－通途工作室</description>
</image>

			<item>
			<link>http://blog.258754.cn/article.asp?id=207</link>
			<title><![CDATA[ 我打算做一个GSAP动画库的技术培训（长沙/有偿）]]></title>
			<author>dudu@258754.cn(admin)</author>
			<category><![CDATA[greenSock]]></category>
			<pubDate>Thu,23 Jun 2016 14:17:47 +0800</pubDate>
			<guid>http://blog.258754.cn/default.asp?id=207</guid>
		<description><![CDATA[<p><img src="http://blog.258754.cn/download.asp?id=114" alt="" /></p>
<p>&nbsp;</p>
<p>我打算做一个GSAP动画库的技术培训，有这方面需要的朋友，可以Q我：258754 。</p>
<p>培训这套神器的入门知识。并可长期在群里咨询问题。人均200元以内，限15人，半天或1天时间 ，大家能接受否？场地我尽量找赞助，其它费用自理。 时间暂未定，集中大家意见。</p>
<div>
<div>简介：</div>
<div>GSAP是前端动画领域的最强神器！早在FLASH时期，就已经是AS编程首选的动作库。进入H5时代以来，它全面转型，为HTML页面提供JS动画的强劲支持---用大白话讲，就是<b>用它可以搞定一切HTML动画，可完整替代FLASH</b>。做为世界级成熟产品，他各项性能指标完美，教程齐备。具体数据可以查看它的官网：<a href="http://greensock.com/">http://greensock.com</a>。里面提供了它与各种原生动画、JQUERY等主流动画库的比较数据。</div>
<div>&nbsp;</div>
<div>培训必要性：</div>
<div>GSAP只有英文教程！因此很多朋友觉得有语言门槛。</div>
<div>另外因为它的产品体系太大（不同的产品、插件、函数、参数），很多人搞不清具体的对应关系。</div>
<div>一些复杂度较高用法，必须要积累一点的实战经验。</div>
<div>&nbsp;</div>
<div>关于我：</div>
<div>我从FLASH时代起，就开始学习这个库，并翻译多篇文字及教程，发表在天地会及个人博客上。</div>
<div>我购买了官方99美元的年度会员，因此拥有所有收费插件。</div>
<div>站内所有例子，基本上我都有过研究，并在多个项目中使用。</div>
<div>&nbsp;</div>
<div>我预想的课程体系</div>
<div>&nbsp;</div>
<table style="-evernote-table:true;border-collapse:collapse;table-layout:fixed;width:100%;">
    <tbody>
        <tr>
            <td style="border-style: solid; padding: 10px; margin: 0px; width: 20%;">课程</td>
            <td style="border-style: solid; padding: 10px; margin: 0px; width: 46.9230769230769%;">描述</td>
            <td style="border-style: solid; padding: 10px; margin: 0px; width: 33.0769230769231%;">时间</td>
        </tr>
        <tr>
            <td style="border-style: solid; padding: 10px; margin: 0px; width: 33.33%;">GSAP产品体系</td>
            <td style="border-style: solid; padding: 10px; margin: 0px; width: 33.33%;">
            <div>这个工具是做什么用的</div>
            <div>如何查阅官网学习</div>
            <div>整个体系概述，产品、插件、函数、参数的关系--快速串讲</div>
            <div>如何部署</div>
            </td>
            <td style="border-style: solid; padding: 10px; margin: 0px; width: 33.33%;">40分钟</td>
        </tr>
        <tr>
            <td style="border-style: solid; padding: 10px; margin: 0px; width: 33.33%;">TweenMax/lite系列</td>
            <td style="border-style: solid; padding: 10px; margin: 0px; width: 33.33%;">较易掌握的单线动画体系，基本能实现常用动画功能---相当于一个或数个演员</td>
            <td style="border-style: solid; padding: 10px; margin: 0px; width: 33.33%;">60分钟</td>
        </tr>
        <tr>
            <td style="border-style: solid; padding: 10px; margin: 0px; width: 33.33%;">TimelineMax/lite系列</td>
            <td style="border-style: solid; padding: 10px; margin: 0px; width: 33.33%;">复杂动画、多时间线---相当于很多演员的整剧&nbsp;</td>
            <td style="border-style: solid; padding: 10px; margin: 0px; width: 33.33%;">60分钟</td>
        </tr>
        <tr>
            <td style="border-style: solid; padding: 10px; margin: 0px; width: 33.33%;">SVG插件</td>
            <td style="border-style: solid; padding: 10px; margin: 0px; width: 33.33%;">
            <div>概述众多插件功能</div>
            <div>SVG基础知识、遮罩</div>
            <div>详讲MorphSVGPlugin（相当于FLASH形变动画）、DrawSVGPlugin（相当于描线动画）、BezierPlugin（相当于FLASH引导线路径动画）</div>
            </td>
            <td style="border-style: solid; padding: 10px; margin: 0px; width: 33.33%;">60分钟</td>
        </tr>
        <tr>
            <td style="border-style: solid; padding: 10px; margin: 0px; width: 33.33%;">其它有价值的工具</td>
            <td style="border-style: solid; padding: 10px; margin: 0px; width: 33.33%;">Draggable、SplitText等</td>
            <td style="border-style: solid; padding: 10px; margin: 0px; width: 33.33%;">20分钟</td>
        </tr>
        <tr>
            <td style="border-style: solid; padding: 10px; margin: 0px; width: 33.33%;">集中答疑</td>
            <td style="border-style: solid; padding: 10px; margin: 0px; width: 33.33%;">学习者讲出自己心目中的动画形式，老师拆分为公式，并讲解动画思路</td>
            <td style="border-style: solid; padding: 10px; margin: 0px; width: 33.33%;">60分钟</td>
        </tr>
    </tbody>
</table>
<div>&nbsp;</div>
<div>总时间：5小时</div>
<div>&nbsp;</div>
<div>培训方式：</div>
<div>我来现场集中培训半天左右，可掌握这个库的最基础用法，并可长期在群里咨询问题。</div>
</div>]]></description>
		</item>
		
			<item>
			<link>http://blog.258754.cn/article.asp?id=203</link>
			<title><![CDATA[greesnsock--GSAP以及AS3版本的所有收费插件--有偿分享]]></title>
			<author>dudu@258754.cn(admin)</author>
			<category><![CDATA[greenSock]]></category>
			<pubDate>Sun,15 May 2016 10:03:00 +0800</pubDate>
			<guid>http://blog.258754.cn/default.asp?id=203</guid>
		<description><![CDATA[<p>&nbsp;我刚花646元人民币（99美元）购买了一个greesnsock（绿袜子） ShockinglyGreen帐号，得到MorphSVGPlugin等收费SVG插件包。------别找了，网上没有免费的。GSAP（HTML)以及AS3版本的所有收费插件，均包含在内。</p>
<div>&nbsp;</div>
<div>很方便制作：矢量路径动画（沿复杂曲线开动的火车）、矢量变形动画（猫头 秒变 狗头）、旗帜飘扬、复杂的飞字等，</div>
<div>详细演示地址：http://greensock.com/club/（可能要翻墙）</div>
<div>&nbsp;</div>
<div>以上动画都是完全基于HTML/svg/tweenmax，效果流畅，类似FLASH。</div>
<div>我是greensock（GSAP/TweenMax/TweenLite）的资深用户，也是天地会的老会员，目前GS平台产品的中文资料，很多都是来自我的推荐和翻译（天地会、本人博客blog.258754.cn）。</div>
<div>&nbsp;</div>
<div>有需要分享的朋友，我开价200元人民币每套。技术方面问题，欢迎咨询本人。本人QQ 258754，接受QQ或邮件咨询。</div>
<div>&nbsp;</div>]]></description>
		</item>
		
			<item>
			<link>http://blog.258754.cn/article.asp?id=169</link>
			<title><![CDATA[生肖抽奖动画示例-TimelineMax/staggerTo]]></title>
			<author>dudu@258754.cn(admin)</author>
			<category><![CDATA[greenSock]]></category>
			<pubDate>Fri,30 Jan 2015 13:37:42 +0800</pubDate>
			<guid>http://blog.258754.cn/default.asp?id=169</guid>
		<description><![CDATA[<div>
<div style="font-family: Tahoma; orphans: 2; text-align: -webkit-auto; widows: 2; font-size: medium;"><img src="http://blog.258754.cn/download.asp?id=96" alt="" style="font-family: Arial, Verdana, sans-serif; font-size: 12px;" /></div>
<div style="font-family: Tahoma; orphans: 2; text-align: -webkit-auto; widows: 2; font-size: medium;">&nbsp;</div>
<div style="font-family: Tahoma; orphans: 2; text-align: -webkit-auto; widows: 2; font-size: medium;"><span style="font-size: 24px;">谁能写出更短代码？</span></div>
<div style="font-family: Tahoma; orphans: 2; text-align: -webkit-auto; widows: 2; font-size: medium;">&nbsp;</div>
<div style="font-family: Tahoma; orphans: 2; text-align: -webkit-auto; widows: 2; font-size: medium;">
<div style="text-align: -webkit-auto;">完整案例在此：</div>
<div style="font-family: Arial, Verdana, sans-serif; font-size: 12px; text-align: -webkit-auto;"><font face="Tahoma" size="3"><a href="http://blog.258754.cn/2015/staggerTo/test_timeline_staggerTo.html" target="_blank">http://blog.258754.cn/2015/staggerTo/test_timeline_staggerTo.html</a></font></div>
<hr />
<div style="font-family: Arial, Verdana, sans-serif; font-size: 12px; text-align: -webkit-auto;">&nbsp;</div>
</div>
<div style="font-family: Tahoma; orphans: 2; text-align: -webkit-auto; widows: 2; font-size: medium;">本次为豪爵做的一个项目中用到的，第一轮，用setinterval，写了近百行代码，代码多了搞得我逻辑混乱，循环快了的话，还有BUG。</div>
<div style="font-family: Tahoma; orphans: 2; text-align: -webkit-auto; widows: 2; font-size: medium;">&nbsp;</div>
<div style="font-family: Tahoma; orphans: 2; text-align: -webkit-auto; widows: 2; font-size: medium;">接下来优化，用了TimelineMax+循环，将对象一个个压入数组，再用时间线展示，逻辑清楚了，代码还是不够精简。</div>
<div style="font-family: Tahoma; orphans: 2; text-align: -webkit-auto; widows: 2; font-size: medium;">&nbsp;</div>
<div style="font-family: Tahoma; orphans: 2; text-align: -webkit-auto; widows: 2; font-size: medium;">最后，想到staggerTo这个用法，居然成功！滚动部分的核心代码，只有8句.....如果去掉2句JQ的变量定义，就只有6句了，真是巧夺天工。</div>
<div style="font-family: Tahoma; orphans: 2; text-align: -webkit-auto; widows: 2; font-size: medium;">&nbsp;</div>
<div style="font-family: Tahoma; orphans: 2; text-align: -webkit-auto; widows: 2; font-size: medium;">
<div class="codeText">
<div class="codeHead">Javascri&#112;t代码</div>
<ol start="1" class="dp-c">
    <li class="alt"><span><span>$list=$(</span><span class="string">&quot;.sx&nbsp;li&quot;</span><span>);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="comment">//定义对象序列</span><span>&nbsp;&nbsp;</span></span></li>
    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;tw=TweenMax.staggerTo(&nbsp;&nbsp;$list,&nbsp;0.2,&nbsp;{scale:1.5,yoyo:</span><span class="keyword">true</span><span>,repeat:1}&nbsp;,0.08);&nbsp;&nbsp;</span></span></li>
    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;tl.add(tw);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//所有对象循环第1轮动画</span><span>&nbsp;&nbsp;</span></span></li>
    <li><span>&nbsp;&nbsp;</span></li>
    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;tw=TweenMax.staggerTo(&nbsp;&nbsp;$list,&nbsp;0.2,&nbsp;{scale:1.5,yoyo:</span><span class="keyword">true</span><span>,repeat:1}&nbsp;,0.08);&nbsp;&nbsp;</span></span></li>
    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;tl.add(tw);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//所有对象循环第2轮动画</span><span>&nbsp;&nbsp;</span></span></li>
    <li class="alt"><span>&nbsp;&nbsp;</span></li>
    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;左侧的对象动画</span><span>&nbsp;&nbsp;</span></span></li>
    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;$left_objs=$(<span class="string">&quot;.sx&nbsp;li:lt(&quot;</span><span>+&nbsp;(bingo+1)&nbsp;+</span><span class="string">&quot;)&quot;</span><span>&nbsp;);&nbsp;&nbsp;</span></span></li>
    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;tw=TweenMax.staggerTo(&nbsp;&nbsp;$left_objs,&nbsp;0.2,&nbsp;{scale:1.5,yoyo:</span><span class="keyword">true</span><span>,repeat:1}&nbsp;,0.08);&nbsp;&nbsp;</span></span></li>
    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;tl.add(tw);&nbsp;&nbsp;</span></li>
</ol>
</div>
<div>&nbsp;</div>
<hr />
</div>
<div style="font-family: Tahoma; orphans: 2; text-align: -webkit-auto; widows: 2; font-size: medium;">GSAP库对这种时间线控制很巧妙。它用TweenMax.staggerTo做为子时间线,再用TimelineMax（我代码中tl就是一个TimelineMax对象）做为&ldquo;总导演&rdquo;，来组合所有的时间线。</div>
<div style="font-family: Tahoma; orphans: 2; text-align: -webkit-auto; widows: 2; font-size: medium;">&nbsp;</div>
<div style="font-family: Tahoma; orphans: 2; text-align: -webkit-auto; widows: 2; font-size: medium;">至于什么repeat、yoyo回环、完成后带参数发送事件（onComplete/onCompleteParams），更是应有之技巧，不再多言。</div>
<div style="font-family: Tahoma; orphans: 2; text-align: -webkit-auto; widows: 2; font-size: medium;">&nbsp;</div>
<div style="font-family: Tahoma; orphans: 2; text-align: -webkit-auto; widows: 2; font-size: medium;">&nbsp;</div>
</div>
<p>&nbsp;</p>]]></description>
		</item>
		
			<item>
			<link>http://blog.258754.cn/article.asp?id=163</link>
			<title><![CDATA[6句代码实现六宫格重力作用出场动画-GSAP_TweenMax_3D_transform]]></title>
			<author>dudu@258754.cn(admin)</author>
			<category><![CDATA[greenSock]]></category>
			<pubDate>Tue,30 Dec 2014 11:32:55 +0800</pubDate>
			<guid>http://blog.258754.cn/default.asp?id=163</guid>
		<description><![CDATA[<p>&nbsp;昨天群友发出一个网站中有一个导航条出场效果，挺有味道。于是花了2小时模仿成功，我作品在此：</p>
<p><a href="http://258754.com/m/zgl/TweenMax_3D_transform.HTML" target="_blank">http://258754.com/m/zgl/TweenMax_3D_transform.HTML</a></p>
<p>&nbsp;</p>
<p>原站在此：http://cswzs.csjinmaohui.com///?nsukey=r1DXSmigepQZpFjQItTf9pGeJpxXjmi5G9oWsiOr85FYnOU5yWXU4Idy48Cy79MIFo934MArZBDCRHDMCXezpA%3D%3D</p>
<p>GSAP范例在此：http://greensock.com/css3/</p>
<p>----------------------------------------------------------------</p>
<p>不查不知道，原来GSAP有如此强大的CSS动画功能，尤其是对于仿3D变换的支持。只是GS官网上的文章虽多，但源码较少，辗转stackoverflow.com找到一些相应的源码。</p>
<p>我个人比较喜欢GSAP来替代CSS动画，GS官网上说是GSAP的时间轴TWEEN类动画，无论是从代码效率还是代码简练度上，都远超CSS动画。至少后者是属实的。这6句代码，如果有用CSS写，会写上一大版。</p>
<div class="codeText">
<div class="codeHead">Javascri&#112;t代码</div>
<ol start="1" class="dp-c">
    <li class="alt"><span><span>&lt;script&nbsp;src=</span><span class="string">&quot;js/jquery.min.js&quot;</span><span>&gt;&lt;/script&gt;&nbsp;&nbsp;</span></span></li>
    <li><span>&lt;script&nbsp;src=<span class="string">&quot;js/TweenMax.min.js&quot;</span><span>&gt;&lt;/script&gt;&nbsp;&nbsp;</span></span></li>
    <li class="alt"><span>&nbsp;&nbsp;</span></li>
    <li><span>&lt;script&gt;&nbsp;&nbsp;</span></li>
    <li class="alt"><span>TweenMax.fromTo($(<span class="string">&quot;.a2&quot;</span><span>),&nbsp;.3,&nbsp;{scale:.5,alpha:0},&nbsp;{scale:1,alpha:1});&nbsp;&nbsp;</span></span></li>
    <li><span>TweenMax.fromTo($(<span class="string">&quot;.a1&quot;</span><span>),&nbsp;2,&nbsp;{rotationY:-90},&nbsp;{rotationY:0,transformOrigin:</span><span class="string">&quot;right&nbsp;center&quot;</span><span>,transformPerspective:500,ease:Elastic.easeOut,delay:0.3});&nbsp;&nbsp;</span></span></li>
    <li class="alt"><span>TweenMax.fromTo($(<span class="string">&quot;.a3&quot;</span><span>),&nbsp;2,&nbsp;{rotationY:90},&nbsp;{rotationY:0,transformOrigin:</span><span class="string">&quot;left&nbsp;center&quot;</span><span>,transformPerspective:500,ease:Elastic.easeOut,delay:0.3});&nbsp;&nbsp;</span></span></li>
    <li><span>&nbsp;&nbsp;</span></li>
    <li class="alt"><span>TweenMax.fromTo($(<span class="string">&quot;.a4&quot;</span><span>),&nbsp;2,&nbsp;{rotationX:-90},&nbsp;{rotationX:0,transformOrigin:</span><span class="string">&quot;center&nbsp;0%&nbsp;00px&quot;</span><span>,transformPerspective:500,ease:Elastic.easeOut,delay:0.9});&nbsp;&nbsp;</span></span></li>
    <li><span>TweenMax.fromTo($(<span class="string">&quot;.a5&quot;</span><span>),&nbsp;2,&nbsp;{rotationX:-90},&nbsp;{rotationX:0,transformOrigin:</span><span class="string">&quot;center&nbsp;0%&nbsp;00px&quot;</span><span>,transformPerspective:500,ease:Elastic.easeOut,delay:1.1});&nbsp;&nbsp;</span></span></li>
    <li class="alt"><span>TweenMax.fromTo($(<span class="string">&quot;.a6&quot;</span><span>),&nbsp;2,&nbsp;{rotationX:-90},&nbsp;{rotationX:0,transformOrigin:</span><span class="string">&quot;center&nbsp;0%&nbsp;00px&quot;</span><span>,transformPerspective:500,ease:Elastic.easeOut,delay:1.2});&nbsp;&nbsp;</span></span></li>
    <li><span>&lt;/script&gt;&nbsp;&nbsp;</span></li>
</ol>
</div>
<p>&nbsp;</p>]]></description>
		</item>
		
			<item>
			<link>http://blog.258754.cn/article.asp?id=156</link>
			<title><![CDATA[BezierPlugin插件（js/jquery）--模拟曲线贝塞尔运动、绘制曲线的实用插件]]></title>
			<author>dudu@258754.cn(admin)</author>
			<category><![CDATA[greenSock]]></category>
			<pubDate>Tue,05 Aug 2014 10:18:40 +0800</pubDate>
			<guid>http://blog.258754.cn/default.asp?id=156</guid>
		<description><![CDATA[<p>昨天一个网站项目的实际需求：当点击&ldquo;购买&rdquo;按钮后，当前货物&ldquo;飞向&rdquo;侧边的购物车。设计要求，飞行轨迹必须是一条&ldquo;曲线&rdquo;。</p>

<p>----------------------------------------------------</p>

<p>配置信息：</p>

<p>BezierPlugin插件可以很好的解决这个问题。这是greensock.com提供的GreenSock Animation Platform (GSAP)库的一个插件，位置在：com.greensock.plugins，我测试使用的JS有：</p>

<p>&lt;script src=&quot;http://cdn.bootcss.com/gsap/1.9.7/TweenMax.min.js&quot;&gt;&lt;/script&gt;</p>

<p>&lt;script src=&quot;http://cdn.bootcss.com/gsap/1.9.7/easing/EasePack.min.js&quot;&gt;&lt;/script&gt;</p>

<p>&lt;script src=&quot;http://cdn.bootcss.com/gsap/1.9.7/plugins/BezierPlugin.min.js&quot;&gt;&lt;/script&gt;</p>

<p>TweenMax-tween核心库</p>

<p>EasePack-缓动库，如果没有特别缓动，可不加载</p>

<p>BezierPlugin-贝塞尔曲线库，必须</p>

<p>----------------------------------------------------</p>

<p>拟合输出曲线时代码示例--可用于绘制曲线，要结合canvas等绘制引擎：</p>

<p><img src="http://blog.258754.cn/download.asp?id=89" alt="" /></p>

<p>//输入input:</p>

<p>var beziers = BezierPlugin.bezierThrough([{x:0, y:0}, {x:250, y:400}, {x:500, y:0}]);</p>

<p>//输出output:</p>

<p>{</p>

<p>x:[{a:0, b:0, c:125, d:250}, {a:250, b:375, c:500, d:500}],</p>

<p>y:[{a:0, b:0, c:400, d:400}, {a:400, b:400, c:0, d:0}]</p>

<p>}</p>

<p>--------------------------------------------------------</p>

<p>曲线运动示例----结合TweenMax可直接产生曲线运动</p>

<p>//起点坐标不用放到代码中，以下三个点分别是第2点，第3点及终点</p>

<p>TweenMax.to(document.getElementById(&quot;myp&quot;), 5, {bezier:[{left:100, top:250}, {left:300, top:0}, {left:500, top:400}], ease:Power1.easeInOut});</p>

<p>-------------------------------------------------------------------------------------</p>

<p>本插件还有更丰富的功能调用，比如随曲线调整角度、旋转、可拟合除了坐标之外的任何值（比如透明度、角度），详细说明如下（英文）：</p>

<p>http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html</p>
]]></description>
		</item>
		
			<item>
			<link>http://blog.258754.cn/article.asp?id=149</link>
			<title><![CDATA[TweenMax+CSS3仿3d光环旋转特效]]></title>
			<author>dudu@258754.cn(admin)</author>
			<category><![CDATA[greenSock]]></category>
			<pubDate>Wed,05 Mar 2014 18:30:02 +0800</pubDate>
			<guid>http://blog.258754.cn/default.asp?id=149</guid>
		<description><![CDATA[<p>&nbsp;昨天在http://browser.qq.com/mac/看到了一个很酷的光环环绕效果。查了下代码，他是用CSS3的animation做的。我对那个不太熟，今天试着用TweenMax模拟了一下，效果类似。支持IE9及现代浏览器。</p>
<div>&nbsp;</div>
<div><span style="font-size: 24px;">请点击：<a href="http://blog.258754.cn/2014/r/" target="_blank">http://blog.258754.cn/2014/r/</a></span></div>]]></description>
		</item>
		
			<item>
			<link>http://blog.258754.cn/article.asp?id=143</link>
			<title><![CDATA[Greensock尚无开发LiquidStage for js的进度]]></title>
			<author>dudu@258754.cn(admin)</author>
			<category><![CDATA[greenSock]]></category>
			<pubDate>Mon,18 Nov 2013 08:09:15 +0800</pubDate>
			<guid>http://blog.258754.cn/default.asp?id=143</guid>
		<description><![CDATA[<p>&nbsp;我觉得JS网站开发非常需要的东西，所以邮件咨询了他们一下：</p>
<p>&nbsp;</p>
<blockquote>
<p>&nbsp;</p>
<p style="font-family: Arial, Verdana, sans-serif; ">carl:</p>
<p style="font-family: Arial, Verdana, sans-serif; ">目前我正在学习js平台的动画开发。</p>
<p style="font-family: Arial, Verdana, sans-serif; ">我想知道,greensock是否有计划开发&ldquo;JS框架下的&rdquo;LiquidStage以及TransformAroundPointPlugin。我觉得很多网站开发者会需要这些。</p>
<p>&nbsp;</p>
</blockquote>  <hr />
<p>&nbsp;今天一早收到回复：</p>
<blockquote>
<p>&nbsp;</p>
<p>Hi,</p>
<p>&nbsp;</p>
<p>We've had a few requests and we are thinking about it. Currently we are not actively developing these tools as we have a number of other priorities for the platform.</p>
<p>&nbsp;</p>
<p>Thanks for your support and interest.</p>
<p>&nbsp;</p>
<p>Best,</p>
<p>&nbsp;</p>
<p>Carl</p>
<p>&nbsp;</p>
</blockquote>]]></description>
		</item>
		
			<item>
			<link>http://blog.258754.cn/article.asp?id=142</link>
			<title><![CDATA[用tweenMax定义跨浏览器的alpha透明度]]></title>
			<author>dudu@258754.cn(admin)</author>
			<category><![CDATA[greenSock]]></category>
			<pubDate>Mon,28 Oct 2013 22:18:38 +0800</pubDate>
			<guid>http://blog.258754.cn/default.asp?id=142</guid>
		<description><![CDATA[<p>&nbsp;今天试着用jquery写了个表达式：</p>
<p>
<div class="codeText">
<div class="codeHead">Javascri&#112;t代码</div>
<ol start="1" class="dp-c">
    <li class="alt"><span><span>$(</span><span class="string">&quot;.content&quot;</span><span>).css({&nbsp;&nbsp;</span></span></li>
    <li><span>&nbsp;&nbsp;</span></li>
    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">'alpha'</span><span>:0,&nbsp;&nbsp;</span></span></li>
    <li><span>&nbsp;&nbsp;</span></li>
    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;</span></li>
</ol>
</div>
<p>结果发现在chrome中无法改变透明度。查了一下资料，发现chrome只支持<span style="background-color: rgb(250, 250, 250); font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Consolas, 'Courier New', monospace; line-height: 18px; ">这样的写法：</span></p>
<div class="codeText">
<div class="codeHead">Javascri&#112;t代码</div>
<ol start="1" class="dp-c">
    <li class="alt"><span><span>opacity:0;&nbsp;&nbsp;</span></span></li>
</ol>
</div>
<p>有时候真懒得去分辨这些不同浏览器的语法，想起tweenMax号称跨浏览器的性能，于是试验了一下：</p>
<div class="codeText">
<div class="codeHead">Javascri&#112;t代码</div>
<ol start="1" class="dp-c">
    <li class="alt"><span><span>TweenMax.to($(</span><span class="string">&quot;.content&quot;</span><span>),0,&nbsp;{alpha:0});&nbsp;&nbsp;&nbsp;&nbsp;</span></span></li>
</ol>
</div>
<p>&nbsp;</p>
<p>成了！很方便！</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</p>]]></description>
		</item>
		
			<item>
			<link>http://blog.258754.cn/article.asp?id=133</link>
			<title><![CDATA[greensock_plugins常用功能中文简介]]></title>
			<author>dudu@258754.cn(admin)</author>
			<category><![CDATA[greenSock]]></category>
			<pubDate>Thu,11 Jul 2013 21:08:30 +0800</pubDate>
			<guid>http://blog.258754.cn/default.asp?id=133</guid>
		<description><![CDATA[<p>com.greensock.plugins是greensock库中，与tweenLite/TweenMax等tween类搭配使用的组合功能。虽然号称是插件，但是功能真的很强。有小而精练的功能，也有象运动模拟这样的的大块头功能，这些都需要使用者慢慢的探索。这里只列出了自己常常使用的一些，让大家能少读几行英文。</p>
<p>具体的使用方法、语法、如何包含库等，可以阅读原文示例：<a href="http://www.greensock.com/as/docs/tween/com/greensock/plugins/package-detail.html">http://www.greensock.com/as/docs/tween/com/greensock/plugins/package-detail.html</a></p>
<p>这里还有一个更形象的的动画演示及代码生成器：http://www.greensock.com/as/swf/PluginExplorer-v11.swf</p>
<p>另外，JS版本的plugins库也已经有了，文档在这里：http://api.greensock.com/js/，相比AS来说，只能说太弱太弱了。可以想见，基于JS的动画开发，还在远远的追赶之中。</p>
<table border="1" cellpadding="3" cellspacing="1">
    <tbody>
        <tr>
            <th>plugins名称</th>
            <th>我的描述</th>
            <th>原英文描述（英文好的请自行对照）</th>
        </tr>
        <tr>
            <td><a href="http://www.greensock.com/as/docs/tween/com/greensock/plugins/AutoAlphaPlugin.html">AutoAlphaPlugin</a></td>
            <td>常用，当缓动alpha到零值时，将visible自动置为false不可见状态。</td>
            <td>
            <p>Tweening &quot;autoAlpha&quot; is exactly the same as tweening an object's &quot;alpha&quot; except that it ensures that the object's &quot;visible&quot; property is true until autoAlpha reaches zero at which point it will toggle the &quot;visible&quot; property to false.</p>
            </td>
        </tr>
        <tr>
            <td>BevelFilterPlugin</td>
            <td>不常用，浮雕边滤镜功能。</td>
            <td>
            <p>Tweens a BevelFilter.</p>
            </td>
        </tr>
        <tr>
            <td>BezierPlugin</td>
            <td>不常用，但功能强大，可以拟合贝塞尔曲线路径。</td>
            <td>
            <p>Bezier tweening allows you to tween in a non-linear way.</p>
            </td>
        </tr>
        <tr>
            <td>BezierThroughPlugin</td>
            <td>不常用，贝塞尔曲线路径相关。</td>
            <td>
            <p>Identical to bezier except that instead of defining bezier control point values, you define points through which the bezier values should move.</p>
            </td>
        </tr>
        <tr>
            <td>BlurFilterPlugin</td>
            <td>常用，模糊效果全靠它了。</td>
            <td>
            <p>&nbsp;</p>
            <p>Tweens a BlurFilter.</p>
            </td>
        </tr>
        <tr>
            <td>CacheAsBitmapPlugin</td>
            <td>没用过。</td>
            <td>
            <p>Forces the&nbsp;cacheAsBitmap&nbsp;property of a DisplayObject to be a certain value (true&nbsp;or&nbsp;false) during the tween and then sets it back to whatever it was before the tween was rendered for the first time.</p>
            </td>
        </tr>
        <tr>
            <td>CirclePath2DPlugin</td>
            <td>&nbsp;</td>
            <td>Tweens an object along a CirclePath2D motion path in any direction (clockwise, counter-clockwise, or shortest).</td>
        </tr>
        <tr>
            <td>ColorMatrixFilterPlugin</td>
            <td>&nbsp;</td>
            <td>ColorMatrixFilter tweening offers an easy way to tween a DisplayObject's saturation, hue, contrast, brightness, and colorization.</td>
        </tr>
        <tr>
            <td>ColorTransformPlugin</td>
            <td>很常用，尤其在做一些变色效果时，比如鼠标点上去变色、变高亮等--鼠标移开后又恢复原状等。</td>
            <td>
            <p>&nbsp;</p>
            <p>Ever wanted to tween ColorTransform properties of a DisplayObject to do advanced effects like overexposing, altering the brightness or setting the percent/amount of tint? or maybe tween individual ColorTransform properties like redMultiplier, redOffset, blueMultiplier, blueOffset, etc.</p>
            </td>
        </tr>
        <tr>
            <td>DropShadowFilterPlugin</td>
            <td>常用，阴影滤镜，跟发光略有区别。</td>
            <td>
            <p>Tweens a DropShadowFilter.</p>
            </td>
        </tr>
        <tr>
            <td>DynamicPropsPlugin</td>
            <td>&nbsp;</td>
            <td>If you'd like to tween something to a destination value that may change at any time, DynamicPropsPlugin allows you to simply associate a function with a property so that every time the tween is rendered, it calls that function to get the new destination value for the associated property.</td>
        </tr>
        <tr>
            <td>EndArrayPlugin</td>
            <td>&nbsp;</td>
            <td>Tweens numbers in an Array.</td>
        </tr>
        <tr>
            <td>EndVectorPlugin</td>
            <td>&nbsp;</td>
            <td>Tweens numbers in an Vector.&lt;Number&gt;.</td>
        </tr>
        <tr>
            <td>FrameBackwardPlugin</td>
            <td>小功能，向前N帧。</td>
            <td>
            <p>Tweens a MovieClip backward to a particular frame number, wrapping it if/when it reaches the beginning of the timeline.</p>
            </td>
        </tr>
        <tr>
            <td>FrameForwardPlugin</td>
            <td>小功能，向后N帧。</td>
            <td>
            <p>Tweens a MovieClip forward to a particular frame number, wrapping it if/when it reaches the end of the timeline.</p>
            </td>
        </tr>
        <tr>
            <td>FrameLabelPlugin</td>
            <td>居家必备之常用功能，缓动到指定的帧标签。</td>
            <td>
            <p>Tweens a MovieClip to a particular frame label.</p>
            </td>
        </tr>
        <tr>
            <td>FramePlugin</td>
            <td>缓动到指定帧（用帧数字表示的）。</td>
            <td>
            <p>Tweens a MovieClip to a particular frame number.</p>
            </td>
        </tr>
        <tr>
            <td>GlowFilterPlugin</td>
            <td>居家必备功能，发光滤镜值的缓动控制。</td>
            <td>
            <p>Tweens a GlowFilter.</p>
            </td>
        </tr>
        <tr>
            <td>HexColorsPlugin</td>
            <td>&nbsp;</td>
            <td>Although hex colors are technically numbers, if you try to tween them conventionally, you'll notice that they don't tween smoothly.</td>
        </tr>
        <tr>
            <td>LiquidPositionPlugin</td>
            <td>
            <p>很少用的功能，要跟LiquidStage相结合的一个功能。</p>
            <p>LiquidStage本来就是GS会员才有的功能，一般人都不会用。LiquidStage介绍参见拙作：http://blog.258754.cn/article.asp?id=60</p>
            </td>
            <td>
            <p>If you're using&nbsp;LiquidStage&nbsp;and you'd like to tween a DisplayObject to coordinates that are relative to a particular&nbsp;PinPoint&nbsp;(like the&nbsp;CENTER) whose position may change at any time,LiquidPositionPlugin&nbsp;makes it easy by dynamically updating the destination values accordingly.</p>
            </td>
        </tr>
        <tr>
            <td>MotionBlurPlugin</td>
            <td>高级货-运动模糊插件，可以在运动时按运行方向产生模糊效果，做一些求逼真的效果，非常有用！但这是个会员才拥有的功能，好吧，反正我是会员。</td>
            <td>
            <p>MotionBlurPlugin provides an easy way to apply a directional blur to a DisplayObject based on its velocity and angle of movement in 2D (x/y).</p>
            </td>
        </tr>
        <tr>
            <td>Physics2DPlugin</td>
            <td>高级货，会员功能，能产生逼真的运动学效果，看示意图就知道了。</td>
            <td>
            <p>Provides simple physics functionality for tweening a DisplayObject's x and y coordinates based on a combination of velocity, angle, gravity, acceleration, accelerationAngle, and/or friction.</p>
            </td>
        </tr>
        <tr>
            <td>PhysicsPropsPlugin</td>
            <td>&nbsp;</td>
            <td>Sometimes you want to tween a property (or several) but you don't have a specific end value in mind - instead, you'd rather describe the movement in terms of physics concepts, like velocity, acceleration, and/or friction.</td>
        </tr>
        <tr>
            <td>QuaternionsPlugin</td>
            <td>&nbsp;</td>
            <td>Performs SLERP interpolation between 2 Quaternions.</td>
        </tr>
        <tr>
            <td>RemoveTintPlugin</td>
            <td>常用，移除加色效果，加色效果就是下面的TintPlugin</td>
            <td>
            <p>Removes the tint of a DisplayObject over time.</p>
            </td>
        </tr>
        <tr>
            <td>RoundPropsPlugin</td>
            <td>&nbsp;</td>
            <td>If you'd like the inbetween values in a tween to always get rounded to the nearest integer, use the roundProps special property.</td>
        </tr>
        <tr>
            <td>ScalePlugin</td>
            <td>小功能，让scaleX和scaleY同时变化。</td>
            <td>
            <p>ScalePlugin combines scaleX and scaleY into one &quot;scale&quot; property.</p>
            </td>
        </tr>
        <tr>
            <td>ScrollRectPlugin</td>
            <td>小功能，让方块形状进行x/y/宽/高的同时变化。</td>
            <td>
            <p>Tweens the scrollRect property of a DisplayObject.</p>
            </td>
        </tr>
        <tr>
            <td>SetActualSizePlugin</td>
            <td>没看太懂，似乎是让一些组件类恢复到原来的形状，不常用。</td>
            <td>
            <p>Some components require resizing with setActualSize() instead of standard tweens of width/height in order to scale properly.</p>
            </td>
        </tr>
        <tr>
            <td>SetSizePlugin</td>
            <td>小功能。让宽和高同时变化。</td>
            <td>
            <p>Some components require resizing with setSize() instead of standard tweens of width/height in order to scale properly.</p>
            </td>
        </tr>
        <tr>
            <td>ShortRotationPlugin</td>
            <td>不太常用但很有用的功能--沿短边旋转：当进行旋转时，会如果大于180度，会沿较小角度的那边旋转过去（反向）。</td>
            <td>
            <p>To tween any rotation property of the target object in the shortest direction, use &quot;shortRotation&quot; For example, if&nbsp;myObject.rotation&nbsp;is currently 170 degrees and you want to tween it to -170 degrees, a normal rotation tween would travel a total of 340 degrees in the counter-clockwise direction, but if you use shortRotation, it would travel 20 degrees in the clockwise direction instead.</p>
            </td>
        </tr>
        <tr>
            <td>SoundTransformPlugin</td>
            <td>跟声音相关的，可以缓动一切跟声音相关的属性，音量、声道平衡、左转右等。</td>
            <td>
            <p>Tweens properties of an object's soundTransform property (like the volume, pan, leftToRight, etc.</p>
            </td>
        </tr>
        <tr>
            <td>StageQualityPlugin</td>
            <td>对画面质量的一个缓动，没啥大用。</td>
            <td>
            <p>Sets the stage's&nbsp;quality&nbsp;to a particular value during a tween and another value after the tween which can be useful for improving rendering performance in the Flash Player while things are animating.</p>
            </td>
        </tr>
        <tr>
            <td>ThrowPropsPlugin</td>
            <td>&nbsp;</td>
            <td>ThrowPropsPlugin&nbsp;allows you to simply define an initial velocity for a property (or multiple properties) as well as optional maximum and/or minimum end values and then it will calculate the appropriate landing position and plot a smooth course based on the easing equation you define (Quad.easeOut by default, as set in TweenLite).</td>
        </tr>
        <tr>
            <td>TintPlugin</td>
            <td>非常常用，向目标色缓动变色。比ColorTransformPlugin要简单，适用于简单的变色功能。</td>
            <td>
            <p>To change a DisplayObject's tint/color, set this to the hex value of the tint you'd like to end up at (or begin at if you're using&nbsp;TweenMax.from()).</p>
            </td>
        </tr>
        <tr>
            <td>TransformAroundCenterPlugin</td>
            <td>常用！好用！以MC中心点进行旋转。</td>
            <td>
            <p>Normally, all transformations (scale, rotation, and position) are based on the DisplayObject's registration point (most often its upper left corner), but TransformAroundCenter allows you to make the 2D transformations occur around the DisplayObject's center.</p>
            </td>
        </tr>
        <tr>
            <td>TransformAroundPointPlugin</td>
            <td>牛！用你指定的点进行旋转。</td>
            <td>
            <p>Normally, all transformations (scale, rotation, and position) are based on the DisplayObject's registration point (most often its upper left corner), but TransformAroundPoint allows you to define ANY point around which 2D transformations will occur during the tween.</p>
            </td>
        </tr>
        <tr>
            <td>TransformMatrixPlugin</td>
            <td>&nbsp;</td>
            <td>TransformMatrixPlugin allows you to tween a DisplayObject's transform.matrix values directly (a, b, c, d, tx, and ty) or use common properties like&nbsp;x, y, scaleX, scaleY, skewX, skewY, rotation&nbsp;and even&nbsp;shortRotation.</td>
        </tr>
        <tr>
            <td>TweenPlugin</td>
            <td>这个不能直接用，是所有插件类的基类。</td>
            <td>
            <p>TweenPlugin is the base class for all TweenLite/TweenMax plugins.</p>
            </td>
        </tr>
        <tr>
            <td>VisiblePlugin</td>
            <td>小功能，在任何缓动过程的终点，让MC不可见。</td>
            <td>
            <p>Toggles the visibility at the end of a tween.</p>
            </td>
        </tr>
        <tr>
            <td>VolumePlugin</td>
            <td>跟音量相关的缓动，妈呀，总算写完了。</td>
            <td>
            <p>Tweens the volume of an object with a soundTransform property (MovieClip/SoundChannel/NetStream, etc.).</p>
            </td>
        </tr>
    </tbody>
</table>]]></description>
		</item>
		
			<item>
			<link>http://blog.258754.cn/article.asp?id=132</link>
			<title><![CDATA[起步学习JS动画，从一个小例子，来自于greensock出品的JS动画平台]]></title>
			<author>dudu@258754.cn(admin)</author>
			<category><![CDATA[greenSock]]></category>
			<pubDate>Mon,08 Jul 2013 09:52:08 +0800</pubDate>
			<guid>http://blog.258754.cn/default.asp?id=132</guid>
		<description><![CDATA[<p>&nbsp;GSAP-JS是完全由GSAP平台的AS版本进化出来的，针对HTML平台的JS动画。根据我目前的学习进度，感觉到它已经把很多常用的动画结构，用简练的语法进行了包含。这方面，比使用原生JS或是JQ，有更大的优势。</p>
<p><a href="http://blog.258754.cn/2013/GSAP_Jump_Start_Demos.rar" target="_blank"><span style="color: rgb(255, 0, 0); "><span style="font-size: 20px; ">这里有一个由原站下载的范例包</span></span></a>，可以供大家起步学习，我就举一个小例子：</p>
<p><img src="http://blog.258754.cn/download.asp?id=76" alt="" /></p>
<p>&nbsp;</p>
<p>我们要做这样一个由N个小图标从上方飘下的动画，HTML结构是这样的：</p>
<div class="codeText">
<div class="codeHead">XML/HTML代码</div>
<ol start="1" class="dp-xml">
    <li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">&quot;logosWrapper&quot;</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>
    <li><span>&nbsp;&nbsp;</span><span>&nbsp; &nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">&quot;logo&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>
    <li><span>&nbsp;&nbsp;</span><span>&nbsp; &nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">&quot;logo&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>
    <li><span>&nbsp;&nbsp;</span><span>&nbsp; &nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">&quot;logo&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>
    <li><span>&nbsp;&nbsp;</span><span>&nbsp; &nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">&quot;logo&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>
    <li><span>&nbsp;&nbsp;</span><span>&nbsp; &nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">&quot;logo&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>
    <li><span>&nbsp;&nbsp;</span><span>&nbsp; &nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">&quot;logo&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>
    <li><span>&nbsp;&nbsp;</span><span>&nbsp; &nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">&quot;logo&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>
    <li><span>&nbsp;&nbsp;</span><span>&nbsp; &nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">&quot;logo&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>
    <li><span>&nbsp;&nbsp;</span><span>&nbsp; &nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">&quot;logo&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>
    <li><span>&nbsp;&nbsp;</span><span>&nbsp; &nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">&quot;logo&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>
    <li><span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li>
</ol>
</div>
<p>&nbsp;</p>
<p>用 GSAP-JS实现，实际上只有2句代码：</p>
<div class="codeText">
<div class="codeHead">XML/HTML代码</div>
<ol start="1" class="dp-xml">
    <li class="alt"><span><span class="attribute">logos</span><span>&nbsp;=&nbsp;$(&quot;.logo&quot;),&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//jq定义，将图标们定义为一个组&nbsp;&nbsp;</span></span></li>
    <li><span>.staggerFrom(logos,&nbsp;0.6,&nbsp;{css:{top:-60,&nbsp;left:&quot;<span class="attribute">-</span><span>=50px</span><span class="attribute-value">&quot;,&nbsp;rotation:&quot;</span><span>-90deg&quot;},&nbsp;ease:Back.easeOut},&nbsp;0.1)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//按0.1秒的时间间隔，将logos中所有子元素，从左上方旋转-90度飞入，飞行时长为0.6秒&nbsp;&nbsp;</span></span></li>
</ol>
</div>
<p><strong>非常高效吧，不用自己写循环！不用写定时器！不用去做CSS的具体定义！</strong></p>
<p>完整代码见我附件包中的：16_timelinelite_labels.html这个例子</p>
<div>&nbsp;</div>
<p>&nbsp;</p>]]></description>
		</item>
		
</channel>
</rss>
