【微信小程序】 模拟帧动画图片 模拟音频播放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('已停止');}
}
【微信小程序】 模拟帧动画图片 模拟音频播放gif动画 监听音频播放状态 css3 @keyframes 动画 背景图片设置相关推荐
- 在微信小程序项目中使用mock模拟数据
之前对mockjs做了一个介绍,以及在js.vue中拦截ajax的方法,介绍是必看的,也是一些基础 mockjs介绍总结 mockjs拦截ajax 在vue项目中使用mock拦截axios请求 这一篇 ...
- 微信小程序 原生开发 实现弹窗遮罩层 并且在遮罩层内使用scroll-view实现滚动内容（包括图片）
微信小程序 原生开发 实现弹窗遮罩层 并且在遮罩层内可以滚动内容(包括图片) 效果图 这里的遮罩层内容由两张图片构成 底图+内部内容 实现代码 wxml 使用云开发的存储,自己开发的时候换掉src即可 ...
- 微信小程序swiper组件真机模拟时疯狂轮播 问题解决完整代码
公司 个人 家庭 社会 国家 张伯礼院士:除湖北外,全国其他省市4月底应可恢复正常秩序 个人内容列表 家庭内容列表 社会内容列表 国家内容列表 国家内容列表 国家内容列表 国家内容列表 国家内容列表 ...
- 微信小程序全面实战，架构设计与躲坑攻略大全
感谢作者齐修的授权,如需转载,请与作者联系. 作者:齐修,早先就职淘宝UED,目前在好奇心日报参与创业,除了基本的项目开发,还偏好于前端工程化.网站性能优化等方向. 责编:陈秋歌,关注微信开发等领域, ...
- 微信小程序全面实战，架构设计 躲坑攻略
最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版),直接上图: Paste_Image.png 本文将结合具体的实战经验,主要介绍微信小程序的基础知识.开 ...
- 微信小程序全面实战，架构设计 躲坑攻略(小程序入门捷径教程)
转自:http://www.cnblogs.com/dragondean/p/6247643.html 最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版) ...
- 微信小程序销毁某一注册函数_微信小程序 生命周期函数详解
微信小程序 生命周期函数 小程序中 判断当前首页是从其他页面返回,还是由入口打开 由于小程序的数据在我们退出小程序时并没有得到释放,因此再次点击开来数据依然没有变成初始化 解决方法:在小程序 data ...
- 微信小程序observers数据监听器的使用
微信小程序observers数据监听器的使用 数据监听器可以用于监听和响应任何属性和数据字段的变化. 1.observers使用的前提条件 在微信小程序中数据监听器的使用是有几个前提条件的,否则是无法 ...
- 微信小程序邀请好友增加积分
假设你的小程序中已经有了一个邀请好友的按钮或页面,那么可以在相应的触发事件中添加以下代码: // 监听邀请好友成功事件 wx.onShareAppMessage(() => {// 增加2积分l ...
最新文章
- 一次写多个字节的方法 || 数据追加续写
- .NET Core 3.0 可回收程序集加载上下文
- bootstrap table入门例子
- Js将字符串转数字的方式
- git log 查看自己修改的行数_Git 笔记 day2
- HDU 2188 （巴什博弈）
- [易语言]易语言实现简单的答题软件
- 文件生成BASE64，base64转文件
- ceph部署-纠删码
- c语言实现费诺编码csdn,香农编码 哈夫曼编码 费诺编码的比较
- 交警对开车人的“真言”
- word添加参考文献和标注的方法
- 【无标题】python类报错：takes no arguments
- 淘宝经典差评中评好评和回复
- 历史名酒元氏益成永——宋曹贡酒
- 许昌西继电梯服务器显示ZY,许昌西继西门子电梯5000故障代码
- 小程序获取节点绑定数据data-index的方法
- 量化交易入门笔记-KD指标策略
- 十多位IT专家分享他们离不开的实用工具 1
- 机器学习和深度学习 习题训练 Day-1