动画曲线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 ...
随机推荐
- Codeforces Round #346 (Div. 2) F. Polycarp and Hay 并查集 bfs
F. Polycarp and Hay 题目连接: http://www.codeforces.com/contest/659/problem/F Description The farmer Pol ...
- HDU 4496 D-City （并查集，水题）
D-City Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others)Total Subm ...
- How to use transparent PNG icons with Delphi ImageList
http://www.aha-soft.com/faq/delphi-imagelist-png.htm Query: "Embarcadero Delphi ImageList does ...
- Linux X86-64 进程内存空间布局
http://blog.csdn.net/woshinia/article/details/41722085 http://www.lenky.info/archives/2012/04/1424 h ...
- tomcat JVM内存 配置
原文:http://elf8848.iteye.com/blog/467460 常见的内存溢出有以下两种: java.lang.OutOfMemoryError: PermGen space java ...
- Unity3D面试题总结
一．什么是渲染管道? 是指在显示器上为了显示出图像而经过的一系列必要操作. 渲染管道中的很多步骤,都要将几何物体从一个坐标系中变换到另一个坐标系中去. 主要步骤有: 本地坐标->视图坐标-> ...
- Python continue 语句
Python continue 语句 Python continue 语句跳出本次循环,而break跳出整个循环. continue 语句用来告诉Python跳过当前循环的剩余语句,然后继续进行下一轮 ...
- MySQL Cluster(MySQL 集群) 初试
MySQL Cluster 是MySQL适合于分布式计算环境的高实用.高冗余版本.它采用了NDB Cluster 存储引擎,允许在1个 Cluster 中运行多个MySQL服务器.在MyQL 5.0及 ...
- Andorid之Annotation框架初使用（一）
1. 设置Activity的布局 @EActivity(R.layout.main) public class MyActivity extends Activity {} 注: 此时在Android ...
- gpu和cpu区别
GPU的功耗远远超过CPUCache, local memory: CPU > GPU Threads(线程数): GPU > CPURegisters: GPU > CPU 多寄存 ...