zoukankan      html  css  js  c++  java

  • GSAP JS基础教程--认识GSAP JS

    第一次写博文呢，这次写博客是因为应一位同学的要求，写一下GSAP JS的一个小教程。为什么说小呢？因为它实际上就是小，只是一个入门级的小教程。如果你想问：“那你为什么不写详细一点呢？”，我想说，说.,说..，“因为我也不懂，哈哈”，就是不懂，不骗你们，不懂就是不懂。那我那点英文水平肿么会懂呢？

     
    好吧，言归正传。首先说一下GSAP（GreenSockAnimationPlatform）的官网，点这里进入GSAP的官网，也可以点这里直接进入GSAP JS的介绍，有空详细看一下，并不需要非常好的英语水平才能看，你看博主我这个英文水平都能看懂部分，不懂的部分就多查查有道。看得懂的话就可以完全跳过我的这篇“小教程啦”，真的，我说得一定不够官方的详细、全面、好，还有可能会说错（:汗
     
    好吧，这次真的要开始啦！准备好了吗？开始啦！！！
     
    首先，我们先说一下工具的准备，要学习GSAP，那么我们一定要先准备一个GASP的类包啦,文章结束的时候，博主我会给出一个网盘地址，让同学本下载，当然，你也可以到GreenSock的官网（http://www.greensock.com）下载最新的版本
     
    GSAP有两个版本一个为ActionScript 版本，已经在flash平台上运行多年，是一个“轻量级”、“高效率”、强大的2D动画引擎，一直深受ASer（学ActionScript的人都叫自己 ASer）的欢迎，学AS的人，没有一个说是不知道、没使用过GSAP的。
     
    GSAP JS顾名思义是指GSAP的js版本，GSAP JS是GreenSock公司新出的一个2D动画引擎，可以说是AS版本的移植版，虽然功能还不够AS版本的完善，但是一样是非常强大、高效、好用的，据说它的运行速度是JQuery的20倍（想测试的同学可以点这里）。当然，这是说动画方面的，jQery也有自己的强大之处（比如jQuery强大的选择器）。
     
     
    好吧，类包也准备好啦，这一次真的真的要开始啦！
     
    使用之前，就像使用其他任何js类库，先要导入类包，导入方法如下：
    <script type="text/javascript" src="你的类包的路径" ></script>
     
    导入包的比较常用组合有两种，CSSPlugin.min.js+EasePack.min.js+TweenLite.min.js 和TweenMax.min.js 这两种组合;
    TweenMax是TweenLite的子类，它承 了TweenLite所有属性和方法，同时还包含了一些常用的插件（比如CSSPlugin）,所以当你导入TweenMax时就不需要导入 CSSPlugin啦。当然因为TweenMax包含了其他的插件，所以它的“份量”会大一点，不名够TweenLite小巧，实际使用时，可根据个人需 求进行选择。
     
    注：
    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>

    我不怎么会说话，直接来一个小实例好啦，边做边解说！

    我们来做一个简单的小方块移动动画吧：

    1）先来创建一个小方块（用div来做）；
    <div id="rect"></div>
    2）写一下div的样式，让它看起来更像一个方块；
    .rect{
//元素的position根据需求来设置
//如果position为static，关于元素的坐标的操作将会无效，但对于元素的width,height的操作还是会被执行
//如果position为absolute或fixed或relative时，对于元素的坐标的宽高的操作都能生效
//试着改变下面的position属性来看一下效果
position:absolute;
100px;
height:100px;
background-color:blue;
top:300px;
left:50px;
}
    3)开始写代码，让方块动起来;

    这里使用的TweenLite(使用记得导入包，TweenMax的使用方法类似)

    TweenLite的构造方法是这个样子的：TweenLite(target:Object, duration:Number, vars:Object);
    target为要操作的dom对象；
    duroation为整个动画的持续时间;
    vars为一个自属性集合对象，可以是一个属性如：{left:"500px"},或多个属性如：{left:"500px",top:"200px","200px"}

    好了，下面我们先来花1秒钟把刚才创建的方块的横坐标移动到500像素的位置吧！方法如下：

    var rect=document.getElementById_x_x_x_x_x("rect");
    TweenLite.to(rect,1,{left:“500px”});

    上面两行代码也可以简单地写成：TweenLite.to("#rect",1,{left:"500px"});

    TweenLite并不依赖jQuery，但我们还可以利用jQuery强大的选择器来简化TweenLite创建动画的代码，

    比如上面的代码可以通过id名来（#rect）来简化动画的创建过程，当我们导入jQuery时,我们还可以使用

    元素的类（例如：".rect"）等来代表元素，从而简化代码；


    不知道有没有说清楚，简单地说
    TweenLite(target:Object, duration:Number, vars:Object);
    target对象可以用jQuery的选择器选择出来的对象（例如：$("#element"),$(".abd"),$("#element p")等等）来代表，从而简化代码

     

    4）扩展；
    好啦，光让方块向右移动一下不过瘾？那我们再让方块向下移动100像素，同时把它的宽设为原来的两倍，我们可以这样写：
    TweenLite.to("#rect",1,{top:"400px",scale:2});//scale为缩放比例的意思
    好啦，把这话代码添加到原来的代码中去，变成：
    TweenLite.to("#rect",1,{left:"500px"});
TweenLite.to("#rect",1,{top:"400px",scale:2});//scale为缩放比例的意思
    这个样子，运行看看！

    这个会变成方块向坐标（500，400）移动，并同样放大两倍。
    这 是为什么呢？因为我们的两号代码没有时间间隔，同时执行啦，解决办法是：为第二个TweenLite设置一个延时时间（delay），延时多久呢？因为第 一个动画的持续时间为1秒，所以我们第二动画就等它一秒，等第一个动画播放完再开始吧，也就是说延时1秒，修改后的代码是这样子的：

    TweenLite.to("#rect",1,{top:"400px",scale:2，delay:1});//scale为缩放比例的意思



    以及今天的完整代码：
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
　　<head>
　　　　<title> New Document </title> <meta name="Generator" content="EditPlus">
　　　　<meta name="Author" content="">
　　　　<meta name="Keywords" content="">
　　　　<meta name="Description" content="">
 
　　　　
　　　　<!--
　　　　  *@author AIJ
  　　　　*@email 1058514799@qq.com
  　　　　*@date 2013-6-28
　　　　 -->
 
　　　　<style type="text/css">
　　　　#rect{
　　　　　　position:absolute;
　　　　　　width:50px;
　　　　　　height:50px;
　　　　　　background-color:blue;
　　　　　　top:300px;
　　　　　　left:50px;
　　　　}
　　　　</style>
 
　　　　<script type="text/javascript" src="greensock/plugins/CSSPlugin.min.js"></script>
　　　　<script type="text/javascript" src="greensock/TweenLite.min.js"></script>
　　　　</head>
　　<body>
　　　　<div id="rect"></div>
　　　　<script type="text/javascript">
　　　　　　TweenLite.to("#rect",1,{left:"500px"}); TweenLite.to("#rect",1,{top:"400px",scale:2,delay:1});
　　　　</script>
　　</body>
</html>
    好啦，今天就先说到这吧，困了，修改天有空，有心情再断续！
  • 相关阅读:
    前端之页面标签的图标修改
    分页, 解析器, 渲染器
    DRF的认证,频率,权限
    视图组件,路由组件,版本控制
    序列化组件
    Restful规范
    docker大全集
    哨兵和docker容器
    项目发布须知
    Linux之nginx
  • 原文地址：https://www.cnblogs.com/tujia/p/3217436.html
Copyright © 2011-2022 走看看