回顾一下安卓的动画，安卓的动画分为三种，补间动画、帧动画和属性动画，补间动画和属性动画包括平移、旋转、放大和透明变化四种；这两种动画的区别在于补间动画执行后原来的属性并没有改变，比如一个图片从这个位置移动到另外一个位置，其获取焦点的位置还是在原来的位置，而属性动画执行后真实的改变了其属性。帧动画就是多张图片按照一定的顺序切换，产生像播放电影一样的效果。好了，扯远了，微信小程序的动画分为：旋转、缩放、偏移、倾斜、矩阵变形和动画队列（安卓中叫复合动画，多个动画一起执行）这几种。接下来我就通过对录音动画的实现讲述动画的简单实用。看图：

实现步骤：

     1.找几张连贯的录音图片

     2.完成界面上的布局

    3.获取点击事件

   4.动画方法函数的实现和动画切换函数的实现

function spreak() {
  //听筒动画切换  200毫秒切换一个动画
  var _this = this;
  var i = 1;
  this.timer = setInterval(function () {
    i++;
    i = i % 5;
    _this.setData({ j: i })
    return
  }, 300);

  //动画放大效果
  var animation = wx.createAnimation({
    duration: 1000
  })
  //放大淡出
  animation.opacity(0).scale(3, 3).step();
  this.setData({
    spreakingAnimation: animation.export()
  });
  //以上动画执行完成后执行后续动画
  setTimeout(function () {
    //动画放大效果
    var animation = wx.createAnimation({
      duration: 1000
    })
    //放大淡出
    animation.opacity(0).scale(3, 3).step();
    _this.setData({
      spreakingAnimation_1: animation.export()
    });
  }, 2000);

  setTimeout(function () {
    var animation = wx.createAnimation({
      duration: 1000
    })
    //放大淡出
    animation.opacity(0).scale(3, 3).step();
    _this.setData({
      spreakingAnimation_1: animation.export()
    });
  }, 3000);

}

  简单两个方法就实现了录音效果，以下是全部代码

  控制层

var app = getApp()
var util = require('../../../utils/util.js')
Page({
  data: {
    spreakingAnimation: {},//放大动画  
    j: 1,//帧动画初始图片  
    isSpeaking: false,//是否在录音状态  
  },
  //点击开始说话  
  startSpeak: function () {
    var _this = this;
    if (!this.data.isSpeaking) {
      spreak.call(this);
      this.setData({ isSpeaking: true })
      util.showToast("true");

      //开始录音
      wx.startRecord({
        success: function (res) {
          var tempFilePath = res.tempFilePath
          util.showToast("录音成功")

          //持久保存音频
          //持久保存  
          wx.saveFile({
            tempFilePath: tempFilePath,
            success: function (res) {
              //持久路径  
              //本地文件存储的大小限制为 100M  
              var savedFilePath = res.savedFilePath
              console.log("savedFilePath: " + savedFilePath)
            }
          })
        },
        fail: function (res) {
          //录音失败
          util.showToast("录音失败")
        }
      })

    } else {
      //移除听筒动画
      clearInterval(this.timer);
      this.setData({ isSpeaking: false, j: 1 })
      util.showToast("false");

      //手动停止录音
      wx.stopRecord({
        success: function(res){
          // success
           util.showToast("停止录音")
        },
        fail: function() {
          // fail
            util. showToast("怎么回事")
        },
        complete: function() {
          // complete
        }
      });
    }

  },
  //获取录音列表
  getVoiceList:function(e){
     wx.getSavedFileList({
       success: function(res){
         // success
         console.log(res)
       },
       fail: function() {
         // fail
       },
       complete: function() {
         // complete
       }
     })
  }
})



function spreak() {
  //听筒动画切换  200毫秒切换一个动画
  var _this = this;
  var i = 1;
  this.timer = setInterval(function () {
    i++;
    i = i % 5;
    _this.setData({ j: i })
    return
  }, 300);

  //动画放大效果
  var animation = wx.createAnimation({
    duration: 1000
  })
  //放大淡出
  animation.opacity(0).scale(3, 3).step();
  this.setData({
    spreakingAnimation: animation.export()
  });
  //以上动画执行完成后执行后续动画
  setTimeout(function () {
    //动画放大效果
    var animation = wx.createAnimation({
      duration: 1000
    })
    //放大淡出
    animation.opacity(0).scale(3, 3).step();
    _this.setData({
      spreakingAnimation_1: animation.export()
    });
  }, 2000);

  setTimeout(function () {
    var animation = wx.createAnimation({
      duration: 1000
    })
    //放大淡出
    animation.opacity(0).scale(3, 3).step();
    _this.setData({
      spreakingAnimation_1: animation.export()
    });
  }, 3000);

}

  视图层

<view class="page">
<view><button bindtap="getVoiceList">获取录音列表</button></view>
<view class="voice-style" bindtap="startSpeak">
  <image class="bg-style" src="../../images/voice_image/voice_icon_speaking_bg_normal.png"></image>
  <image class="bg-style" animation="{{spreakingAnimation}}" src="../../images/voice_image/voice_video_loading_0.png"></image>
  <image class="bg-style" animation="{{spreakingAnimation_1}}" src="../../images/voice_image/voice_video_loading_0.png"></image>
  <image class="bg-style" animation="{{spreakingAnimation_2}}" src="../../images/voice_image/voice_video_loading_0.png"></image>
  <image class="sound-style" src="../../images/voice_image/voice_icon_speech_sound_1.png"></image>
  <image wx:if="{{j==2}}" class="sound-style" src="../../images/voice_image/voice_icon_speech_sound_2.png"></image>
  <image wx:if="{{j==3}}" class="sound-style" src="../../images/voice_image/voice_icon_speech_sound_3.png"></image>
  <image wx:if="{{j==4}}" class="sound-style" src="../../images/voice_image/voice_icon_speech_sound_4.png"></image>
  <image wx:if="{{j==5}}" class="sound-style" src="../../images/voice_image/voice_icon_speech_sound_5.png"></image>
</view>
</view>