HarmonyOS鸿蒙Next中歌词高亮效果

HarmonyOS鸿蒙Next中歌词高亮效果 如图，歌词从左到右高亮的效果怎么做？完全没啥思路啊

cke_154.png


更多关于HarmonyOS鸿蒙Next中歌词高亮效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

可以使用linearGradient与blendMode结合实现文字渐变效果，在结合动画来实现滚动的效果，参考：https://developer.huawei.com/consumer/cn/forum/topic/0202153757892620565

更多关于HarmonyOS鸿蒙Next中歌词高亮效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


如果歌词太长了，变成多行了，
好像变成整体从左到右了，
能分每一行这个动效吗？

歌词换行逻辑要自己判断，只有当前定位到的一行歌词需要文字渐变效果，其他歌词用普通文本即可。

就是这样写的，但是歌词太多了自动换行了，用上渐变后，是整体从左到右渐变的，没有单行渐变，

在HarmonyOS鸿蒙Next中实现歌词高亮效果，可以通过使用Text组件结合Span来实现。Span允许对文本的某一部分进行样式设置，包括颜色、字体大小等。以下是一个简单的示例代码：

import { Text, Span } from '@ohos/text';

// 假设这是歌词文本
const lyrics = "这是第一句歌词，这是第二句歌词，这是第三句歌词";

// 假设这是需要高亮的歌词部分
const highlightText = "第二句歌词";

// 找到高亮部分的起始和结束位置
const startIndex = lyrics.indexOf(highlightText);
const endIndex = startIndex + highlightText.length;

// 创建Text组件
const textComponent = new Text();

// 设置文本内容
textComponent.text = lyrics;

// 创建Span组件并设置高亮样式
const span = new Span();
span.text = highlightText;
span.style = { color: '#FF0000', fontSize: '20px' };

// 将Span应用到Text组件中
textComponent.addSpan(span, startIndex, endIndex);

// 将Text组件添加到页面中
// 假设page是当前页面的引用
page.addComponent(textComponent);

在这个示例中，Text组件用于显示歌词，Span组件用于对需要高亮的部分进行样式设置。通过addSpan方法，将Span应用到Text组件的指定位置，从而实现歌词的高亮效果。

在HarmonyOS鸿蒙Next中实现歌词高亮效果，可以通过Text组件结合Span组件来实现。首先，使用Text组件显示歌词，然后通过Span组件对当前播放的歌词进行高亮处理。可以通过设置Span的textColor属性为高亮颜色，并动态更新Span的范围来匹配当前播放的歌词位置。此外，可以利用Timer或Animation组件实现歌词的逐字高亮效果，提升用户体验。

回到顶部