动画曲线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 ...
随机推荐
- 为什么java的构造方法中this()或者super()要放在第一行
java的构造方法中如果自己显性的调用super()的时候一定要放在第一行,如不是的话就会报错. 为什么一定要在第一行? super()在第一行的原因就是: 子类有可能访问了父类对象, 比如在构造函数 ...
- 25.最小生成树（kruskal算法）
时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题解 查看运行结果 题目描述 Description 农民约翰被选为他们镇的镇长!他其中一个竞选承诺就是在镇上建立 ...
- zoj 3621 Factorial Problem in Base K 数论 s!后的0个数
Factorial Problem in Base K Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.zju.edu.cn/onli ...
- centos安装pcre
安装pcre前需要已安装gcc工具 1.跳转下载目录 cd install-file 2.下载pcre wget ftp://ftp.csx.cam.ac.uk/pub/software/progra ...
- Microcontroller measures resistance without an ADC
Sensors automate most of the processes in industry. Most of these sensors, such as those for ammonia ...
- TSearch & TFileSearch Version 2.2 -Boyer-Moore-Horspool search algorithm
unit Searches; (*-----------------------------------------------------------------------------* | Co ...
- 无线遥控检测仪 A890-RES
本产品为无线遥控接收器发射器的生产调试项目开发而设计,能自动识别接收并显示遥控器的所有信息:频率.芯片类型.周期.地址码.数据码,并能自动计算振荡阻值,35组自动保存.315M.433M 双频同时待机 ...
- IDA IDC Tutorials: Additional Auto-Commenting
https://www.hex-rays.com/products/ida/support/tutorials/idc/autocomment.shtml This program creates a ...
- win8升级8.1提示卸载sentinel runtime drivers
Win8升级8.1时提示需卸载sentinel runtime drivers的解决方法 第一步:打开sentinelcustomer.safenet-inc.com/sentineldownload ...
- linux中的dup()系统调用
参考1:http://www.blogjava.net/lihao336/archive/2011/12/13/366231.html 在linux纷繁复杂的内核代码中,sys_dup()的代码也许称 ...