Apple Music 歌词动效如何高效实现

[subframe75361]

找到的源码： https://github.com/solstice23/refined-now-playing-netease

实现方式是虚拟列表，每个词一个元素，transform + opacity 变换，监听滚动事件，但是显卡直接拉满

有什么其他实现方式？ canvas/svg ？

[jalena]

把它的代码拿过来

[VeryZero]

Apple Music 有网页版，去扒代码

[musi]

一行两个容器，一个浅色字体，一个深色字体，逐渐让深色字体容器的宽度增大

[subframe75361]

@musi #3
每个词唱到的时候会有轻微上移，这样没法实现

[wednesdayco]

opacity 用 background-clip 实现？

[abc2237512422]

其实吃显卡的是流体背景，歌词本身占用不高的

渐变截断歌词用的是 CSS mask 属性，可以在右上角设置切换

[HandlerMethod]

@subframe75361 想问下歌词滚动上去这个动效(类似波浪效果?)是怎么实现的

[subframe75361]

@HandlerMethod 有大佬写了开源的： https://github.com/Steve-xmh/applemusic-like-lyrics