HarmonyOS 鸿蒙Next：arkts canvas实现动感歌词

我尝试用arkts canvas来实现歌词功能，就是因为是动感歌词类型的，需要小于100ms内刷新canvas，从目前实现的效果来看，canvas经常卡住，动画效果也不平滑。

gougou168 1楼•1 个月前

模拟器卡很正常。

sinazl 2楼•1 个月前

我写的滑动在模拟器上卡顿，但是在真机上就正常。

sinazl 3楼•1 个月前

你可以用真机测试验证一下

yuanlaile 4楼•1 个月前

穷，没真机。。。。。

zlyuanteng 5楼•1 个月前

真机测试，卡顿问题，已解决

caililin 6楼•1 个月前

真机测试，并且更新了一下ui。卡顿问题已解决

https://developer.huawei.com/consumer/cn/blog/topic/03138542065815116

sinazl 7楼•1 个月前

直接List + Text 实现也应该可以吧。检测一下起始和终止索引号，得到居中索引，各行根据相对位置变化一下字体颜色就基本有类似效果了，当前行可根据需要用Span把文本分割用不同字色显示就有推进的感觉了，Canvas 绘制文字有点重了，模拟器本身卡顿否和分配的内存的CPU核数相关；总体上很吃电脑资源。

sinazl 8楼•1 个月前

hello，大脑，你这个动感歌词的实现能分享下吗，我想参考下

yuanlaile 9楼•1 个月前

期待HarmonyOS能在未来推出更多针对特定场景的优化功能。

zlyuanteng 10楼•1 个月前

给个以前写的其他平台代码，大家学习一下。 https://github.com/zhangliangming/HappyPlayer5，https://github.com/zhangliangming/HappyPlayer-PC

htzhanglong 11楼•1 个月前

https://github.com/zhangliangming/HappyPlayer-Uni

caililin 12楼•1 个月前

HarmonyOS的分布式文件系统让我在多设备间共享文件变得更加方便。

yibo5220 13楼•1 个月前

其实用其他原生组件实现可能性能更好，canvas的不断绘制在模拟器上就是卡顿

caililin 14楼•1 个月前

可以试试drawing的方式。

caililin 15楼•1 个月前

如果用滑块实现会不会更好

yibo5220 16楼•1 个月前

你这个是lrc歌词还是text文件啊，鸿蒙哪个组件支持歌词了？

bupafengyu 17楼•1 个月前

这个组件是自己写的，不是鸿蒙自带的。我这个是krc的歌词，是在文件里面读取出来的。

ionicwang 18楼•1 个月前

给个以前写的其他平台代码，大家学习一下。 https://github.com/zhangliangming/HappyPlayer5，https://github.com/zhangliangming/HappyPlayer-PC

itying888 19楼•1 个月前

https://github.com/zhangliangming/HappyPlayer-Uni

bupafengyu 20楼•1 个月前

在HarmonyOS（鸿蒙）系统中，使用ArkTS（ArkUI TypeScript）的Canvas组件来实现动感歌词功能，主要涉及到图形渲染和动画处理。首先，你需要利用Canvas API进行基础的图形绘制，如文本渲染，这可以通过CanvasRenderingContext2D的fillText或strokeText方法来实现。

为了创造动感效果，你可以通过修改文本的绘制位置、颜色、大小等属性，结合定时器（如setInterval或requestAnimationFrame）来不断更新Canvas上的歌词内容，从而实现滚动、闪烁或其他动态效果。

此外，考虑到歌词与音乐播放的同步性，你可能还需要监听音乐的播放进度，并根据播放时间调整显示的歌词行。这通常涉及到与音乐播放组件的交互，可能通过事件监听或状态管理来实现。

如果要在ArkTS中实现更复杂的动画效果，如渐变、旋转等，可以探索Canvas的更多高级功能，如路径绘制、渐变填充、变换矩阵等。

总之，实现动感歌词的关键在于合理使用Canvas的绘制和动画功能，并确保与音乐播放的同步。如果问题依旧没法解决，请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html ，以获取更专业的技术支持。