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

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

 

1. 原理 1

2. fly jquery插件 1

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

4. 參考 4

 

1. 原理

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

.

 

作者:: 老哇的爪子 Attilax 艾龙，  EMAIL:[email protected]

转载请注明来源： http://blog.csdn.net/attilax

 

2. fly jquery插件

 script src="jquery.js">

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);

   //''

   

 //  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