From 1bd8694262277e10949a54a538fd3f7cc6f4f955 Mon Sep 17 00:00:00 2001
From: lyswhut <lyswhut@qq.com>
Date: Sun, 27 Oct 2019 17:35:29 +0800
Subject: [PATCH] =?UTF-8?q?=E5=87=8F=E5=B0=91=E6=92=AD=E6=94=BE=E6=97=B6?=
 =?UTF-8?q?=E5=AF=B9CPU=E4=B8=8EGPU=E7=9A=84=E4=BD=BF=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 publish/changeLog.md                    |  4 ++--
 src/renderer/components/core/Player.vue | 20 ++++++++++++++------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/publish/changeLog.md b/publish/changeLog.md
index 4d2ffee6..1c6d6a07 100644
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@@ -1,3 +1,3 @@
-#### 修复
+#### 优化
 
-- 修复没有配置文件时程序启动出错的问题
+- 大幅减少程序播放时对CPU与GPU的使用
diff --git a/src/renderer/components/core/Player.vue b/src/renderer/components/core/Player.vue
index a5898655..76df3f73 100644
--- a/src/renderer/components/core/Player.vue
+++ b/src/renderer/components/core/Player.vue
@@ -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;