减少播放时对CPU与GPU的使用
parent
501231adff
commit
1bd8694262
|
@ -1,3 +1,3 @@
|
|||
#### 修复
|
||||
#### 优化
|
||||
|
||||
- 修复没有配置文件时程序启动出错的问题
|
||||
- 大幅减少程序播放时对CPU与GPU的使用
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue