TweenLite是GreenSock 动画平台中的核心动画插件-BFW插件库

TweenLite是GreenSock 动画平台中的核心动画插件

TweenLite是GreenSock 动画平台中的核心动画插件，可用来构建补间动画(tween)。补间是flash时代的专业词汇，意思是在起始状态和终点状态之间补全中间过程。虽然现在我们使用动画这个词，但是其本质是不变的，仍然要包含四个要素：动画目标（target）、起始状态、终点状态、补间效果。

例如将一个div从opacity:1经过5秒钟降低至opacity:0

TweenLite.fromTo('div', 5, {opacity:1}, {opacity:0});

//动画目标：div

//起始状态：opacity:1

//终点状态：opacity:0

//补间：5秒完成状态改变

起点状态经常可以省略，例如div以当前位置为起点，向右移动300px：

TweenLite.to('div', 5, {x:300});

例子中使用的CSS属性动画（opacity、x等）需要CSSPlugin插件支持，此插件包含在TweenMax.min.js中。如果你使用TweenLite.min.js，需另外加载CSSPlugin.min.js。

完整示例如下：

<!DOCTYPE html>
<html>
<head>
   <style type="text/css">
        #rect {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: blue;
            top: 300px;
            left: 50px;
        }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/CSSPlugin.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenLite.js"></script>
</head>
<body>
    <div id="rect"></div>
    <script type="text/javascript">
        TweenLite.to("#rect", 1, {
            left: "240px"
        }); 
        TweenLite.to("#rect", 1, {
            top: "400px", scale: 2, delay: 1
        });
    </script>
</body>
</html>

TweenLite是GreenSock 动画平台中的核心动画插件

网友评论0

pixi.min.js

jquery.gif.js

gif.js

jquery.fliptimer.js

gifshot.js

libgif.js

particleground.js

pts.js

bubbly-bg.js

PixelWave.js