• <var id="gzb7d"><strong id="gzb7d"></strong></var>
    <td id="gzb7d"></td>

    1. <acronym id="gzb7d"></acronym>
      瀏覽器部落:綠色安全純凈官方版,體驗當今速度最快的瀏覽器!

      如何完成小程序動畫?小程序動畫的完成辦法

      時間:2018-12-24作者:未知來源:瀏覽器部落人氣:

      微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一項門檻非常高的創新,經過將近兩年的發展,已經構造了新的小程序開發環境和開發者生態。
      本篇文章給大家帶來的內容是介紹如何實現小程序動畫?小程序動畫的實現方法。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有所幫助。

      在普通的網頁開發中,動畫效果可以通過css3來實現大部分需求,在小程序開發中同樣可以使用css3,同時也可以通過api方式來實現。

      API解讀

      小程序中,通過調用api來創建動畫,需要先創建一個實例對象。這個對象通過wx.createAnimation返回,animation的一系列屬性都基于這個實例對象。

      創建這個對象

          let animation = wx.createAnimation({
              duration: 2000,
              delay: 0,
              timingFunction: "linear",
          });

      這個animation就是通過wx.createAnimation之后返回的實例。在創建過程中,可以給這個實例添加一些屬性,如以上代碼所示,等同于css3animation:$name 2s linear的寫法。

      添加動效

      實例創建完成之后,基于該實例,添加需要的動態效果,動態類型可以查閱文檔得知,以最常見的移動,旋轉為例:

          animation.translate($width, 0).rotate($deg);

      結束動畫

      .step()表示一組動畫的結束

          animation.step();

      導出動畫

      動畫效果添加完成了,如何給想要的dom添加動效呢。這里需要用到.export()導出動畫隊列,賦值給某個dom對象。

          this.setData({ moveOne: animation.export() })
          <view  animation="{{moveOne}}"></view>

      例子

      以下將通過2組動畫,來對比一下css3api實現方式的不同。

      一、模塊移動動畫

      動畫效果:

      下圖有兩組動畫,分別為api方式(上)與css3方式(下)完成的效果,點擊move按鈕,動畫啟動。

      1.gif

      代碼實現

      以下分別為css3api的核心代碼:

      css3:

          <!-- wxml -->
          <view class='border'>
              <view class='css-block {{isMove && "one"}}'></view>
              <view class='css-block {{isMove && "two"}}'></view>
              <view class='css-block {{isMove && "three"}}'></view>
              <view class='css-block {{isMove && "four"}}'></view>
          </view>
          // scss
          @mixin movePublic($oldLeft,$oldTop,$left,$top) {
              from {
                transform:translate($oldLeft,$oldTop);
              }
              to {
                transform:translate($left,$top);
              }
          }
          
          @mixin blockStyle($color,$name) {
              background: $color;
              animation:$name 2s linear infinite alternate;
          }
          .one {
              @include blockStyle(lightsalmon,onemove);
          }
          
          @keyframes onemove {
              @include movePublic(50rpx,-25rpx,-150rpx,0rpx);
          }
          
          .two {
              @include blockStyle(lightblue,twomove);
          }
          
          @keyframes twomove {
              @include movePublic(0rpx,25rpx,-50rpx,0rpx);
          }
          
          .three {
              @include blockStyle(lightgray,threemove);
          }
          
          @keyframes threemove {
              @include movePublic(0rpx,25rpx,50rpx,0rpx);
          }
          
          .four {
              @include blockStyle(grey,fourmove);
          }
          
          @keyframes fourmove {
              @include movePublic(-50rpx,-25rpx,150rpx,0rpx);
          }
          // js
          moveFunction(){
              this.setData({
                  isMove: true
              })
          }

      css3中通過動態改變class類名來達到動畫的效果,如上代碼通過onetwothreefour來分別控制移動的距離,通過sass可以避免代碼過于冗余的問題。(糾結如何在小程序中使用sass的童鞋請看這里哦:wechat-mina-template)

      api:

          moveClick(){
              this.move(-75,-12.5,25,'moveOne');
              this.move(-25,12.5, 0,'moveTwo');
              this.move(25, 12.5,0,'moveThree');
              this.move(75, -12.5,-25,'moveFour');
              this.moveFunction(); // 該事件觸發css3模塊進行移動
          },
      
          // 模塊移動方法
          move: function (w,h,m,ele) {
              let self = this;
              let moveFunc = function () {
              let animation = wx.createAnimation({
                  duration: 2000,
                  delay: 0,
                  timingFunction: "linear",
              });
          
              animation.translate(w, 0).step()
              self.setData({ [ele]: animation.export() })
              let timeout = setTimeout(function () {
                  animation.translate(m, h).step();
                  self.setData({
                      // [ele] 代表需要綁定動畫的數組對象
                      [ele]: animation.export()
                  })
                }.bind(this), 2000)
              }
              moveFunc();
              let interval = setInterval(moveFunc,4000)
          }

      效果圖可見,模塊之間都是簡單的移動,可以將他們的運動變化寫成一個公共的事件,通過向事件傳值,來移動到不同的位置。其中的參數w,h,m,ele分別表示發散水平方向移動的距離、聚攏時垂直方向、水平方向的距離以及需要修改animationData的對象。

      通過這種方法產生的動畫,無法按照原有軌跡收回,所以在事件之后設置了定時器,定義在執行動畫2s之后,執行另一個動畫。同時動畫只能執行一次,如果需要循環的動效,要在外層包裹一個重復執行的定時器到。

      查看源碼,發現api方式是通過js插入并改變內聯樣式來達到動畫效果,下面這張動圖可以清晰地看出樣式變化。

      2.gif

      打印出賦值的animationDataanimates中存放了動畫事件的類型及參數;options中存放的是此次動畫的配置選項,transition中存放的是wx.createAnimation調用時的配置,transformOrigin是默認配置,意為以對象的中心為起點開始執行動畫,也可在wx.createAnimation時進行配置。

      1.jpg

      二、音樂播放動畫

      上面的模塊移動動畫不涉及邏輯交互,因此新嘗試了一個音樂播放動畫,該動畫需要實現暫停、繼續的效果。

      動畫效果:

      3.gif

      兩組不同的動畫效果對比,分別為api(上)實現與css3實現(下):

      4.gif

      代碼實現

      以下分別是css3實現與api實現的核心代碼:

      css3:

          <!-- wxml -->
          <view class='music musicTwo musicRotate {{playTwo ? " ": "musicPaused"}} ' bindtap='playTwo'>
              <text class="iconfont has-music" wx:if="{{playTwo}}"></text>
              <text class="iconfont no-music" wx:if="{{!playTwo}}"></text>
          </view>
          // scss
          .musicRotate{
              animation: rotate 3s linear infinite;
          }
          
          @keyframes rotate{
              from{
                  transform: rotate(0deg)
              }
              to{
                  transform: rotate(359deg)
              }
          }
          
          .musicPaused{
              animation-play-state: paused;
          }
          // js
          playTwo(){
              this.setData({
                  playTwo: !this.data.playTwo
              },()=>{
                  let back = this.data.backgroundAudioManager;
                  if(this.data.playTwo){
                      back.play();
                  } else {
                      back.pause();
                  }
              })
          }

      通過playTwo這個屬性來判斷是否暫停,并控制css類的添加與刪除。當為false時,添加.musicPaused類,動畫暫停。

      api:

          <!-- wxml -->
          <view class='music' bindtap='play'  animation="{{play && musicRotate}}">
              <text class="iconfont has-music" wx:if="{{play}}"></text>
              <text class="iconfont no-music" wx:if="{{!play}}"></text>
          </view>
          // js
          play(){
              this.setData({
                  play: !this.data.play
              },()=>{
                  let back = this.data.backgroundAudioManager;
                  if (!this.data.play) {
                      back.pause();
                     // 跨事件清除定時器
                     clearInterval(this.data.rotateInterval);
                  } else {
                      back.play();
                      // 繼續旋轉,this.data.i記錄了旋轉的程度
                      this.musicRotate(this.data.i);
                  }
              })
          },
          musicRotate(i){
              let self = this;
              let rotateFuc = function(){
                  i++;
                  self.setData({
                      i:i++
                  });
                  let animation = wx.createAnimation({
                      duration: 1000,
                      delay: 0,
                      timingFunction: "linear",
                  });
                  animation.rotate(30*(i++)).step()
                  self.setData({ musicRotate: animation.export() });
              }
              rotateFuc();
              let rotateInterval = setInterval(
                  rotateFuc,1000
              );
              // 全局定時事件
              this.setData({
                  rotateInterval: rotateInterval
              })
          }

      通過api實現的方式是通過移除animationData來控制動畫,同時暫停動畫也需要清除定時器,由于清除定時器需要跨事件進行操作,所以定了一個全局方法rotateInterval

      api方式定義了旋轉的角度,但旋轉到該角度之后便會停止,如果需要實現重復旋轉效果,需要通過定時器來完成。因此定義了變量i,定時器每執行一次便加1,相當于每1s旋轉30°,對animation.rotate()中的度數動態賦值。暫停之后繼續動畫,需要從原有角度繼續旋轉,因此變量i需要為全局變量。

      代碼變化:

      下圖可以看出,api方式旋轉是通過不斷累加角度來完成,而非css3中循環執行。

      5.gif

      對比

      通過上述兩個小例子對比,無論是便捷度還是代碼量,通過css3來實現動畫效果相對來說是更好的選擇。api方式存在較多局限性:

      1. 動畫只能執行一次,循環效果需要通過定時器完成。

      2. 無法按照原有軌跡返回,需要返回必須定義定時器。

      3. 頻繁借助定時器在性能上有硬傷。

      綜合以上,推薦通過css3來完成動畫效果。

      以上就是如何實現小程序動畫?小程序動畫的實現方法的詳細內容,更多請關注php中文網其它相關文章!


      小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。






      關鍵詞:如何完成小程序動畫?小程序動畫的完成辦法




      Copyright © 2012-2018 瀏覽器部落(http://www.atelierescobar.com) .All Rights Reserved 網站地圖 友情鏈接

      免責聲明:本站資源均來自互聯網收集 如有侵犯到您利益的地方請及時聯系管理刪除,敬請見諒!

      QQ:1006262270   郵箱:kfyvi376850063@126.com   手機版 

      国产乱子伦漫画,猫咪www免费人成在线观看,国产真实哺乳吃奶在线观看,超乳专区爆乳国产