突發奇想,做個錄音的模組,結果折騰到一點鐘,還在做話筒的動畫.

最後發現微信還有bug,我也是醉了.有空再接著敲.

先上gif:

這還沒完成,做完之後應該是水波紋的樣子.無奈函式執行多次,動畫只執行一次.還是先把鍋甩出去.

上微信開發文件的圖:

程式碼先貼上:

1.index.wxml

<!--index.wxml-->
<view  class="voice-style" bindtap="startSpeak">
<image class="bg-style" src="../../images/voice_icon_speaking_bg_normal.png"></image>
<image class="bg-style" animation="{{spreakingAnimation}}" src="../../images/voice_video_loading_0.png"></image>
<image class="sound-style" src="../../images/voice_icon_speech_sound_1.png"></image>
<image class="sound-style" src="../../images/voice_icon_speech_sound_2.png"></image>
<image class="sound-style" src="../../images/voice_icon_speech_sound_3.png"></image>
<image class="sound-style" src="../../images/voice_icon_speech_sound_4.png"></image>
<image class="sound-style" src="../../images/voice_icon_speech_sound_5.png"></image>
</view>
 

/**index.wxss**/
.voice-style {
  margin-top: 400px;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
}

.bg-style {
  position: absolute;
  width: 100px;
  height: 100px;
}
.sound-style{
  position: absolute;
  width: 37.6px;
  height: 60px;
  margin-top: 20px;
}
 

//index.js
//獲取應用例項
var app = getApp()
Page({
  data: {
    spreakingAnimation: {},//放大動畫
  },
  onLoad: function () {
  },
  //點選開始說話
  startSpeak: function () {
    var _this = this;
    var timer = setInterval(function () {
      console.log("開始說話.....")
      speaking.call(_this);
    }, 200);
  },
})
function speaking() {
  console.log("動畫.....")
  var _this = this;
  var animation = wx.createAnimation({
    duration: 1000,
  })
  animation.opacity(0).scale(3, 3).step();//修改透明度,放大
  this.setData({
    spreakingAnimation: animation.export()
  })
}
 

在wx.createAnimation(OBJECT)中有幾個引數還是得說說.

1. linear 預設為linear 動畫一直較為均勻
2. ease 開始時緩慢中間加速到快結束時減速
3. ease-in 開始的時候緩慢
4. ease-in-out 開始和結束時減速
5. ease-out 結束時減速
6. step-start 動畫一開始就跳到 100% 直到動畫持續時間結束 一閃而過
7. step-end 保持 0% 的樣式直到動畫持續時間結束 一閃而過
   

transformOrigin 設定動畫的基點 預設%50 %50 0

left,center right是水平方向取值，對應的百分值為left=0%;center=50%;right=100%

top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%