css+js实现录⾳环形进度条
在html5或者移动端开发中，如果需要⽤户录⾳功能，那么应该是需要⽤户点击触发动画来实现⼀个录⾳的动效或者控制时间1. 简单实现⼀个滚动条效果
具体效果如下：
可以⾃定义圆环的轨道灰⾊为其他⾊或者透明，也可以⾃定义进度条的颜⾊为别的颜⾊，中间是⼀个图⽚，可以⾃定义
代码如下：
1. html代码
<div class="record-container">
<div class="circle_process"@touchstart="startRecord"@touchend="stopRecord"@touchcancel="stopRecord">
<div class="wrapper right">
<div class="circle rightcircle"ref="rightCircle"></div>
</div>
<div class="wrapper left">
<div class="circle leftcircle"ref="leftCircle"></div>
</div>
<div class="middle-circle">
<!--这⾥不要直接使⽤图⽚作为中间的录制图⽚，ios上按压会默认提⽰保存图⽚-->
<!--<img src="../images/record/record_btn_mini.png" alt="">-->
</div>
</div>
</div>
2. css代码
.record-container{
margin-top: 2.5rem;
}
.circle_process{
position: relative;
width: 200px;
height: 140px;
margin: 30px auto 5px;
}
.circle_process .wrapper{
width: 70px;
js控制滚动条
height: 140px;
position: absolute;
top:0;
overflow: hidden;
}
.circle_process .right{
right: 31px;
}
.
circle_process .left{
.circle_process .left{
left: 30px;
}
.circle_process .circle{
width: 120px;
height: 120px;
border: 10px solid #666;
border-radius: 50%;
position: absolute;
top:0;
transform:rotate(-135deg);
}
.circle_process .rightcircle{
border-top: 10px solid rgb(57, 135, 239);
border-right: 10px solid rgb(57, 135, 239);
right:0;
}
.circle_process .leftcircle{
border-bottom: 10px solid rgb(57, 135, 239);
border-left: 10px solid rgb(57, 135, 239);
left:0;
}
.active-animation-right{
animation: circle_right 4s linear forwards;
-webkit-animation: circle_right 4s linear forwards;
}
.active-animation-left{
animation: circle_right 4s linear forwards;
-webkit-animation: circle_left 4s linear forwards;
}
@-webkit-keyframes circle_right{
0%{
-
webkit-transform:rotate(-135deg);
}
50%,100%{
-webkit-transform:rotate(45deg);
}
}
@-webkit-keyframes circle_left{
0%,50%{
-webkit-transform:rotate(-135deg);
}
100%{
-
webkit-transform:rotate(45deg);
}
}
.paused-animation{
animation-play-state: paused;
-webkit-animation-play-state: paused;/* Safari 和 Chrome */
}
.active-animation{
animation-play-state: running;
-webkit-animation-play-state: running;/* Safari 和 Chrome */
}
.
middle-circle{
width: 30px;
height: 72px;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
background:url("../images/record/record_btn_mini.png") no-repeat center 100% / 100%;
background:url("../images/record/record_btn_mini.png") no-repeat center 100% / 100%;
}
.middle-circle img{
display: block;
width: 30px;
height: 72px;
}
3. js代码，控制触摸进度条就开始增加
js代码是基于vue实现，因为获取dom都是直接使⽤的jquery获取， 也可以直接使⽤到js中，基本都差不多
import $ from'jquery'
export default{
data(){
return{
leftCircleAnim:'',
rightCircleAnim:'',
startTime:'',
endTime:'',
flag:0
}
},
watch:{
flag:{
handler:function(newVal, oldVal){
if(newVal ===-1&& oldVal ===1){
// 通过删除增加类名，达到重新开始动画
$('.rightcircle').removeClass('active-animation-right')
$('.leftcircle').removeClass('active-animation-left')
}
}
}
},
methods:{
startRecord(e){
e.preventDefault()// 在触摸事件执⾏时阻⽌⿏标时间的发⽣
const _this =this
this.startTime =new Date().getTime()
this.flag =-1// 第⼆次重洗开始动画，这个触发watch监听
setTimeout(()=>{
$('.rightcircle').addClass('active-animation-right')
$('.leftcircle').addClass('active-animation-left')
},100)
$('.rightcircle').css('-webkit-animation-play-state','running')
$('.leftcircle').css('-webkit-animation-play-state','running')
},
stopRecord(e){
this.flag =-(this.flag)// 判断是否是⼿动停⽌、5秒⾃动停⽌或者是满1分钟后⾃动停⽌但是还在触摸状态if(this.flag >0){
$('.rightcircle').css('-webkit-animation-play-state','paused')
$('.leftcircle').css('-webkit-animation-play-state','paused')
// 如果录⾳时间⼩于500ms 则重置动画，不录⾳
dTime -this.startTime <500){
this.startTime =0
// 重置动画
$('.rightcircle').removeClass('active-animation-right')
$('.leftcircle').removeClass('active-animation-left')
return false
}
}
}
}
}
js代码就是主要控制进度条的开始和结束，就是给对应的元素加上动画和移除动画，达到动画可以反复使⽤，watch监听主要是⽤在第⼀次录⾳完成，第⼆次还想要重新再录⼀次，那么动画就要重头开始，就使⽤watch来完成是否重新开始运⾏动画。
并且在录⾳时间⼩于500ms，动画就会⾃动重置。
注意：
中间的图⽚需要使⽤背景图⽚来做，否则ios上长按系统会提⽰保存图⽚，设置为背景图⽚就正常

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。