小程序-语音播放动画-animation

最新推荐文章于 2023-12-06 17:46:29 发布

zhangXY_

最新推荐文章于 2023-12-06 17:46:29 发布

阅读量2.4k

点赞数 4

分类专栏：小程序开发文章标签：动画语音播放动画小程序

本文链接：https://blog.csdn.net/weixin_43549408/article/details/104612866

版权

本文介绍了如何在小程序中实现语音播放时的动画效果，通过展示从静止到播放过程中的三张关键帧图片，详细讲解了动画的实现步骤和技术要点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

在这里插入图片描述三张图片分别：白底看不到-就用黑色代替，是反方向但效果一样

<view class="animat-audiobox {
    {msg.senderId==receiverId ? 'other' : 'me'}}">                
	<view class='animat-audio voice_view' bindtap='playTap' data-id='{
    {msg.id}}' data-time="{
    {msg.time}}" data-url="{
    {msg.body}}" style="width:{
      {
      msg.time*20}}rpx;">                    
		<!--没有播放时图片为 audio3.png-->                    
		<image src="/pages/images/index/item/{
    {msg.senderId==receiverId?'record-b-3':'record-w-3'}}.png" class="record_img