greensock GSAP强劲的动画引擎

最新推荐文章于 2024-08-21 20:48:46 发布

云飞扬扬

最新推荐文章于 2024-08-21 20:48:46 发布

阅读量2k

点赞数

分类专栏：前端文章标签： js 动画

本文链接：https://blog.csdn.net/nickroprak/article/details/37818225

版权

前端专栏收录该内容

117 篇文章 3 订阅

订阅专栏

官方：http://www.greensock.com/gsap-js/
以前做AS开发时就用greensock.的动画插件包，相当顺手，语法结构也好理解。
如：
TweenLite.to(target:Object, duration:Number, vars:Object);
target为要操作的dom对象；
duroation为整个动画的持续时间;
vars为一个自属性集合对象，可以是一个属性如：{left:"500px"},或多个属性如：{left:"500px",top:"200px",width:"200px"}

target对象可以用jQuery的选择器选择出来的对象（例如：$("#element"),$(".abd"),$("#element p")等等）来代表，从而简化代码

使用：

导入包的比较常用组合有两种，CSSPlugin.min.js+EasePack.min.js+TweenLite.min.js 和TweenMax.min.js 这两种组合;

TweenMax是TweenLite的子类，它承了TweenLite所有属性和方法，同时还包含了一些常用的插件（比如CSSPlugin）,所以当你导入TweenMax时就不需要导入 CSSPlugin啦。

注意：
TweenMax包含TweenLite, CSSPlugin, EasePack, TimelineLite, TimelineMax, RoundPropsPlugin, BezierPlugin, AttrPlugin,和 DirectionalRotationPlugin所以可以单独使用

TweenLite没有包含CSSPlugin插件（网页通过css来控制元素变化），所以不能单独使用，至少要和CSSPlugin一起用

你可以用：

<!--CDN links for the latest TweenLite, CSSPlugin, and EasePack-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>

或

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

example:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<style type="text/css">
		body{margin: 0;padding: 0;}
	</style>
	
</head>
<body>
	<div id="tw" style="width:100px;height:100px;background-color:#ce0000;display:block;"></div>
</body>	
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script></span>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
	<script type="text/javascript">		
		TweenLite.to("#tw", 2, {width:"200px", height:"150px",scale:2,delay:1});
	</script>
</html>