减少播放时对CPU与GPU的使用

pull/96/head
lyswhut 2019-10-27 17:35:29 +08:00
parent 501231adff
commit 1bd8694262
2 changed files with 16 additions and 8 deletions

View File

@ -1,3 +1,3 @@
#### 修复
#### 优化
- 修复没有配置文件时程序启动出错的问题
- 大幅减少程序播放时对CPU与GPU的使用

View File

@ -27,7 +27,7 @@ div(:class="$style.player")
div(:class="$style.column2")
div(:class="$style.progress")
//- div(:class="[$style.progressBar, $style.progressBar1]" :style="{ transform: `scaleX(${progress || 0})` }")
div(:class="[$style.progressBar, $style.progressBar2]" :style="{ transform: `scaleX(${progress || 0})` }")
div(:class="[$style.progressBar, $style.progressBar2, isActiveTransition ? $style.barTransition : '']" @transitionend="handleTransitionEnd" :style="{ transform: `scaleX(${progress || 0})` }")
div(:class="$style.progressMask" @click='setProgess' ref="dom_progress")
div(:class="$style.column3")
span {{nowPlayTimeStr}}
@ -88,6 +88,7 @@ export default {
msDownX: 0,
msDownVolume: 0,
},
isActiveTransition: false,
}
},
computed: {
@ -367,13 +368,14 @@ export default {
},
setProgess(e) {
if (!this.audio.src) return
this.isActiveTransition = true
this.audio.currentTime =
(e.offsetX / this.pregessWidth) * this.maxPlayTime
if (!this.isPlay) this.audio.play()
},
setProgessWidth() {
this.pregessWidth = parseInt(
window.getComputedStyle(this.$refs.dom_progress, null).width
window.getComputedStyle(this.$refs.dom_progress, null).width,
)
},
togglePlay() {
@ -503,6 +505,10 @@ export default {
},
})
},
handleTransitionEnd(e) {
// console.log(e)
this.isActiveTransition = false
},
},
}
</script>
@ -693,21 +699,23 @@ export default {
width: 100%;
height: 100%;
transform-origin: 0;
transition-property: transform;
transition-timing-function: ease-out;
border-radius: @radius-progress-border;
}
.progress-bar1 {
transition-duration: 0.6s;
background-color: @color-player-progress-bar1;
}
.progress-bar2 {
transition-duration: 0.2s;
background-color: @color-player-progress-bar2;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}
.bar-transition {
transition-property: transform;
transition-timing-function: ease-out;
transition-duration: 0.2s;
}
.column3 {
transition: @transition-theme;
transition-property: color;