Skip to content
This repository has been archived by the owner on Aug 19, 2023. It is now read-only.

Commit

Permalink
修改歌词动画细节，使逐字歌词观感更流畅
Browse files Browse the repository at this point in the history
  • Loading branch information
@gozaoo
gozaoo committed Aug 10, 2023
1 parent eeff886 commit 9a2b298
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 58 deletions.
10 changes: 5 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,14 +39,14 @@
"yargs": "^17.5.1"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.3.3",
"electron": "^25.5.0",
"vite": "^2.9.16",
"@electron-forge/cli": "^6.0.1",
"@electron-forge/maker-deb": "^6.0.1",
"@electron-forge/maker-squirrel": "^6.0.1",
"@electron-forge/maker-zip": "^6.0.1",
"@electron-forge/plugin-auto-unpack-natives": "^6.2.1",
"electron": "^24.0.0",
"@vitejs/plugin-vue": "^2.3.3",
"vite": "^2.9.16"
"@electron-forge/plugin-auto-unpack-natives": "^6.2.1"
},
"build": {
"win": {
Expand All @@ -66,4 +66,4 @@
},
"homepage": "https://github.com/Project-And-Factory/BlurLyric2.0#readme",
"config": {}
}
}
78 changes: 38 additions & 40 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -610,7 +610,8 @@
<h1 class="yrc"
:style="
{
'--progress': item.progressleft
'--progress': item.progressleft,
'--background-transition-linear-gradient-progress-width': 'calc(' + item.transfromWidth + ' + 0.25em)'
}
"
v-if="item.playing == true">
Expand Down Expand Up @@ -1214,17 +1215,18 @@ import { nextTick } from 'vue';
},
lyricFoundStr(info,time,i){
let strNowIndex = this.data.player.musicCache[this.id].lyric.yrc[i].index
// if(info[this.data.player.musicCache[this.id].lyric.yrc[i].index].t > time+0.35){
// strNowIndex = this.data.player.musicCache[this.id].lyric.yrc[i].index
const thisYrcLine = this.data.player.musicCache[this.id].lyric.yrc[i]
let strNowIndex = thisYrcLine.index
// if(info[thisYrcLine.index].t > time+0.35){
// strNowIndex = thisYrcLine.index
// } else {
// }
let _state = false //如果当前Index不得到正常取值，则执行寻找当前行
let makeProgress = ()=>{
if(this.data.player.musicCache[this.id].lyric.yrc[i]){
let nowStr = this.data.player.musicCache[this.id].lyric.yrc[i].c[strNowIndex]
if(thisYrcLine){
let nowStr = thisYrcLine.c[strNowIndex]
let progress = (((time - nowStr.t + 0.2) / nowStr.dur) * 100)
if(progress>=100){
_state = (progress>100)?true:false
Expand All @@ -1235,34 +1237,37 @@ import { nextTick } from 'vue';
_state = true
}
if(nowStr.width == undefined && strNowIndex != -1){
let tempStrIndex = this.data.player.musicCache[this.id].lyric.yrc[i].c.findIndex((v)=>{
let tempStrIndex = thisYrcLine.c.findIndex((v)=>{
return v.width ==undefined
})
if(this.data.player.musicCache[this.id].lyric.yrc[i].lastResizeTime == undefined) {this.data.player.musicCache[this.id].lyric.yrc[i].lastResizeTime= new Date()}
if(tempStrIndex == -1&&(this.data.player.musicCache[this.id].lyric.yrc[i].lastResizeTime < lastResizeTime)) {
if(thisYrcLine.lastResizeTime == undefined) {thisYrcLine.lastResizeTime= new Date()}
if(tempStrIndex == -1&&(thisYrcLine.lastResizeTime < lastResizeTime)) {
tempStrIndex = 0
this.data.player.musicCache[this.id].lyric.yrc[i].lastResizeTime= new Date()
thisYrcLine.lastResizeTime= new Date()
}
for(;tempStrIndex <= strNowIndex;tempStrIndex++){
// document.querySelector("#lyrics > li:nth-child(19)")
let thisStrElement = this.$refs.lyricBox.querySelector('#lyric li:nth-child('+(i+1)+') a:nth-child('+(tempStrIndex + 1)+')')
if(!thisStrElement) return
this.data.player.musicCache[this.id].lyric.yrc[i].c[tempStrIndex].width = thisStrElement.offsetWidth
this.data.player.musicCache[this.id].lyric.yrc[i].c[tempStrIndex].left = (tempStrIndex == 0)?0:
(this.data.player.musicCache[this.id].lyric.yrc[i].c[tempStrIndex-1].left + this.data.player.musicCache[this.id].lyric.yrc[i].c[tempStrIndex-1].width)
// if(this.data.player.musicCache[this.id].lyric.yrc[i].fontSize == undefined){
// this.data.player.musicCache[this.id].lyric.yrc[i].fontSize= window.getComputedStyle(thisStrElement).fontSize
// }
thisYrcLine.c[tempStrIndex].width = thisStrElement.offsetWidth
thisYrcLine.c[tempStrIndex].left = (tempStrIndex == 0)?0:
(thisYrcLine.c[tempStrIndex-1].left + thisYrcLine.c[tempStrIndex-1].width)
}
}
nowStr = this.data.player.musicCache[this.id].lyric.yrc[i].c[strNowIndex]
// console.log(this.data.player.musicCache[this.id].lyric.yrc[i].fontSize);
this.data.player.musicCache[this.id].lyric.yrc[i].progressleft = ((progress * nowStr.width * 0.01) + nowStr.left) + 'px'
let currProgressLeft = ((progress * nowStr.width * 0.01) + nowStr.left)
anime({
targets: thisYrcLine,
progressleft: currProgressLeft + 'px',
easing: 'linear',
duration: 60,
transfromWidth:()=>{
return (nowStr.width / nowStr.dur * 0.06) + 'px'
}
})
return progress
}
Expand All @@ -1280,7 +1285,9 @@ import { nextTick } from 'vue';
strNowIndex = info.length - 1
}
this.data.player.musicCache[this.id].lyric.yrc[i].index = strNowIndex
thisYrcLine.index = strNowIndex
}
let _tempProgress = makeProgress()
if(_state==true){
Expand Down Expand Up @@ -1417,7 +1424,9 @@ import { nextTick } from 'vue';
.lyricSet
.funcBlur](i - nowRendingLyric),
easing: (configContent.config.lyricSet
.funcDelay==false)?'cubicBezier(.3, .5, .2, 1)':'spring(1, 120, 13, 0)'
.funcDelay==false)?'cubicBezier(.3, .5, .2, 1)':'spring(1.3, 90, 15, 0)'
})
}
Expand Down Expand Up @@ -1464,27 +1473,16 @@ import { nextTick } from 'vue';
let transitionTime = (configContent.config.useTransitionNextMusic == true )?6:1
if ((( uiDisplay.duration - cur) <= transitionTime) && (progress != NaN) && (this.audio.readyState >=2) && (this
.audio.loop != true) && (transitionning == false)){this.transitionNextMusic(transitionTime)}
// let tempTickTime = Date.now()
// if(tickTime == undefined){
// tickTime = tempTickTime
// } else {
// let pastTime = tempTickTime - tickTime
// tickTime = tempTickTime
// lyricSide.style.setProperty('--pastTick',pastTime + 'ms')
// }
this.lyricSet()
// intoLoop()
this.lyricSet()
}
let intoLoop=async ()=>{
setTimeout(intoLoop, 100);
lyricSide.style.setProperty('--pastTick','100ms')
calculateTime()
setTimeout(() => {
intoLoop()
calculateTime()
}, 60);
}
Expand Down
3 changes: 2 additions & 1 deletion src/js/lyric.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,8 @@
index: 0,
width: undefined,
fontSize: undefined,
progressleft: 0 + '%',
progressleft: '0px',
transfromWidth: '0px',
lastResizeTime: undefined
}

Expand Down
14 changes: 2 additions & 12 deletions src/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1374,19 +1374,12 @@ ul#lyrics {
padding: .8em .3em;

min-height: 3em;
/* filter: none !important; */
min-width: 7em;
border-left: solid .2em #00000000;
transform-origin: .3em 60%;
/* --animation-speed-line: cubic-bezier(.25,.1,.25,1); */
/* --animation-speed-line:cubic-bezier(.3, .5, .2, 1); */
--dur: 850ms !important;
/* transition: color 0.6s */


}
#lyric ul li[displaying=true]{
/* transition: all calc(var(--dur) ) var(--animation-speed-line) ,filter 300ms,font-size 0s */
}
#lyric ul li[displaying=false]{
transition: none !important;
Expand Down Expand Up @@ -1447,13 +1440,11 @@ li div.Padding {


#lyric ul li[lyricFocus=true] h1.yrc{
--progress: 100%;
--progress: 0%;
display: inline;
background-origin: content-box;
background-clip: text;
/* --background-transition-linear-gradient-progress-width: 1px; */
--background-transition-linear-gradient-progress-width: .6em;
/* --background-transition-linear-gradient-progress-width: 1000em; */
--background-transition-linear-gradient-progress-width: .25em;
background: linear-gradient(90deg,rgb(0,0,0,.6) 0%,rgb(0,0,0,.6) calc(50% - calc(var(--background-transition-linear-gradient-progress-width)/2)), rgba(0,0,0,.12) calc(50% + calc(var(--background-transition-linear-gradient-progress-width)/2)),rgba(0,0,0,.12) 100%);
background-size: calc(200% + var(--background-transition-linear-gradient-progress-width) * 2) 100%;
-webkit-background-clip: text;
Expand All @@ -1462,7 +1453,6 @@ li div.Padding {
background-repeat: no-repeat;
color: transparent !important;
color: rgb(0, 0, 0, 0.6);
transition: background-position var(--pastTick) linear;
}
@keyframes toright{
0%{
Expand Down

0 comments on commit 9a2b298

Please sign in to comment.