JS高性能动画库GSAP

简介

GSAP是一个JavaScript库，用于构建适用于所有主要浏览器的高性能动画。动画CSS，SVG，画布，React，Vue，WebGL，颜色，字符串，运动路径，通用对象。。。JavaScript可以触摸的任何东西！ScrollTrigger插件允许您使用最少的代码创建令人瞠目结舌的基于滚动的动画。没有其他库能够在解决数百万站点上的实际问题时提供如此先进的排序、可靠性和严密的控制。GSAP解决了无数浏览器不一致的问题；你的动画效果很好。GSAP的核心是一个高速属性操纵器，能够以极高的精度随时间更新值。它比jQuery快20倍！

使用

1.  引入文件

<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>

2.  HTML

<div id="rect"></div>

[CSS]
<style>
  .rect{
    //元素的position根据需求来设置
    //如果position为static，关于元素的坐标的操作将会无效，但对于元素的width,height的操作还是会被执行
    //如果position为absolute或fixed或relative时，对于元素的坐标的宽高的操作都能生效
    //试着改变下面的position属性来看一下效果
    position:absolute;width:100px;height:100px;background-color:blue;top:300px;left:50px;
  }
</style>

3.  调用

TweenLite.to("#rect",1,{left:"500px"});

说明

1）TweenLite的构造方法是这个样子的：TweenLite(target:Object, duration:Number, vars:Object);

2）target为要操作的dom对象；

3）duroation为整个动画的持续时间;

4）vars为一个自属性集合对象，可以是一个属性如：{left:"500px"},或多个属性如：

{left:"500px",top:"200px",width:"200px"}

相关链接

GitHub 地址：https://github.com/jsthings/GSAP

官网地址 ：https://greensock.com/

在线演示：https://demo.lanrenzhijia.com/demo/111/11168/demo/