html绘制函数曲线,JS+CSS动态绘制元素曲线运动轨迹(数学函数)

相信许多小伙伴都想知道CSS+JS如何实现物体的曲线运动吧！

其实原理就是运用数学用的函数公式，本文运用的是sin函数上进行的基础变形.

今天的主要目标就是让这张图的里足球运动起来。

首先肯定要先把这张图拆成两部分，这里我是用美图秀秀的抠图功能把足球扣出来的，再用消除笔把足球在原图中消除掉。得到以下的2张图。

注意，足球必须是png，图片，这样在图片上运动的时候才不会把原图中的背景覆盖掉，形成正方形的白块。

index.html文件内容，没什么特别的。就不用多说了

CSS样式也挺一般！

css_index.css

*{

margin: 0px;

padding: 0px;

}

body{

height: 900px;

width: 1440px;

}

.bg{

width: 100%;

height: 100%;

}

#ball{

position: absolute;

width: 100px;

height:100px;

left: 400px;

top: 350px;

}

接下来就是最核心的JS部分了。

js_index.js文件

var l=400;//球的left距离

var t=350;//球的top距离

var a=1;//计数器

var pi = 3.14;//pi

$(document).ready(function(){

window.setInterval("ball_go()",5);//让球每隔5毫秒运动一次即 每五秒执行一次ball_go函数

})

function ball_go(){

var i= document.getElementById("ball");

var change =parseInt(sport_line(l-a));

i.style.transform = 'rotate('+a*10+'deg)';//让球开始旋转

console.log(t);

//当球抵达目标位置的时候，球停止曲线运动,即a=280的时候球不再曲线运动，只进行旋转

if(a<=280){

i.style.left = (l-a)+"px";

i.style.top  = (change)+"px";

}

a++;

}

//运动曲线

function sport_line(x){

var y;

y= 115-Math.sin((x-100)/200*pi)*235;//决定球运动轨迹的函数,公式理解需一定数学基础，理解sin函数的人应该不会陌生，画出曲线图应该可以理解

return y;

}

大致就这样，挺简单了，相信各位都能看懂吧！当然网上也有工具可以自定义生成运动轨迹，大家可以去看看！

下面附有完整的文件，解压后就可以直接运行！

http://download.csdn.net/detail/shanamaid/9486577

非常抱歉

之前上传的代码JS部分有个符号打成中文的了

导致无法出现足球运动的效果，现在已经修正并重新上传！