ai基础教程入门_绘画入门基础教程第一次写博文呢,这次写博客是因为应一位同学的要求,写一下GSAPJS的一个小教程。为什么说小呢?因为它实际上就是小,只是一个入门级的小教程。如果你想问:“那你为什么不写详细一点呢?”,我想说,说.,
大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。 Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
第一次写博文呢 ,这次写博客是因为应一位同学的要求,写一下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来做);
2)写一下div的样式,让它看起来更像一个方块;
.rect{
//元素的position根据需求来设置
//如果position为static,关于元素的坐标的操作将会无效,但对于元素的width,height的操作还是会被执行
//如果position为absolute或fixed或relative时,对于元素的坐标的宽高的操作都能生效
//试着改变下面的position属性来看一下效果
position:absolute;
width: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”,width:”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 >
好啦,今天就先说到这吧,困了,修改天有空,有心情再断续!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/167839.html 原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...