欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS彈性運動實現方法分析

 更新時間:2016年12月15日 12:03:36   作者:鬼畜十三  
這篇文章主要介紹了JS彈性運動實現方法,結合實例形式分析了JS實現彈性運動的原理、相關技術細節(jié)與實現技巧,需要的朋友可以參考下

本文實例分析了JS彈性運動實現方法。分享給大家供大家參考,具體如下:

描述:像彈簧一樣左右彈動,最后緩慢停下來

一、加減速運動

1.加速運動

var iSpeed=0;
iSpeed++;

速度越來越快,最后沖出去

2.減速運動

var iSpeed=20;
iSpeed--;

速度越來越慢,降到0后開始變負值往反方向運動

二、彈性運動

1.在目標點左邊,加速;目標點右邊,減速,如

if(div1.offsetLeft<300){
 iSpeed=iSpeed+1;  //等同iSpeed++;
}
else{
 iSpeed=iSpeed-1;
}

這是最簡單的彈性運動,缺陷:加速度恒定(應該根據松緊帶而變)

if(div1.offsetLeft<300){
 iSpeed=iSpeed+(300-div1.offsetLeft)/50; 
}
else{
 iSpeed=iSpeed-(div1.offsetLeft-300)/50;
}
iSpeed=iSpeed+(300-div1.offsetLeft)/50; ==>iSpeed=iSpeed+300/50-div1.offsetLeft/50;
iSpeed=iSpeed-(div1.offsetLeft-300)/50; ==>iSpeed=iSpeed-div1.offsetLeft/50+300/50;

這兩個完全一樣 所以不需要if/else

iSpeed+=(300-div1.offsetLeft)/50; 
div1.style.left=div1.offsetLeft+iSpeed+'px';

缺陷2:不會停下來(缺少摩擦力)

iSpeed+=(300-div1.offsetLeft)/50; 
iSpeed*=0.95; //乘一個小數,越來越小
div1.style.left=div1.offsetLeft+iSpeed+'px';

三、帶摩擦力的彈性運動

比較好的組合

iSpeed+=(300-div1.offsetLeft)/5; 
iSpeed*=0.7;

注:var iSpeed=0;要放在定時器外面,不然每次都從0開始,加啊乘啊就沒用了

四、整合好的彈性運動框架

var iSpeed=0;
var left=0;
function startMove(obj,iTarget){
 clearInterval(obj.timer);
 obj.timer=setInterval(function(){
  iSpeed+=(iTarget-obj.offsetLeft)/5;
  iSpeed*=0.7;  //計算出來的速度是一個小數,如果給它取整,會一直左右移動
  left+=iSpeed;  //把速度存在變量里,變量是可以有小數的
  if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){ //因為iSpeed和left都是小數,所以永遠達不到0和目標點,只能無限接近
   clearInterval(obj.timer);  //雖然速度最后接近于0,看似運動停止了,但定時器還一直開著,所以當速度=0并且到達目標點,關掉(只是速度=0關掉,運動到最右邊準備回來那一剎那,速度=0,同理只是到達目標點關掉,一開始往右運動經過中間時會達到目標點,所以必須兩者同時滿足)
   obj.style.left=iTarget+'px'; //小數無法完全貼合,所以最后直接讓他等于目標點,一般人肉眼看不出來
  }
  else{
   obj.style.left=left+'px';  //style.left只能是一個整數,所以每次會把小數抹掉,誤差是累計的,最終累加起來就會有1-2像素,用obj.offsetLeft+iSpeed就會無法完全貼合
  }
 },30);
};

五、彈性運動不適用的地方

樣式會過界的

比如高度,先變大后變小,如果物體本身高度很小,可能會變成負值,就不對了

更多關于JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結

希望本文所述對大家JavaScript程序設計有所幫助。

相關文章

  • Javascript 讀取操作Sql中的Xml字段

    Javascript 讀取操作Sql中的Xml字段

    把Xml字段先讀出來,然后用Js去操作,這樣豈不是簡單了許多,于是網上搜索了一些JS讀Xml字段信息的方法
    2014-10-10
  • js通過window.open(url)下載文件并修改文件名

    js通過window.open(url)下載文件并修改文件名

    這篇文章主要給大家介紹了關于js如何通過window.open(url)下載文件并修改文件名的相關資料,我們知道下載文件是一個非常常見的需求,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2023-08-08
  • 基于JavaScript實現在新的tab頁打開url

    基于JavaScript實現在新的tab頁打開url

    這篇文章主要介紹了基于JavaScript實現在新的tab頁打開url 的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2016-08-08
  • Javascript發(fā)送AJAX請求實例代碼

    Javascript發(fā)送AJAX請求實例代碼

    這篇文章主要介紹了Javascript發(fā)送AJAX請求的實例代碼,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2016-08-08
  • 淺談讓你的代碼更簡短,更整潔,更易讀的ES6小技巧

    淺談讓你的代碼更簡短,更整潔,更易讀的ES6小技巧

    這篇文章主要介紹了淺談讓你的代碼更簡短,更整潔,更易讀的ES6小技巧,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-10
  • 從理論角度討論JavaScript閉包

    從理論角度討論JavaScript閉包

    本文將介紹一個在JavaScript經常會拿來討論的話題 —— 閉包(closure)。 閉包其實已經是個老生常談的話題了; 有大量文章都介紹過閉包的內容, 盡管如此,這里還是要試著從理論角度來討論下閉包, 看看ECMAScript中的閉包內部究竟是如何工作的
    2019-04-04
  • 從js向Action傳中文參數出現亂碼問題的解決方法

    從js向Action傳中文參數出現亂碼問題的解決方法

    Action獲取jsp表單中的中文參數,只要整個項目都采用UTF-8編碼格式都不會出現亂碼問題;但JSP中用到JS,并從JS向Action傳中文參數,就會出現中文亂的現象
    2013-12-12
  • 簡單漂亮的js彈窗可自由拖拽且兼容大部分瀏覽器

    簡單漂亮的js彈窗可自由拖拽且兼容大部分瀏覽器

    js彈窗想必大家都有見到過吧,如何要說可以自由拖拽,并兼容大部分瀏覽器的就沒有幾個了吧,本文的這個示例或許是大家要找的,可以參考下
    2013-10-10
  • js 去掉空格實例 Trim() LTrim() RTrim()

    js 去掉空格實例 Trim() LTrim() RTrim()

    js 去掉空格實例Trim(),LTrim(),RTrim() 需要的朋友可以過來參考下,希望對大家有所幫助
    2014-01-01
  • javascript循環(huán)鏈表之約瑟夫環(huán)的實現方法

    javascript循環(huán)鏈表之約瑟夫環(huán)的實現方法

    這是一道比較經典的循環(huán)鏈表問題,在華為上機筆試中也出現過。 約瑟夫環(huán)是一個數學的應用問題,下面這篇文章主要就給大家介紹了javascript循環(huán)鏈表之約瑟夫環(huán)的實現方法,需要的朋友可以參考借鑒,下面來一起看看吧。
    2017-01-01

最新評論