jQuery模拟抛物线轨迹动画

最新推荐文章于 2021-02-27 07:41:37 发布

今晚打酱油8

最新推荐文章于 2021-02-27 07:41:37 发布

阅读量3.9k

点赞数

分类专栏： Ajax JavaScript 前台页面制作

Ajax JavaScript 前台页面制作专栏收录该内容

73 篇文章 1 订阅

订阅专栏

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

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

在线演示源码下载

下面简单了解一下实现这个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>

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