atitit.html5动画特效----打水漂 ducks_and_drakes
1. 原理
使用多重抛物线的原理即可。
.
作者:: 老哇的爪子 Attilax 艾龙， EMAIL:[email protected]
转载请注明来源： http://blog.csdn.net/attilax
2. fly jquery插件
script src="jquery.js"></script>
<script src="dist/jquery.fly.min.js"></script>
<script>
jQuery(function($) {
$('#fly').fly({
start:{
left: 11, //开始位置（必填）#fly元素会被设置成position: fixed
top: 600, //开始位置（必填）
},
end:{
left: 500, //结束位置（必填）
top: 130, //结束位置（必填）
width: 100, //结束时高度
height: 100, //结束时高度
},
autoPlay: false, //是否直接运动,默认true
speed: 1.1, //越大越快，默认1.2
vertex_Rtop：100, //运动轨迹最高点top值，默认20
onEnd: function(){} //结束回调
});
$('#fly').play(); //autoPlay: false后，手动调用运动
$('#fly').destroy(); //移除dom
});
</script>
IE10以下，引入src/requestAnimationFrame.js
IE10以下，引入src/requestAnimationFrame.js
注意的地方：：只能抛出一次的解决
$("#stone").data('fly',null);
3. ---------code
prj。vod2
function ducks_and_drakes()
{
var times=5;
// var perHiReduce=0.9;
var perFarReduce=0.85;
var start_left=screen.width;
// var end_left=1000;
var start_top=300;
// var end_top=500;
// var cur_hi=0;
// var cur_left=0;
var first_step_len=500;
// var last_stepLen=100;
// var first_step_hi=80;
var sec_left;
var sec_left_step;
function fadeInX(objs,i)
{
if(i>times)
{
console.log("--end");
return;
}
// last_left=cur_left;
sec_left_step= first_step_len*(perFarReduce);
sec_left=start_left-sec_left_step;
console.log("---start_left"+start_left+" sec-left:"+sec_left);
//'<img class="test" src="pic.jpg"></img>'
// static
// $("#stone").css("position","static");
console.log( $("#stone"));
var flyobj= $("#stone").fly({
start: {top: start_top, left: start_left},
end: {top: start_top, left: sec_left },
speed: 1.8,
autoPlay: true, //def is true
// vertex_Rtop:100,
onEnd: function(){
// alert('End');
start_left=sec_left;
first_step_len=sec_left_step;
console.log("---next :"+start_left+">>++"+first_step_len);
$("#stone").data('fly',null);
// setTimeout(function() {
fadeInX(objs,i+1);
// }, 500 );
// this.destory();
}
}); //end fly
// alert(obj);
// console.log(obj);
// console.log(flyobj);
// flyobj.play();
}
fadeInX(null,1);
}
4. 参考
基于jquery.fly模仿天猫抛物线加入购物车特效代码_懒人之家.htm
更多详细内容可参考作者github：https://github.com/amibug/fly