GSAP JS基础教程--使用缓动函数
今天来了解一下缓动easeing函数。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>GSAP JS基础教程--使用缓动函数</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<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;
top:300px;
left:50px;
background-color:blue;
}
</style> <!--使用之前记得导入包（下面的路径为俺的包的路径，改成你们的包的路径就行啦）-->
<script src="../greensock/TweenLite.min.js" type="text/javascript"></script>
<script src="../greensock/Plugins/CSSPlugin.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload=init; //之所以把代码写在onload函数里，是因为页面没加载之前是读取不到网页的节点的
function init(){ </script>
</head> <body>
<!--我们用一个div来模拟一个小方块-->
<div id="rect"></div>
</body>
</html>
Power1.easeInOut
Power1.easeOut
TweenLite.to("#rect",1,{left:"500px",ease:Power1.easeIn});
TweenLite.to("#rect",1,{left:"500px",ease:Power1.easeInOut});
TweenLite.to("#rect",1,{left:"500px",ease:Power1.easeOut});
Back.easeOut
TweenLite.to("#rect",1,{left:"500px",ease:Back.easeIn});
TweenLite.to("#rect",1,{left:"500px",ease:Back.easeInOut});
TweenLite.to("#rect",1,{left:"500px",ease:Back.easeOut});
、Bounce和Elastic，使用方法也是一样的，同学就自己一个个试试吧，认真观察每个的函数的效果
GSAP JS基础教程--使用缓动函数的更多相关文章
- GSAP JS基础教程--TweenLite操作元素的相关属性
今天来学习用TweenLite操作元素的各种属性,以Div为例,其他元素的操作也是一样的,只是可能一些元素有它们的特殊属性,就可能不同罢了. 代码里用详细注释,我就不再重复啦,大家看代码就可以啦! ...
- GSAP JS基础教程--动画的控制及事件
好多天没有写无博文啦,今天无聊就再写一下! 今天要讲的是TweenLite的一些事件以及,TweenLite动画的控制,TweenMax类似,请自行参考官方文档:http://api.greensoc ...
- GSAP JS基础教程--认识GSAP JS
第一次写博文呢,这次写博客是因为应一位同学的要求,写一下GSAP JS的一个小教程.为什么说小呢?因为它实际上就是小,只是一个入门级的小教程.如果你想问:“那你为什么不写详细一点呢?”,我想说,说., ...
- JS动画之缓动函数分析及动画库
上一篇讲了JS动画定时器相关知识,这一篇介绍下缓动函数及流行的动画库. 熟悉的图 实际使用 jquery animate()+jquery.easing插件的使用: $(selector).anima ...
- JS —— 轮播图中的缓动函数的封装
轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...
- window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果
window.requestAnimationFrame 概述 window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作 ...
- NGUI缓动函数
缓动函数:http://easings.net/zh-cn 研究NGUI的博客:http://dsqiu.iteye.com/category/295721
- iOS基本动画/关键帧动画/利用缓动函数实现物理动画效果
先说下基本动画部分 基本动画部分比较简单, 但能实现的动画效果也很局限 使用方法大致为: #1. 创建原始UI或者画面 #2. 创建CABasicAnimation实例, 并设置keypart/dur ...
- Silverlight动画学习笔记(三)：缓动函数
(一)定义: 缓动函数:可以将自定义算术公式应用于动画 (二)为什么要用缓动函数: 您可能希望某一对象逼真地弹回或其行为像弹簧一样.您可以使用关键帧动画甚至 From/To/By 动画来大致模拟这些效 ...
随机推荐
- Android studio3.1的XML布局文件没有自动提示不全代码功能
将studio从2.3升级到3.1,打开后发现布局文件没有代码提示 尝试了网上一些解决方法,但发现并不是平时所说的省电模式开关的问题,也尝试了删除idea和iml文件后rebuild的方法,无效 然后 ...
- ajax操作之操作 JavaScript 对象
通过请求获取充分格式化的HTML虽然很方便,但这也意味着必须在传输文本内容的同时也 传输很多HTML标签.有时候,我们希望能够尽量少传输一些数据,然后马上处理这些数据.在 这种情况,我们希望取得能够通 ...
- Linux 套接字与文件描述符
端口和套接字,用于确定指定主机上的哪个本地进程使用了哪个协议和哪台远程主机上的哪个进程进行了通信.端口和套接字的使用可以基于以下几点: ①为每个应用过程分配一个过程标识符(Process ID),每次 ...
- tensorflow的升级与版本管理
1 查看cuda与cudnn的版本 cuda一般安装在 /usr/local/cuda/ 路径下,该路径下有一个version.txt文档,里面记录了cuda的版本信息 cat /usr/local ...
- reduce内置高阶函数求和
>>> def f(x, y): ... return x+y ... >>> reduce(f, a, ) >>> reduce(lambda ...
- Swing用户界面开发工具包开发记录
Swing是一个用于开发Java应用程序用户界面的开发工具包. 以抽象窗口工具包(AWT)为基础使跨平台应用程序可以使用任何可插拔的外观风格. Swing开发人员只用很少的代码就可以利用Swing丰富 ...
- EXP 导出出错解决方案
前言: 今天想要把 当前用户下的数据库 导出来,使用命令 导出数据库可用语句: exp bpmp/bkc123@127.0.0.1:5050/bkcyunty file=D:\bak\db_61.dm ...
- 惊艳的HTML5动画特效及源码
今天我们要来分享一些很酷的HTML5动画演示,HTML5的强大之处在于它可以利用canvas的特性来绘制很多普通网页无法完成的图形和动画,canvas就像一块超级画板,在上面不仅可以实现平面图形,而且 ...
- 9款赏心悦目的HTML5/CSS3应用特效
经过几天的收集,在html5tricks网站上又增加了不少HTML5的教程和应用,今天我把几款赏心悦目的HTML5/CSS3应用特效总结了一下,一共9款HTML5特效,分享给大家. 1.HTML5 W ...
- Linux环境安装PostgreSQL-10.1[转]
环境及资源 Linux版本:CentOS release 6.5 PostgresSQL版本:postgresql-10.1 PostgreSQL官网下载地址:https://www.postgres ...