atitit.html5动画特效----打水漂 ducks_and_drakes

atitit.html5动画特效----打水漂 ducks_and_drakes



1. 原理 1

2. fly jquery插件 1

3. ---------code 2

4. 参考 4

1. 原理

使用多重抛物线的原理即可。

.



作者:: 老哇的爪子 Attilax 艾龙， EMAIL:1466519819@qq.com

转载请注明来源： 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