jquery抛物线动画代码怎么实现

JavaScript013

jquery抛物线动画代码怎么实现,第1张

方法/步骤

1

首先需要引入一个jquery.fly.min.js文件(可自行搜索,也可以在本人的百度云盘中找到)

2

设置抛物线的位置(起点也可以是整个页面的可点击区域,即body):

抛物线起点,此例中为.left_btn(标签的classname)

抛物线终点,此例中为.gwcimg(标签的classname)

3

创建JS方法:

$('.left_btn').on('click', addProduct)

function addProduct(event){

var offset = $(".gwcimg").offset(),

//抛物线图片,可自行更改

flyer = $('<img src="brandmarket/image/gwc.png" width="36" height="36">')

flyer.fly({

start: {

left: event.pageX,

top: event.pageY

},

end: {

left: offset.left,

top: offset.top,

//抛物线完成后留在页面上的图片大小

width: 20,height: 20

}

})

}

4

大致有两种效果,一种是每添加一次就在购物车的数字上加一,数字显示的位置可以用CSS样式控制,然后把上一步中“抛物线完成后留在页面上的图片大小”中宽高值都设置为0,效果如下:

5

另一种是将数字用图片代替,此为默认的效果,改变浏览器大小的时候,用来代替的图片会一直停留在绝对位置,效果如下:

http://jingyan.baidu.com/article/ceb9fb10c13bac8cac2ba05a.html

在unity中画抛物线的方法,代码如下:

抛物线公式y=a*x*x+b*x+ca>0,开口向上

a<0,开口向下。b=0,抛物线对称轴为y轴。c=0,抛物线经过原点。

获取一些抛物线上的点,然后相邻的两点和原点画三角面,这样可以用三角面拼成了“抛物面”了,

而且还可以通过修改a的值来改变小山峰的陡峭程度。

直接晒代码 Parabola.js :

private var a:int//a>0,开口向上a<0,开口向下。

private var b:int//b=0,抛物线对称轴为y轴

private var c:int//c=0,抛物线经过原点

private var size:int

function Start () {

a=-1

b=0

c=0

size=22

gameObject.AddComponent("MeshFilter")

gameObject.AddComponent("MeshRenderer")

var mesh : Mesh = GetComponent(MeshFilter).mesh

mesh.Clear()

var v:Vector3[]=new Vector3[size]

var v2:Vector2[]=new Vector2[size]

var index:int []=new int[(size-2)*3]

for(var i:int=0i

if(i==0)

{

v[i]=Vector3(0,-1,0)

}

else

{

var x:float=(i-size/2)*0.1

v[i].x=x

v[i].y=a*x*x+b*x+c

v[i].z=0

}

if(i>1){

index[3*i-6]=0

index[3*i-5]=i-1

index[3*i-4]=i

}

print("v["+i+"]="+v[i])

}

mesh.vertices = v

mesh.uv = v2

mesh.triangles = index

for(var j:int=0j

print(j+"=="+index[j])

}

}

这种做法其实不难的 不知道你需要的来回自己移动到地点了回滚还是到地点了停住??

这个要用的无非就是一个定时器来回重复执行改变这个div的left和top坐标(因为你要的斜线移动),来达到移动的效果,其实真正的难点就应该是这个公式了,比如你是要它匀速还是加速运动? 这个公式就要好好考虑了