【微信小程序】 模拟帧动画图片 模拟音频播放gif动画 监听音频播放状态 css3 @keyframes 动画 背景图片设置

没有播放时isPlaying为false，当点击时，开始播放，调用循环动画，再点击时，就停止。

图片

wxml

判断是否正在播放 通过 isPlaying 来判断。

<!-- 音频 -->
<view class="filetype">
  <view class='animat-audiobox' bindtap='animatestart'>
    <image src="/images/questiondetail_audio-bg.png"></image>
    <view class='animat-audio'>
    	<!--没有播放时图片为 audio3.png-->
      <image src="/images/audio3.png" class='img' wx:if="{{isPlaying ? '' : 'display:none'}}"></image>
      	<!--播放时图片为 audio3.png-->
      <view wx:if="{{isPlaying ? 'display:none' : ''}}">
        <image src="/images/audio1.png" class='img' wx:if="{{playing == 1}}"></image>
        <image src="/images/audio2.png" class='img' wx:if="{{playing == 2}}"></image>
        <image src="/images/audio3.png" class='img' wx:if="{{playing == 3}}"></image>
      </view>
    </view>
  </view>
</view>

wxss

.images .filetype, .images .filetype image, .images .filetype video,
.images .filetype audio {
  width: 132rpx;
  height: 132rpx;
  border-radius: 12rpx;
  margin: 0 20rpx 0 0;
  overflow: hidden;
  display: inline-block;
}
.image {
  width: 66px;
  height: 66px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
/*音频动画*/
.animat-audiobox{
  position:relative;
  width:132rpx;
  height:132rpx;
}
.animat-audio {
  width:56rpx;
  height:56rpx;
  position:absolute;
  left:50%;
  top:50%;
  z-index:99;
  transform: translate(-50%, -50%);
}
.animat-audio .img{
  width:56rpx!important;
  height:56rpx!important;
  position:relative;
  z-index:99999;
}

js

data: {
	playing: 1,//帧动画初始图片
	isPlaying: false //是否在播放状态
}，
//音频播放动画 点击开始播放 监听
animatestart: function (count) {
  var _this = this;
  if (!this.data.isPlaying) {
  	//模拟gif动画开始
    var j = 1;
    _this.data.timer = setInterval(function () {
      count++;
      j = j % 3;
      j++;
      _this.setData({
        playing: j
      })
    }, 400)
    //模拟gif动画结束
    this.setData({
      isPlaying: true
    })
    console.log('正在播放');
  } else {
    clearInterval(this.data.timer)//停止帧动画循环
    this.setData({
      isPlaying: false,
      playing: 1
    })
    console.log('已停止');
  }
}

https://blog.csdn.net/qq_31383345/article/details/53352623

//动画关键
timers: function (count) {
  var that = this;
  var j = 1;
  that.data.timer = setInterval(function () {
    count++;
    j = j % 16;      
    j++;
    that.setData({
      i: j
    }) 
  }, 50)
}

---

【优化后】但考虑到性能问题，如果一直wx:if="{{playing == 1}}"循环，性能会差，所以还是考虑做用css动画做（因为之前用背景图片不行，后来把图片转为base64的）。还会有渐隐的效果，非常好

css

.animat-audio，
.audioanimate {
  width:56rpx;
  height:56rpx;
  position:absolute;
  left:50%;
  top:50%;
  z-index:99;
  transform: translate(-50%, -50%);
}
.audioanimate{
  animation: audioanimate 1s linear infinite;
}

@keyframes audioanimate {
  0% {
    background-image: url('转为base64的图片');
    background-size:100%;
  }
  50%{
    background-image: url('转为base64的图片');
    background-size:100%;
  }
  100%{
    background-image: url('转为base64的图片');
    background-size:100%;
  }
}

wxml

<view class='animat-audiobox' bindtap='animatestart'>
	<image src="/images/questiondetail_audio-bg.png"></image>
	<view class='animat-audio'>
		<image src="/images/audio3.png" class='img' wx:if="{{isPlaying ? '' : 'display:none'}}"></image>
		<view wx:else class="audioanimate"></view>
	</view>
</view>

js 把循环的动画相关的删除就好

data: {
	isPlaying: false //是否在播放状态
}，
//音频播放动画 点击开始播放 监听
animatestart: function (count) {
  var _this = this;
  if (!this.data.isPlaying) {
    this.setData({
      isPlaying: true
    })
    console.log('正在播放');
  } else {
    this.setData({
      isPlaying: false
    })
    console.log('已停止');
  }
}