android 喇叭帧动画,CSS动画效果——语音播放小喇叭
写业务代码经常会碰到要自己实现一些设计交给的小动画,今天我们就来看下小喇叭那种类似倒过来的wifi图标一样的效果:
语音播放效果
对于这个有几种实现方案:一种是直接把图标.png文件放在下面,然后再在上面覆盖一层跟它弧度相似的圆形div,通过css的animation去控制那个覆盖的div从左向右移动,从而实现出这种效果(其实还是有区别的,用div控制移动就会出现一个一个逐渐出现且,会同时消失的场景,而不是这种波浪式的递推)另外一种是把这个图标切分成三块,通过布局调整每个小图标的间距,然后通过js去控制每个小图标的出现顺序以及时间,这种方法的好处就是很灵活,而且代码编写起来也比较直观。但是我们作为一个前端攻城狮不能老写偏中后台的逻辑代码,总得学会用css装饰自己吧,更何况现在css3的出现,页面的动画变得可以像ppt一样舒服了。所以我介绍下最后一种方式,就是用div块去设定border然后再给div一个border-radius:50%,做出三个圆调整好位置,然后用一个矩形的div转变角度去盖住这三个圆,最后通过css3的animation去控制渐进渐出,从而实现上图的效果!
话不多说上代码:
div结构
css代码外部div块以及圆环通用样式
css代码每个小环的大小、位置以及动画定义
渐进渐出动画效果定义
文末附上完整代码:
微信语音样式
margin: 0;
padding: 0;
}
.box {
width: 120px;
height: 120px;
box-sizing: border-box;
position: relative;
margin: 50px auto;
}
.wifi-symbol {
width: 50px;
height: 50px;
box-sizing: border-box;
overflow: hidden;
transform: rotate(135deg);
}
.wifi-circle {
border: 5px solid #999999;
border-radius: 50%;
position: absolute;
}
.first {
width: 5px;
height: 5px;
background: #cccccc;
top: 45px;
left: 45px;
}
.second {
width: 25px;
height: 25px;
top: 35px;
left: 35px;
animation: fadeInOut 1s infinite 0.2s;.
}
.third {
width: 40px;
height: 40px;
top: 25px;
left: 25px;
animation: fadeInOut 1s infinite 0.4s;
}
@keyframes fadeInOut {
0% {
opacity: 0; /*初始状态 透明度为0*/
}
100% {
opacity: 1; /*结尾状态 透明度为1*/
}
}
复制代码
方案二
微信语音播放动画:// html
复制代码
css3:
.voice{
padding-top: 12px;
padding-left: 10px;
margin: 100px auto;
height: 35px;
width: 150px;
background: #1bbc9b;
border-radius: 0 7px 7px;
}
.bg {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAAF6fiUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzlFRDZDRDNENzlFMTFFNkJDN0NFMjA2QTFFRTRDQkIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzlFRDZDRDJENzlFMTFFNkJDN0NFMjA2QTFFRTRDQkIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTAxQkEzQ0RENzM2MTFFNjgyMEI5MTNDRkQ0OTM5QUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTAxQkEzQ0VENzM2MTFFNjgyMEI5MTNDRkQ0OTM5QUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4K4iKVAAACUUlEQVR42uSazytEURTHvTHjR4kaU8xsSDZSdmbjx4oSK8XGQrJlpSwYTSmxEWWhUIpsZK3kD7DRNBuSBZFCNjZ+JPKcV6ecXu/d3sy7595bc+vbfXPue5/749z77o83lm3bZYYFC8RZqAbQAigP2tXNj5aZF7gdkAZNk9+7WvnOCCgxRUCb9n/o1sk3pUH6QDHF/GNsoM+QeYfiy6qkFeLZDBb0GlTB4AAR/xXT9nXxZVa0WCekQd9Y0HOJjg3CHySviiZmfjO3AyIhnu0gBc0wjAIR/wLtW8z87aAOWAI9gqaYRoAff4ZUoi7EKCiUP462j4CdSCrfK4N1Ahpi6I0i/hPa50M4oFB+Dbm/SzXfL5MD4rUogxP8+Itozynm59E+q5ovyuQdHxphWh568XvR5kxq1SEn40L4e0XMA1L4EcEe7RTjLqYdqRf/gezQUwr5LxjXq+aLHPCFcTmTA7z4tutIQhXfLiJPKXyRA/oxzgW8v9DgxU+S62eF/ATGr6r5fg26Corj9RHD4Z0fvwfjS9CbQn4bxrfK+R6TyzxZNk260solTL4i/g3al10TsMXIryA72T7VfK8MnJO8X9CKy14lafXjxx8jFUsSeyUzfxhtPwHPoqTy/TJJMJzJiPgNpJdsuNJizPwztB/q4JtwHN2KW3sn3HuMOouR30l6bbsOvgkOyGIBnaPbRldalJl/h2knuvgmOKAWNAFKMUz4Iv4O6Z1xXXxTPxtazHy6khnVyS/Fb8IDpHGyuvmWgX9L4Q4toDnQFWhNN/9PgAEAR4w1ULjdCbEAAAAASUVORK5CYII=) right 0 no-repeat;
width: 24px;
height: 24px;
background-size: 400%;
}
.voicePlay {
animation-name: voicePlay;
animation-duration: 1s;
animation-direction: normal;
animation-iteration-count: infinite;
animation-timing-function: steps(3);
}
@keyframes voicePlay {
0% {
background-position: 0;
}
100% {
background-position: 100%;
}
}复制代码
方案3 ---
html5 audio
思路
关于播放动画,这个很简单,我们可以用css3的逐帧动画来实现。关于逐帧动画,我之前的文章也写过:www.haorooms.com/post/zhuzhe…
图片如下:
除了动画之外,剩下的就是js对audio的控制了。
html5 audio
关于html5 audio标签,有很多属性,大家可以搜索一下,例如preload、autoplay、loop、controls等等。让其隐藏,我们可以添加一个隐藏参数,代码如下:复制代码
这样,这个audio 就可以隐藏显示,接下来我们就可以用js对其进行操作控制了。
audio常用方法addTextTrack() 向音频/视频添加新的文本轨道
canPlayType() 检测浏览器是否能播放指定的音频/视频类型
load() 重新加载音频/视频元素
play() 开始播放音频/视频
pause() 暂停当前播放的音频/视频复制代码
audio常用事件
事件对我们非常有用,可以通过判断音频是否加载完成,来进行动画的操作,例如,我们点击录音,先有一个加载loading动画,然后在变成我们前面所讲的逐帧动画。abort 当音频/视频的加载已放弃时
canplay 当浏览器可以播放音频/视频时
canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange 当音频/视频的时长已更改时
emptied 当目前的播放列表为空时
ended 当目前的播放列表已结束时
error 当在音频/视频加载期间发生错误时
loadeddata 当浏览器已加载音频/视频的当前帧时
loadedmetadata 当浏览器已加载音频/视频的元数据时
loadstart 当浏览器开始查找音频/视频时
pause 当音频/视频已暂停时
play 当音频/视频已开始或不再暂停时
playing 当音频/视频在已因缓冲而暂停或停止后已就绪时
progress 当浏览器正在下载音频/视频时
ratechange 当音频/视频的播放速度已更改时
seeked 当用户已移动/跳跃到音频/视频中的新位置时
seeking 当用户开始移动/跳跃到音频/视频中的新位置时
stalled 当浏览器尝试获取媒体数据,但数据不可用时
suspend 当浏览器刻意不获取媒体数据时
timeupdate 当目前的播放位置已更改时
volumechange 当音量已更改时
waiting 当视频由于需要缓冲下一帧而停止复制代码
例如如下代码:audio.onloadedmetadata = function () {
$(_this).removeClass("loading");
$(_this).addClass("playing");
}复制代码
当音频文件已经加载到浏览器之后,去除加载动画,增加播放动画。
js 操作音频文件播放暂停
如下代码可以控制audio播放还是暂停var audio = document.getElementById('haorooms');
if(audio!==null){
//检测播放是否已暂停.audio.paused 在播放器播放时返回false.
alert(audio.paused);
if(audio.paused) {
audio.play();//audio.play();// 这个就是播放
}else{
audio.pause();// 这个就是暂停
}
} 复制代码
当然也可以通过jquery轻松操作!var audio = $(that).children("audio")[0];//获取,这段代码直接从我们文件中copy而来,可以直接写$("audio")[0]
audio.load();//加载
audio.play();//播放
audio.pause();//暂停复制代码
值得注意的是,我们可以用定时器来让语音播放结束之后,动画去掉。
定时器可以用setTimeout来写!关于setTimeout,可以看我之前的文章!
定时器是一个变量!var second=$(that).data("second");//获取音频秒数
_this.dshiqi=setTimeout(function(){ //dshiqi是外层定义好的一个变量!
$(that).removeClass("playing");//播放完毕去除动画
},second*1000)复制代码
记得在每次切换点击的时候,清除之前的定时器clearTimeout(_this.dshiqi);复制代码
不清除定时器,来回点击录音,会有问题!
上面就是对html5的audio实现高仿微信语音播放效果简单总结,欢迎留言交流!
ps :好多朋友问有没有demo,找了一下,发现只有一个很挫的静态页面,是之前用jquery写的,大家将就着看下吧!
android 喇叭帧动画,CSS动画效果——语音播放小喇叭相关推荐
- android 小喇叭动画,CSS动画效果——语音播放小喇叭
写业务代码经常会碰到要自己实现一些设计交给的小动画,今天我们就来看下小喇叭那种类似倒过来的wifi图标一样的效果: 语音播放效果 对于这个有几种实现方案: 一种是直接把图标.png文件放在下面,然后再 ...
- CSS动画效果——语音播放小喇叭
写业务代码经常会碰到要自己实现一些设计交给的小动画,今天我们就来看下小喇叭那种类似倒过来的wifi图标一样的效果: 语音播放效果 对于这个有几种实现方案: 一种是直接把图标.png文件放在下面,然后再 ...
- CSS动画效果——语音播放小喇叭 (实用,赞)
原文出处:https://www.jianshu.com/p/5a3cfcc764f5 写业务代码经常会碰到要自己实现一些设计交给的小动画,今天我们就来看下小喇叭那种类似倒过来的wifi图标一样的效果 ...
- android语音动画,Android逐帧动画的简单使用-语音播放效果的实现
逐帧动画(Frame-By-Frame Animation)原理很简单,即快速切换不同的图片,形成动画效果.Android中逐帧动画的实现方式也很简单,下面以语音播放效果为例说明. 1. 首先准备图片 ...
- Android:使用帧布局实现霓虹灯效果
最终目的: 使用帧布局实现霓虹灯效果,要求用到线程,能显示变换不同的颜色的霓虹灯动画效果. 效果图 布局文件 主布局文件运用了FrameLayout布局和七个不同大小的TextView,内容居中显示, ...
- css 跳跃动画,CSS动画实例:跳跃的字符
1.翻转的字符 在页面中放置一个类名为container的层作为容器,在该层中放置5个字符区域,HTML代码描述如下: H E L L O 为container和span定义CSS样式规则,并定义实现 ...
- android 喇叭帧动画,Android动画详解-帧动画
帧动画就是顺序播放一组预先定义好的图片,就类似于我们观看视频,就是一张一张的图片连续播放. 帧动画的使用很简单,总共就两个步骤: 1.在res/drawable目录下定义一个XML文件,根节点为系统提 ...
- html向下滑动动画,CSS动画:(向下滑)slidedown效果_html/css_WEB-ITnose
我们依据上一篇文章的HTML代码结构,来实现一般焦点图片跳转时候的效果. HTML CSS .outer_box { width: 100px; height: 100px; border: #bbb ...
- android 语音播放工具,Android简易的仿微信聊天的语音播放控件
说到Android音频播放,可谓108式,方案众多,这里有一篇总结Android几种播放音频的方式的文章,传送门.本文旨在熟悉MediaPlayer的使用,遂此控件封装采用MediaPlayer实现. ...
最新文章
- amp 保留指定位c语言,C语言位运算符学习
- linux mysql 1030,MySQL报错ERROR 1030 (HY000): 解决过程
- 15.Result配置详解
- 4.9---4.16总结
- boost::callable_traits是否为is_volatile_member的测试程序
- L1-008. 求整数段和
- 打开Morrowind版本,Vector 36在Linux上的本机版本以及Hyper Light Drifter
- git依赖python_python爬虫之git的安装
- 2天驾驭div+css_老婆竟然只知道几个css伪类,不行得惩罚她了
- C 语言异常处理(五十二)
- 对JS中变量的浅微认识
- EF中CodeFirst中实体变化的处理方式
- 万里牛B轮融资过亿,电商SaaS究竟有多吸金?
- Unity3D 世界坐标转屏幕坐标的坑
- ExDirectUI 5.0 项目重构正式启动
- PC端后台项目的总结
- 计算机硬件技术基础 试题与答案,计算机硬件技术基础网上作业及答案
- 乘风破浪的中国数据库
- (已上传源码)最近开发的一款应用,我选择了哪些框架 第三方库
- 认识黑客常用的入侵方法