jQuery模拟抛物线轨迹动画

来源：互联网发布：linux解压t命令gunzip 编辑：程序博客网时间：2024/05/24 03:18

http://www.html5tricks.com/jquery-parabola.html

利用jQuery和HTML5可以模拟很多数学中的函数图象，比如HTML5 Canvas正弦波动画。今天我们要介绍一个用jQuery实现简单的模拟抛物线轨迹的插件，可以开始和暂停抛物线的运动，以及重新设置抛物线的参数。

jquery-parabola

在线演示源码下载

下面简单了解一下实现这个jQuery抛物线运动的过程。

HTML代码：

<div class="btns" style="margin-top:20px">    <a href="javascript:;" id="run">run</a>    <a href="javascript:;" id="reset">reset</a>        <a href="javascript:;" id="stop">stop</a>    <a href="javascript:;" id="setOptions">setOptions</a></div><div id="boll" class="boll"></div><div id="target" class="target"></div>

CSS代码：

.btns{text-align:center;}.btns a{color:#fff;padding:5px 10px;font-family:Arial;background-color:#f90;text-decoration:none;}.boll {width: 50px;height: 50px;background-color: #ff3333;position: absolute;top: 380px;left: 100px;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;}.target {width: 50px;height: 50px;background-color: #CDCDCD;position: absolute;top: 180px;left: 600px;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;}

引入我们的jQuery库和抛物线插件库：

<script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/parabola.js"></script>

最后是JavaScript调用：

<script type="text/javascript">    var bool = new Parabola({        el: "#boll",        offset: [500, 100],        curvature: 0.005,        duration: 2000,        callback:function(){            alert("完成后回调")        },        stepCallback:function(x,y){            console.log(x,y);            $("<div>").appendTo("body").css({                "position": "absolute",                "top": this.elOriginalTop + y,                "left":this.elOriginalLeft + x,                "background-color":"#CDCDCD",                "width":"5px",                "height":"5px",                "border-radius": "5px"            });        }    });    $("#reset").click(function () {        bool.reset()    });    $("#run").click(function () {        bool.start();    });    $("#stop").click(function () {        bool.stop();    });    $("#setOptions").click(function () {        bool.setOptions({            targetEl: $("#target"),            curvature: 0.001,            duration: 1000        });    });</script>

其实实现起来也并不难，主要运用了数学转换的概念，你学要对抛物线的物理学原理非常清楚。

0 0