动画曲线demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> <body> <h3 style=" text-align:center; color:#7DC2E6; clear:both;">动画曲线demo</h3> <div style="border: 2px solid #7DC2E6; height: 300px; position:relative; " id="idChart"></div> <div>
<p style="width:580px; height:120px; border:2px solid #7DC2E6; float:left;"><br>
Tween类型： <br>
<label>
<input type="radio" checked="checked" value="Linear" name="vTween">
Linear </label>
<label>
<input type="radio" value="Quad" name="vTween">
Quadratic </label>
<label>
<input type="radio" value="Cubic" name="vTween">
Cubic </label>
<label>
<input type="radio" value="Quart" name="vTween">
Quartic </label>
<label>
<input type="radio" value="Quint" name="vTween">
Quintic </label>
<label>
<input type="radio" value="Sine" name="vTween">
Sinusoidal </label>
<br>
<label>
<input type="radio" value="Expo" name="vTween">
Exponential </label>
<label>
<input type="radio" value="Circ" name="vTween">
Circular </label>
<label>
<input type="radio" value="Elastic" name="vTween">
Elastic </label>
<label>
<input type="radio" value="Back" name="vTween">
Back </label>
<label>
<input type="radio" value="Bounce" name="vTween">
Bounce </label>
</p>
<p style="width:580px; height:70px; border:2px solid #7DC2E6; float:left; margin-left:20px;">ease类型： <br>
<label>
<input type="radio" checked="checked" value="easeIn" name="vEase">
easeIn </label>
<label>
<input type="radio" value="easeOut" name="vEase">
easeOut </label>
<label>
<input type="radio" value="easeInOut" name="vEase">
easeInOut </label>
</p>
</div>
</body>
</html>
<script> var Tween = {
Linear: function(t,b,c,d){ return c*t/d + b; },
Quad: {
easeIn: function(t,b,c,d){
return c*(t/=d)*t + b;
},
easeOut: function(t,b,c,d){
return -c *(t/=d)*(t-2) + b;
},
easeInOut: function(t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * (( t)*(t-2) - 1) + b;
}
},
Cubic: {
easeIn: function(t,b,c,d){
return c*(t/=d)*t*t + b;
},
easeOut: function(t,b,c,d){
return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOut: function(t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
}
},
Quart: {
easeIn: function(t,b,c,d){
return c*(t/=d)*t*t*t + b;
},
easeOut: function(t,b,c,d){
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOut: function(t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
}
},
Quint: {
easeIn: function(t,b,c,d){
return c*(t/=d)*t*t*t*t + b;
},
easeOut: function(t,b,c,d){
return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOut: function(t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
}
},
Sine: {
easeIn: function(t,b,c,d){
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOut: function(t,b,c,d){
return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOut: function(t,b,c,d){
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}
},
Expo: {
easeIn: function(t,b,c,d){
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOut: function(t,b,c,d){
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOut: function(t,b,c,d){
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
return c/2 * (-Math.pow(2, -10 * t) + 2) + b;
}
},
Circ: {
easeIn: function(t,b,c,d){
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOut: function(t,b,c,d){
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOut: function(t,b,c,d){
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
}
},
Elastic: {
easeIn: function(t,b,c,d,a,p){
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOut: function(t,b,c,d,a,p){
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);
},
easeInOut: function(t,b,c,d,a,p){
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
}
},
Back: {
easeIn: function(t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOut: function(t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOut: function(t,b,c,d,s){
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
},
Bounce: {
easeIn: function(t,b,c,d){
return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
},
easeOut: function(t,b,c,d){
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
easeInOut: function(t,b,c,d){
if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b;
else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
}
}
} /*自定义函数*/ var $$ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
}; var Each = function(list, fun){
for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
}; /*自定义函数*/ var fun, iChart = 550, iDuration = 100; //用div绘制曲线
function Chart(){
var a = [];
for (var i = 1; i < iChart; i++) {
a.push('<div style="background-color:#f60;font-size:0;width:3px;height:3px;position:absolute;left:' + (i-1) + 'px;top:' + (Math.ceil(fun(i,300,-300,iChart))) + 'px;"><\/div>');
}
$$("idChart").innerHTML = a.join("");
} //////////////////////////////////////////////////////// var arrTween = document.getElementsByName("vTween");
var arrEase = document.getElementsByName("vEase"); Each(arrTween, function(o){ o.onclick = function(){ SetFun(); Chart(); } })
Each(arrEase, function(o){ o.onclick = function(){ SetFun(); Chart(); } }) //获取曲线方程式
function SetFun(){
var sTween, sEase;
Each(arrTween, function(o){ if(o.checked){ sTween = o.value; } })
Each(arrEase, function(o){ if(o.checked){ sEase = o.value; } })
fun = sTween == "Linear" ? Tween.Linear : Tween[sTween][sEase];
} </script>
效果图：
动画曲线demo的更多相关文章
- 二次、三次贝塞尔曲线demo(演示+获取坐标点)
二次贝塞尔曲线demo: See the Pen quadraticCurveDemo by hanyanjun (@hanyanjun) on CodePen. 我的demo地址(二次) 推荐点击以 ...
- unity, 查看.anim中的动画曲线（和帧）
在场景里建一个gameObject,添加一个Animation组件,将.anim文件添加到Animation组件的Animations中,然后在Animation组件面板中选中.anim,然后 菜单- ...
- Android动画曲线库AndroidEasingFunctions
Android动画曲线库AndroidEasingFunctions AndroidEasingFunction是基于Easing Function(缓动函数)的Android动画曲线库.它提供了九大 ...
- Flutter学习笔记（37）--动画曲线Curves 效果
如需转载,请注明出处:Flutter学习笔记(37)--动画曲线Curves 效果
- iOS—图片编辑,文字下落动画的Demo
仿照Mac上的截图编辑功能做的一个图片编辑的Demo,功能有画矩形,圆形,箭头,手写,输入文字和分享. 做的时候看到一个大神的帖子写的一个文字动画的教程,故顺带学习做了一个类似的文字下落动画. 有兴趣 ...
- 完整版百度地图点击列表定位到对应位置并有交互动画效果demo
1.前言 将地图嵌入到项目中的需求很多,好吧,我一般都是用的百度地图.那么今天就主要写一个完整的demo.展示一个列表,点击列表的任一内容,在地图上定位到该位置,并有动画效果.来来来,直接上demo ...
- ObjectAnimator属性动画应用demo
感谢慕课网--eclipse_xu 布局文件:activity_main.xml <FrameLayout xmlns:android="http://schemas.android. ...
- CSS3动画常用demo
1.border动画 2.闪动动画(一闪一闪亮晶晶,满天都是小星星) .blink { animation: mymove 0.8s infinite; -webkit-animation: mymo ...
- 代码：css3动画效果demo
四行文字会逐次掉落: 如果要停留在最后一帧的动画,注意要用forwards,不要用both. <style type="text/css"> @-webkit-key ...
随机推荐
- SQL Server 事务复制爬坑记
SQL Server 复制功能折腾了好几天了,现特将其配置过程以及其间遇到的问题记录下来,以备日后查阅.同时,也让“同道”同学们少走不必要的弯路.如果有不对之处,欢迎大家指正,欢迎沟通交流. 一.复制 ...
- Microsoft Visual Studio 2010导致系统C盘不断增大问题处理。
一直用Microsoft Visual Studio 2010做开发,发现最近C盘空间是越来越小,一开始以为是IE或者一些系统补丁造成的临时文件,但是使用360,windows优化大师之类的软件都清过 ...
- Git 中文件的状态和流转区
Git的文件主要处于三种状态,分别是 staged, modified, committed. Git文件流转有三个区域,分别是 工作区域. 索引区域. 本地数据区域. 要修改对一个文件进行操作,首先 ...
- GCC安装UBUNTU
在Ubuntu下安装GCC和其他一些Linux系统有点不一样. 方法一: 该方法超简单:sudo apt-get build-depgcc 就上面这条命令就可以搞定 方法二:sudo apt-get ...
- 关闭OOMER
http://www.cnblogs.com/itfriend/archive/2011/12/14/2287160.html http://blog.csdn.net/gugemichael/art ...
- js继承——到继承结束
说到继承,其它语言里可能有两种: 接口继承是继承方法签名,而实现继承则继承实际方法.ES函数没有签名,不能实现接口继承,只支持实现继承,而实现继承主要依靠原型链.(这两句话,说来轻松,理解来不易,且行 ...
- windows系统上安装与使用Android NDK r8d(二)
四. 在eclipse中集成c/c++开发环境 1. 装Eclipse的C/C++环境插件:CDT,这里选择在线安装. 首先登录http://www.eclipse.or ...
- shell练习题
一.编写一个脚本使我们在写一个脚本时自动生成”#!/bin/bash”这一行和注释信息. 原文代码为: Shell 1 2 3 4 5 6 7 8 9 10 #!/bin/bash ...
- (windows)一台电脑上安装两个Mysql服务
原文:https://my.oschina.net/u/1472917/blog/410732 最近需要在一台电脑上安装两个Mysql服务,需求稍微有些奇怪,但确实很必要.本人原本为了本机测试Word ...
- Linux下查找命令(收集整理）
原文:http://blog.csdn.net/sunstars2009918/article/details/8510878 一.Linux查找文件的相关命令 常 用 命 令 简要中文说明 程序所在 ...