|
@@ -170,16 +170,7 @@ export struct LyricView2 {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@State blurDegree: number = 3
|
|
@State blurDegree: number = 3
|
|
|
- private calculateBlurFactor(index: number, currentIndex: number): number {
|
|
|
|
|
- const distance = Math.abs(index - currentIndex);
|
|
|
|
|
- return Math.min(this.blurDegree, distance * 1.5);// Adjust the blur factor based on distance
|
|
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
- private calculateOpacityFactor(index: number, currentIndex: number): number {
|
|
|
|
|
- const distance = Math.abs(index - currentIndex);
|
|
|
|
|
- let maxOp = Math.max(0.3,1-this.blurDegree*0.2)
|
|
|
|
|
- return Math.max(maxOp, 1 - distance * 0.08); // 透明度随着距离增加而减小
|
|
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 优化建议代码示例:增加滚动节流
|
|
// 优化建议代码示例:增加滚动节流
|
|
@@ -215,9 +206,7 @@ export struct LyricView2 {
|
|
|
.padding(8)
|
|
.padding(8)
|
|
|
.transition(TransitionEffect.asymmetric(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }),
|
|
.transition(TransitionEffect.asymmetric(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }),
|
|
|
TransitionEffect.scale({ x: 0, y: 0 }) ))
|
|
TransitionEffect.scale({ x: 0, y: 0 }) ))
|
|
|
- // .transition(TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.BOTTOM).animation({ duration: 500,curve: Curve.Ease, delay: 100*index }),
|
|
|
|
|
- // TransitionEffect.scale({ x: 0, y: 0 }) ))
|
|
|
|
|
- .border({ radius: 4 })
|
|
|
|
|
|
|
+ .border({ radius: 12 })
|
|
|
.backgroundColor(this.seekUIStyle == 'listItem' && index == this.seekIndex && item.text.length > 0
|
|
.backgroundColor(this.seekUIStyle == 'listItem' && index == this.seekIndex && item.text.length > 0
|
|
|
&& this.enableSeek && this.isUserTouching ? '#80a9a9a9' : '#00000000')
|
|
&& this.enableSeek && this.isUserTouching ? '#80a9a9a9' : '#00000000')
|
|
|
.onClick(() => {
|
|
.onClick(() => {
|
|
@@ -235,8 +224,8 @@ export struct LyricView2 {
|
|
|
.width('100%')
|
|
.width('100%')
|
|
|
.height('100%')
|
|
.height('100%')
|
|
|
.scrollBar(BarState.Off)
|
|
.scrollBar(BarState.Off)
|
|
|
|
|
+ .fadingEdge(true,{fadingEdgeLength:LengthMetrics.percent(20)})
|
|
|
.cachedCount(this.cacheSize)
|
|
.cachedCount(this.cacheSize)
|
|
|
- .fadingEdge(true,{fadingEdgeLength:LengthMetrics.percent(40)})
|
|
|
|
|
.transition(TransitionEffect.asymmetric(
|
|
.transition(TransitionEffect.asymmetric(
|
|
|
this.isSingleLine? TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }):
|
|
this.isSingleLine? TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }):
|
|
|
TransitionEffect.move(TransitionEdge.BOTTOM).animation({ duration: 500 }),
|
|
TransitionEffect.move(TransitionEdge.BOTTOM).animation({ duration: 500 }),
|
|
@@ -286,8 +275,6 @@ export struct LyricView2 {
|
|
|
Column(){
|
|
Column(){
|
|
|
Text(item.text)
|
|
Text(item.text)
|
|
|
.fontSize(this.textSize)
|
|
.fontSize(this.textSize)
|
|
|
- .opacity(this.calculateOpacityFactor(index, this.currentIndex))
|
|
|
|
|
- .blur(this.calculateBlurFactor(index, this.currentIndex))
|
|
|
|
|
.textAlign(this.alignMode == 'center' ? TextAlign.Center : TextAlign.Start)
|
|
.textAlign(this.alignMode == 'center' ? TextAlign.Center : TextAlign.Start)
|
|
|
.scale({
|
|
.scale({
|
|
|
x: index == this.currentIndex ? this.controller.getHighlightScale() : 1,
|
|
x: index == this.currentIndex ? this.controller.getHighlightScale() : 1,
|
|
@@ -311,8 +298,6 @@ export struct LyricView2 {
|
|
|
index == this.currentIndex ? this.textHighlightColor : this.textColor : this.textColor)
|
|
index == this.currentIndex ? this.textHighlightColor : this.textColor : this.textColor)
|
|
|
.fontWeight(index == this.currentIndex && this.isHighlightBold ? FontWeight.Bold : this.textWeight)
|
|
.fontWeight(index == this.currentIndex && this.isHighlightBold ? FontWeight.Bold : this.textWeight)
|
|
|
.margin({ top: 4 })
|
|
.margin({ top: 4 })
|
|
|
- .opacity(this.calculateOpacityFactor(index, this.currentIndex))
|
|
|
|
|
- .blur(this.calculateBlurFactor(index, this.currentIndex))
|
|
|
|
|
}
|
|
}
|
|
|
.justifyContent(this.alignMode === 'center' ? FlexAlign.Center : FlexAlign.Start)
|
|
.justifyContent(this.alignMode === 'center' ? FlexAlign.Center : FlexAlign.Start)
|
|
|
.width(this.alignMode == 'center' ? '100%' :index == this.currentIndex ?'95%': '85%')
|
|
.width(this.alignMode == 'center' ? '100%' :index == this.currentIndex ?'95%': '85%')
|
|
@@ -335,8 +320,6 @@ export struct LyricView2 {
|
|
|
.fontWeight(this.currentMediaPosition >= word.startTime && this.isHighlightBold ?
|
|
.fontWeight(this.currentMediaPosition >= word.startTime && this.isHighlightBold ?
|
|
|
index == this.currentIndex? FontWeight.Bold : this.textWeight: this.textWeight)
|
|
index == this.currentIndex? FontWeight.Bold : this.textWeight: this.textWeight)
|
|
|
.margin(isEnglish(word.word) ?{ right:4 }:{})
|
|
.margin(isEnglish(word.word) ?{ right:4 }:{})
|
|
|
- .opacity(this.calculateOpacityFactor(index, this.currentIndex))
|
|
|
|
|
- .blur(this.calculateBlurFactor(index, this.currentIndex))
|
|
|
|
|
.visibility(this.isSingleLine?
|
|
.visibility(this.isSingleLine?
|
|
|
(index == this.currentIndex ?Visibility.Visible:Visibility.None)
|
|
(index == this.currentIndex ?Visibility.Visible:Visibility.None)
|
|
|
:Visibility.Visible)
|
|
:Visibility.Visible)
|
|
@@ -362,8 +345,6 @@ export struct LyricView2 {
|
|
|
index == this.currentIndex ? this.textHighlightColor : this.textColor : this.textColor)
|
|
index == this.currentIndex ? this.textHighlightColor : this.textColor : this.textColor)
|
|
|
.fontWeight(index == this.currentIndex && this.isHighlightBold ? FontWeight.Bold : this.textWeight)
|
|
.fontWeight(index == this.currentIndex && this.isHighlightBold ? FontWeight.Bold : this.textWeight)
|
|
|
.margin({ top: 4 })
|
|
.margin({ top: 4 })
|
|
|
- .opacity(this.calculateOpacityFactor(index, this.currentIndex))
|
|
|
|
|
- .blur(this.calculateBlurFactor(index, this.currentIndex))
|
|
|
|
|
}
|
|
}
|
|
|
.justifyContent(this.alignMode === 'center' ? FlexAlign.Center : FlexAlign.Start)
|
|
.justifyContent(this.alignMode === 'center' ? FlexAlign.Center : FlexAlign.Start)
|
|
|
.width(this.alignMode == 'center' ? '100%' :index == this.currentIndex ?'95%': '85%')
|
|
.width(this.alignMode == 'center' ? '100%' :index == this.currentIndex ?'95%': '85%')
|