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

js運動動畫的八個知識點

 更新時間:2015年03月12日 09:22:54   投稿:hebedich  
本文給大家分享的是個人在學(xué)習(xí)js運動動畫的過程中總結(jié)的我們需要注意的8個知識點,分別是速度動畫、透明度漸變、緩沖運動、多物體運動、獲取樣式、任意屬性值、鏈式運動和同時運動,非常的詳細,推薦給小伙伴們。

今天簡單的學(xué)了一下js運動動畫,記錄一下自己的心得體會,分享給大家。

      下面是我整理出來的結(jié)果。

知識點一:速度動畫。

      1.首先第一步實現(xiàn)速度運動動畫,封裝一個函數(shù),用到的知識是setInterval(function(){

復(fù)制代碼 代碼如下:

    oDiv.style.left=oDiv.offsetLeft+10+"px";
  },30).

  對于這里為什么要用到offsetLeft,我特意百度了一下,我得到的有用信息是:

  a.offsetLeft和left的相同之處都是表示子節(jié)點相對于父節(jié)點的左位置。
  b.但是left是既可以讀又可以寫的,而offsetLeft是只讀的;
  c.并且offsetLeft是沒有單位的,獲取子節(jié)點位置的時候后面不帶px。

  這里在引申一下其他的知識,感謝這位博主,http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201372885729561/

  2.讓運動的節(jié)點停止下來,這里我們用if語句做一個驗證,如果offsetLeft==0,clearInterval(timer),這里的timer應(yīng)該事先初始化=null,然后將之前的那個運動動畫賦值給它。

  3.這里有一個問題,如果在運動結(jié)束之前再次觸發(fā)的運動,那么運動的速度會累加,這里,只要在整個運動開始之前,clearInterval(timer)就可以了。

  4.設(shè)置移入移除效果,給運動設(shè)置參數(shù),一個是速度speed,一個是目標位置iTarget,我們發(fā)現(xiàn)速度也是可以通過ITarget的位置來判斷的,所以只需要一個參數(shù)即可。

知識點二:透明度漸變

  1.其實,跟剛剛是差不多的,只不過ITarget的值為透明度而已,流程還是清除定時器再開一個定時器判斷等等。

  2.定義一個參數(shù)alpha=透明度,注意定時器里面應(yīng)該這樣寫:

復(fù)制代碼 代碼如下:

  alpha+=speed;
  oDiv.style.filter='alpha(opacity:'+alpha+')';         //這是非常重要的一種方法,注意是這樣寫的
  oDiv.style.opacity=alpha/100;            //注意不要忘記除以100

  3.以上都是行內(nèi)樣式。

知識點三:緩沖運動

  1.緩沖運動就是距離越大,速度就愈大,距離越小,速度就越小,即速度與距離有關(guān)。

  2.根據(jù)上面的說法,對速度進行重新的定義,一開始速度為0,而現(xiàn)在:

復(fù)制代碼 代碼如下:

  var speed=iTarget-oDiv.offsetLeft;

  重新定義定時器:

復(fù)制代碼 代碼如下:

  oDiv.style.left=oDiv.offsetLeft+speed+'px';

  此時我們發(fā)現(xiàn)速度太大了,可以這樣:

復(fù)制代碼 代碼如下:

  var speed=(iTarget-oDiv.offsetLeft)/10;

  3.此時會有一個嚴重的問題,因為屏幕的最小單位為px,所以會出現(xiàn)最終的left值為小數(shù),而不為目標的iTarget,可以通過判斷來解決,這里要引入Math.floor(),這是向下取整,同樣還有Math.ceil(),這是向上取整。在定義speed后我們這樣寫:

復(fù)制代碼 代碼如下:

  speed=speed>0?Math.ceil(speed):Math.floor(speed);           

  這樣就可以完全保證速度都是整數(shù),并且在臨界值上都為0。

知識點四:多物體運動  

  1.先獲取所有的物體,形成一個數(shù)組,然后再用for循環(huán)來做(這種方法多么經(jīng)典呀?。趂or循環(huán)中添加節(jié)點事件,在函數(shù)中可以用this代替當(dāng)前的節(jié)點,eg:startMove(this,iTarget),定義函數(shù)時startMove(obj,iTarget).

  2.取當(dāng)前寬度offsetWidth的時候就要用obj的值了。

  3.當(dāng)鼠標移動特別快的時候,節(jié)點的寬度未能恢復(fù)原狀,這是因為定時器是大家公用的定時器,上一個節(jié)點還未恢復(fù)原狀下一個節(jié)點就已經(jīng)清除定時器了,解決的辦法就是給每一個節(jié)點加一個index,就是在上面的for循環(huán)中加上aDiv[i].timer=null;然后再定義函數(shù)中用obj.timer替換timer。由此我們要注意共用定時器會出事的。

  4.透明度的運動中,alpha代替了speed,但是即使定時器不共用,多物體的運動也會出現(xiàn)問題,這是因為alpha公用的原因,導(dǎo)致各物體相互撕扯,解決辦法就是可以像timer那樣在for循環(huán)中給每個節(jié)點都分配alpha。

      總結(jié):解決沖突問題,要么初始化,要么個性化。

知識點五.獲取樣式

  1.在改變節(jié)點寬度(移入大,移除?。┑亩〞r器中,如果給節(jié)點添加一個border邊框,那么在移入的時候比目標節(jié)點小,移出的時候比目標節(jié)點大。注意width+padding+scrollbar(滾動條)+border,所以原因就是每次offset都會增加border*2-(定時器中每次減少的數(shù)值)。

  2.解決以上問題的辦法就是在行內(nèi)寫入width,并且使用parseInt(oDiv.style.width)代替offsetLeft,但是并不能總是寫在行內(nèi),所以我們定義一個函數(shù),獲取鏈入樣式:

復(fù)制代碼 代碼如下:

  function getStyle(obj,attr){
    if(obj.currentStyle){
      return obj.currentStyle[attr];                       //ie瀏覽器 
    }
    else{
      return getComputerStyle(obj,false)[attr];          //其他瀏覽器
    }
  }

  3.對于font-size這種,在js里只有fontSize這一種寫法。

知識點六:任意屬性值

  1.所有的offset-的都會有小bug,要用getStyle函數(shù),這個函數(shù)經(jīng)常和parseInt()一起用,并通常用變量保存。

  2.在寫style.width的時候,也可以寫成style['width']?! ?/p>

  3.對于多物體的屬性值調(diào)整,可以將樣式作為參數(shù)封裝一下,這樣多物體屬性的函數(shù)就包括了(obj,attr,iTarget)這三個屬性值。

  4.以上的這個運動框架是不適合于透明度變化的,因為透明度都是小數(shù)的,因為兩個原因,第一是parseInt,第二是attr=...+px,這里我們可以用一個if判讀來對透明度進行單獨處理,將parseInt換成parseFloat,去掉px。

  5.計算機本身是有一個bug的,0.07*100并不等于7,所以我們引入一個函數(shù)是Math.round(),這是一個四舍五入的值。

知識點七:鏈式運動

  1.引入move.js框架。

  2.傳入一個回調(diào)函數(shù)fn(),用if判斷,如果有fn(),那么執(zhí)行fn()。

知識點八:同時運動

  1.如果寫兩個運動函數(shù)來控制同時運動,會發(fā)生函數(shù)覆蓋。

  2.使用json這個知識點,json的循環(huán)是使用for(i in json),運動函數(shù)的參數(shù)為obj,json,fn。

  3.沒有iTarget這個值了,取而代之的是json[attr].

  寫到這里,就已經(jīng)完全結(jié)束了,希望大家能夠喜歡。也希望對大家學(xué)習(xí)js運動動畫能夠有所幫助。

相關(guān)文章

  • javascript檢測移動設(shè)備橫豎屏

    javascript檢測移動設(shè)備橫豎屏

    移動端的開發(fā)過程中,免不了要判斷橫豎屏,然后在執(zhí)行其他操作,比如分別加載不同樣式,橫屏顯示某些內(nèi)容,豎屏顯示其他內(nèi)容等等。
    2016-05-05
  • input標簽內(nèi)容改變的觸發(fā)事件介紹

    input標簽內(nèi)容改變的觸發(fā)事件介紹

    onchange事件在內(nèi)容改變(兩次內(nèi)容有可能相等)且失去焦點時觸發(fā);onpropertychange事件是實時觸發(fā),每增加或刪除一個字符就會觸發(fā)
    2014-06-06
  • 小程序Scroll-view上拉滾動刷新數(shù)據(jù)

    小程序Scroll-view上拉滾動刷新數(shù)據(jù)

    這篇文章主要為大家詳細介紹了小程序Scroll-view上拉滾動刷新數(shù)據(jù),文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-06-06
  • 基于javascript實現(xiàn)的購物商城商品倒計時實例

    基于javascript實現(xiàn)的購物商城商品倒計時實例

    本文主要介紹了基于javascript實現(xiàn)的購物商城商品倒計時實例,代碼詳細,可直接復(fù)制試試看效果。需要的朋友可以參考借鑒
    2016-12-12
  • layui 彈出層值回傳解決方式

    layui 彈出層值回傳解決方式

    今天小編就為大家分享一篇layui 彈出層值回傳解決方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • 微信小程序?qū)崿F(xiàn)星星評價效果

    微信小程序?qū)崿F(xiàn)星星評價效果

    這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)星星評價效果,支持多個條目評價,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-11-11
  • 解決微信瀏覽器Javascript無法使用window.location.reload()刷新頁面

    解決微信瀏覽器Javascript無法使用window.location.reload()刷新頁面

    這篇文章主要介紹在微信瀏覽器Javascript無法使用window.location.reload()刷新頁面的解決方法,比較實用,需要的朋友可以參考下。
    2016-06-06
  • ES7中利用Await減少回調(diào)嵌套的方法詳解

    ES7中利用Await減少回調(diào)嵌套的方法詳解

    大家都知道在ES7中有了標準的回調(diào)函數(shù)嵌套的解決方案,新增了 async/await兩個關(guān)鍵詞,所以這篇文章主要給大家介紹了關(guān)于Javascript中如何利用Await減少回調(diào)嵌套的相關(guān)資料,需要的朋友可以參考借鑒,下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-11-11
  • js驗證上傳圖片的方法

    js驗證上傳圖片的方法

    這篇文章主要介紹了js驗證上傳圖片的方法,可對上傳圖片的類型、大小等進行限制,非常簡單實用,需要的朋友可以參考下
    2015-05-05
  • 微信小程序連續(xù)簽到7天積分獲得功能的示例代碼

    微信小程序連續(xù)簽到7天積分獲得功能的示例代碼

    今天通過一個案例給大家分享微信小程序連續(xù)簽到7天積分獲得功能,通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考價值,感興趣的朋友一起學(xué)習(xí)吧
    2020-08-08

最新評論