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