css沿曲线进行动画,jQuery沿贝兹曲线运动动画特效

特效描述：jQuery 沿贝兹曲线运动 动画特效。jQuery沿贝兹曲线运动动画特效

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

10条曲线

开始动画

Plot

10条贝兹曲线

开始动画

Plot

自定义路径：正弦波

开始动画

Plot

var SineWave = function() {

this.css = function(p) {

var s = Math.sin(p*20)

var x = 500 - p * 300

var y = s * 50 + 150

var o = ((s+2)/4+0.1)

return {top: y + "px", left: x + "px", opacity: o}

}

};

$().ready(function() {

var Paths = {"arc":[], "bezier":[], "sine": []}

var path_fns = {

arc: function(i) {

return new $.path.arc({

center: [285,185],

radius: 100,

start: -i*20,

end: i*100,

dir: (i%2) ? 1 : -1

})

},

bezier: function(i) {

var x = i%2 ? 1 : -1

return new $.path.bezier({

start: { x:185, y:185, angle: i*20 * x},

end: {x:540,y:110, angle: i*10, length: i / 4.0}

})

},

sine : function() {

return new SineWave

}

}

for(var type in Paths) {

for(var i=0; i<10; i++ ) {

if(type == "sine" && i != 9)

continue

var path = path_fns[type](i)

Paths[type].push(path)

var css = {

"backgroundColor": (i%2) ? "red" : "yellow",

width: 20*(1+i),

height: 20*(1+i),

"-moz-border-radius": 10*(1+i),

"-webkit-border-radius": 10*(1+i),

marginLeft: -10*(1+i), // offset the div, so center is at origin

marginTop: -10*(1+i)

}

var $$ = $("").css(css)

// initialize to start

$$.css(path.css(1))

$("#" + type).append($$)

}

}

$(".start").click(function() {

var i =0;

var type = $(this).closest("div").attr("id")

$("#" + type + " .pixel").each(function() {

$(this).stop().animate({path: Paths[type][i] }, 3000)

i++;

})

})

$(".plot").click(function() {

var $$ = $("

")

var type = $(this).closest("div").attr("id")

for(var t=0; t<1;t+= 0.01) {

for(var i in Paths[type]) {

var d = $("").css(Paths[type][i].css(t))

$$.append(d)

}

}

$("#" + type ).append($$)

})

})