优化播放进度条的动画效果

publish/changeLog.md

@@ -6,3 +6,4 @@
 ### 优化
 
 - 优化月里嫦娥皮肤侧栏鼠标悬浮颜色
+- 优化播放进度条的动画效果

src/main/events/winEvent.js

@@ -0,0 +1,13 @@
+module.exports = mainWindow => {
+  mainWindow.on('close', () => {
+    mainWindow.setProgressBar(-1)
+  })
+
+  mainWindow.on('closed', () => {
+    mainWindow = global.mainWindow = null
+  })
+
+  mainWindow.on('restore', () => {
+    mainWindow.webContents.send('restore')
+  })
+}

src/main/index.js

@@ -26,6 +26,7 @@ global.envParams = parseEnv()
 
 require('../common/error')
 require('./events')
+const winEvent = require('./events/winEvent')
 const autoUpdate = require('./utils/autoUpdate')
 const { isLinux, isMac } = require('../common/utils')
 
@@ -67,13 +68,7 @@ function createWindow() {
 
   mainWindow.loadURL(winURL)
 
-  mainWindow.on('close', () => {
+  winEvent(mainWindow)
-    mainWindow.setProgressBar(-1)
-  })
-  mainWindow.on('closed', () => {
-    mainWindow = global.mainWindow = null
-  })
-
   // mainWindow.webContents.openDevTools()
 
   if (!isDev) {

src/renderer/components/core/Player.vue

@@ -48,7 +48,7 @@ div(:class="$style.player")
 
 <script>
 import Lyric from 'lrc-file-parser'
-import { rendererSend } from '../../../common/ipc'
+import { rendererSend, rendererOn } from '../../../common/ipc'
 import { formatPlayTime2, getRandom, checkPath, setTitle, clipboardWriteText, debounce } from '../../utils'
 import { mapGetters, mapActions, mapMutations } from 'vuex'
 import { requestMsg } from '../../utils/message'
@@ -128,6 +128,9 @@ export default {
       this.setVolume(volume)
     }, 300)
 
+    rendererOn('restore', () => {
+      this.handleSetTransition()
+    })
     document.addEventListener('mousemove', this.handleVolumeMsMove)
     document.addEventListener('mouseup', this.handleVolumeMsUp)
     window.addEventListener('resize', this.handleResize)
@@ -176,6 +179,9 @@ export default {
     volume(n) {
       this.handleSaveVolume(n)
     },
+    nowPlayTime(n, o) {
+      if (Math.abs(n - o) > 1) this.handleSetTransition()
+    },
   },
   methods: {
     ...mapActions('player', ['getUrl', 'getPic', 'getLrc']),
@@ -385,7 +391,7 @@ export default {
     },
     setProgess(e) {
       if (!this.audio.src) return
-      this.isActiveTransition = true
+      // this.isActiveTransition = true
       this.$nextTick(() => {
         const time = (e.offsetX / this.pregessWidth) * this.maxPlayTime
         if (this.audioErrorTime) this.audioErrorTime = time
@@ -566,6 +572,10 @@ export default {
       this.mediaBuffer.timeout = null
       this.mediaBuffer.playTime = 0
     },
+    handleSetTransition() {
+      this.isActiveTransition = true
+      // console.log('active transition')
+    },
   },
 }
 </script>