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

微信小程序?qū)崿F(xiàn)可實(shí)時(shí)改變轉(zhuǎn)速的css3旋轉(zhuǎn)動(dòng)畫實(shí)例代碼

  發(fā)布時(shí)間：2018-09-11 17:22:51   作者：LcFireRabbit   我要評(píng)論
這篇文章主要給大家介紹了關(guān)于微信小程序如何實(shí)現(xiàn)可實(shí)時(shí)改變轉(zhuǎn)速的css3旋轉(zhuǎn)動(dòng)畫的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

本文主要介紹的是關(guān)于微信小程序?qū)崿F(xiàn)可實(shí)時(shí)改變轉(zhuǎn)速的css3旋轉(zhuǎn)動(dòng)畫的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹吧。

先上效果圖

最上面那一行就是個(gè)簡(jiǎn)單的換顏色效果，極其簡(jiǎn)答就不多說了，直接上代碼。

WXML

<view class='box' style='background-color:{{backgroundcolor}}'>
</view>
<view class='viewBox'>
  <button bindtap='changeColor' data-color='black' class='box'>黑</button>
  <button bindtap='changeColor' data-color='violet' class='box'>紫</button>
  <button bindtap='changeColor' data-color='orange' class='box'>橙</button>
  <button bindtap='changeColor' data-color='blue' class='box'>藍(lán)</button>
  <button bindtap='changeColor' data-color='green' class='box'>綠</button>
</view>

JS

  data: {
    backgroundcolor:'red'
  },
  changeColor:function(e){
    this.setData({
      backgroundcolor: e.currentTarget.dataset.color
    })
  }

那么下面咱們說一說這個(gè)旋轉(zhuǎn)的動(dòng)畫。小程序里呢，有自己的動(dòng)畫api，但是用起來感覺極其麻煩，而且容易產(chǎn)生倒轉(zhuǎn)，對(duì)設(shè)備的性能消耗也多，動(dòng)畫多了以后就會(huì)極其卡頓，所以還是css3的動(dòng)畫比較好。

首先來寫這個(gè)css3動(dòng)畫

css3旋轉(zhuǎn)動(dòng)畫

<view class='animationSlow'></view>
.animationSlow {
   width: 100rpx;
  height: 100rpx;
  background-color: orange;
  animation-name: myfirst; /*動(dòng)畫的名稱 */
  animation-duration: 2000ms; /*動(dòng)畫從開始到結(jié)束的時(shí)間*/
  animation-timing-function: linear; /*動(dòng)畫執(zhí)行快慢的參數(shù)*/
  animation-iteration-count: infinite; /*動(dòng)畫執(zhí)行多少次的參數(shù)*//*以下是兼容ios所需，參數(shù)意義與上相同*/
  -webkit-animation-name: myfirst;
  -webkit-animation-duration: 2000ms;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}
@keyframes myfirst {
  /*開始轉(zhuǎn)的角度*/
  from {
    transform: rotate(0deg);
  }/*結(jié)束的角度*/
  to {
    transform: rotate(360deg);
  }
}
/*兼容ios*/
@-webkit-keyframes myfirst {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

效果圖

如果只是一個(gè)一次性的動(dòng)畫效果，現(xiàn)在這些代碼就OK了。

如果想要實(shí)時(shí)可以改變旋轉(zhuǎn)的轉(zhuǎn)速，我們還得再加點(diǎn)東西。

實(shí)現(xiàn)可以實(shí)時(shí)修改轉(zhuǎn)速

微信小程序里涉及到實(shí)時(shí)數(shù)據(jù)就避免不了Page.data這個(gè)東西。

微信小程序中的Page

Page()定義在js文件中，Page() 函數(shù)用來注冊(cè)一個(gè)頁(yè)面。

Page()函數(shù)接受一個(gè) object 參數(shù)，其指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。

object參數(shù)為：

1.我們需要將控制動(dòng)畫時(shí)間的css屬性放到內(nèi)聯(lián)樣式中去

<view class='animationSlow' style='animation-duration: 2000ms;-webkit-animation-duration: 2000ms;'></view>

2.在頁(yè)面對(duì)應(yīng)的js中，設(shè)置掌控時(shí)間的Page.data屬性，將wxml里內(nèi)聯(lián)屬性的時(shí)間改為Page.data的屬性。

  data: {
    animationTime:'2000ms'
  },
<view class='animationSlow' style='animation-duration: {{animationTime}};-webkit-animation-duration: {{animationTime}};'></view>

3.接下來我們寫幾個(gè)按鈕，綁定上修改這個(gè)時(shí)間的方法，進(jìn)而來改變轉(zhuǎn)速。這一步都是基本代碼，我就不貼代碼了。放個(gè)效果圖吧。


效果圖

那么接下來重點(diǎn)來了：其實(shí)這里有個(gè)bug，這個(gè)效果呢在安卓機(jī)上是一點(diǎn)點(diǎn)問題都沒有的。但是在蘋果機(jī)上，動(dòng)畫一旦開始，再通過這個(gè)方法去修改轉(zhuǎn)速，就不能生效了。

解決IOS系統(tǒng)的BUG

上面說了，IOS系統(tǒng)上呢，動(dòng)畫一旦開始，這個(gè)方法就不能用了。那么咱是不是可以先把這個(gè)動(dòng)畫停下來，然后再改轉(zhuǎn)速呢？這個(gè)辦法可不可以呢？答案是肯定的，但是不是去把動(dòng)畫時(shí)間改為0，而是采用了css3動(dòng)畫的一個(gè)屬性。CSS3 動(dòng)畫教程

animation-play-state: paused|running;

簡(jiǎn)而言之就是先用這個(gè)屬性把動(dòng)畫暫停，修改轉(zhuǎn)速，然后再讓它跑起來。這一切都得再js里進(jìn)行。

1.需要在標(biāo)簽的內(nèi)聯(lián)樣式里加上這個(gè)屬性，在Page.data里再定義一個(gè)屬性控制開始暫停。

<view class='animationSlow' style='animation-duration: {{animationTime}};-webkit-animation-duration: {{animationTime}};animation-play-state:{{status}};-webkit-animation-play-state:{{status}};'></view>
 data: {
    animationTime:'2000ms',
    status: 'running'//paused
  },

2.然后我們?nèi)バ薷母淖冝D(zhuǎn)速的方法。暫停>(修改>跑起來)，效果上稍微有些延遲。

 changeTime:function(e){
    this.setData({
      status: 'paused'
    })
    this.setData({
      timeAnimation: e.currentTarget.dataset.time,
      status: 'running'
    })
  },

3.來上效果圖了。


效果圖

可能動(dòng)圖上感覺不出來，不過你們可以去真機(jī)試一下，就可以展現(xiàn)出來了。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

相關(guān)文章

  • js+CSS3 3D旋轉(zhuǎn)木馬特效插件

    這是一款實(shí)現(xiàn)js 3D旋轉(zhuǎn)木馬特效插件。該插件通過CSS3和純js來完成，可中間以3D旋轉(zhuǎn)的方式來展示一組圖片，歡迎下載
    2019-08-16

  • css3實(shí)現(xiàn)橢圓軌跡旋轉(zhuǎn)的示例代碼

    這篇文章主要介紹了css3實(shí)現(xiàn)橢圓軌跡旋轉(zhuǎn)的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-10-29

  • CSS3打造百度貼吧的3D翻牌效果示例

    本篇文章主要介紹了CSS3打造百度貼吧的3D翻牌效果示例，非常具有實(shí)用價(jià)值，有想去的可以了解一下。
    2017-01-04

  • CSS3實(shí)現(xiàn)簡(jiǎn)易版的刮刮樂效果

    大家應(yīng)該都玩過刮刮樂，如何實(shí)現(xiàn)刮刮樂效果，這篇文章主要為大家詳細(xì)介紹了CSS3實(shí)現(xiàn)簡(jiǎn)易版的刮刮樂效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-09-27

  • 純css3實(shí)現(xiàn)圖片翻牌特效

    本文給大家分享的是一則使用原生CSS3實(shí)現(xiàn)的圖片翻牌效果，十分的炫酷，代碼卻很簡(jiǎn)單，這里推薦給有相同需求的小伙伴們。
    2015-03-10

  • css實(shí)現(xiàn)旋轉(zhuǎn)翻牌動(dòng)畫效果

    本文通過實(shí)例代碼給大家介紹了css實(shí)現(xiàn)旋轉(zhuǎn)翻牌動(dòng)畫效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
    2019-10-09

最新評(píng)論