<!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的更多相关文章

  1. 二次、三次贝塞尔曲线demo(演示+获取坐标点)

    二次贝塞尔曲线demo: See the Pen quadraticCurveDemo by hanyanjun (@hanyanjun) on CodePen. 我的demo地址(二次) 推荐点击以 ...

  2. unity, 查看.anim中的动画曲线（和帧）

    在场景里建一个gameObject,添加一个Animation组件,将.anim文件添加到Animation组件的Animations中,然后在Animation组件面板中选中.anim,然后 菜单- ...

  3. Android动画曲线库AndroidEasingFunctions

    Android动画曲线库AndroidEasingFunctions AndroidEasingFunction是基于Easing Function(缓动函数)的Android动画曲线库.它提供了九大 ...

  4. Flutter学习笔记（37）--动画曲线Curves 效果

    如需转载,请注明出处:Flutter学习笔记(37)--动画曲线Curves 效果

  5. iOS—图片编辑,文字下落动画的Demo

    仿照Mac上的截图编辑功能做的一个图片编辑的Demo,功能有画矩形,圆形,箭头,手写,输入文字和分享. 做的时候看到一个大神的帖子写的一个文字动画的教程,故顺带学习做了一个类似的文字下落动画. 有兴趣 ...

  6. 完整版百度地图点击列表定位到对应位置并有交互动画效果demo

    1.前言 将地图嵌入到项目中的需求很多,好吧,我一般都是用的百度地图.那么今天就主要写一个完整的demo.展示一个列表,点击列表的任一内容,在地图上定位到该位置,并有动画效果.来来来,直接上demo  ...

  7. ObjectAnimator属性动画应用demo

    感谢慕课网--eclipse_xu 布局文件:activity_main.xml <FrameLayout xmlns:android="http://schemas.android. ...

  8. CSS3动画常用demo

    1.border动画 2.闪动动画(一闪一闪亮晶晶,满天都是小星星) .blink { animation: mymove 0.8s infinite; -webkit-animation: mymo ...

  9. 代码：css3动画效果demo

    四行文字会逐次掉落:  如果要停留在最后一帧的动画,注意要用forwards,不要用both. <style type="text/css"> @-webkit-key ...

随机推荐

  1. jquery 常用获取值得方法汇总

    jquery取radio单选按钮的值$("input[name='items']:checked").val();jquery radio取值,checkbox取值,select取 ...

  2. Intelij Idea下的git使用

    一.简介 在我们入门软件研发并且是团队开发的时候,总会遇到这样合代码这么简单粗暴的工作,最开始我也能体会到这项工作折磨.那git是干什么得呢?简称分布式版本控制系统,常见就是上传代码.整合代码.更新代 ...

  3. [置顶] linux学习之静态库和动态库的制作与使用

    linux中静态库和动态库的制作与使用 一.静态链接库 1.首先编写模块程序example.c.example.h 2.使用gcc -c example.c -o example.o编译example ...

  4. ssl 复制

    http://www.ttlsa.com/mysql/mysql-replication-base-on-ssl/ http://www.tuicool.com/articles/mi2iaq htt ...

  5. 《Objective-C开发经典教程》

    <Objective-C开发经典教程> 基本信息 原书名:Beginning Objective-C 原出版社: Apress 作者: (美)James Dovey    Ash Furr ...

  6. feedparser win7 python 安装

    要获取订阅源读取当中的内容,Universal Feed Parser提供了非常多的API,这里说下详细的配置. 我的配置环境: win7 + python 2.7.5 步骤: 1.下载feedpar ...

  7. 数学图形(1.26)Clairaut曲线

    像瓜子样的曲线 相关软件参见:数学图形可视化工具,使用自己定义语法的脚本代码生成数学图形.该软件免费开源.QQ交流群: 367752815 #http://www.mathcurve.com/cour ...

  8. longest-palindrome

    https://leetcode.com/problems/longest-palindrome/ public class Solution { public int longestPalindro ...

  9. powerdesigner 16.5 破解步骤

    假设你的PowerDesigner已经安装完成.(PowerDesigner下载地址:http://pan.baidu.com/s/1mgqjmpa) 1. 从网上下载PowerDesigner165 ...

  10. java中 HashMap和Hashtable,list、set和map 的区别

    摘自: http://blog.chinaunix.net/uid-7374279-id-2057584.html HashMap是Hashtable的轻量级实现(非线程安全的实现),他们都完成了Ma ...