Apple Music 歌词动效如何高效实现
subframe75361 · subframe7536 · 2023-03-02 08:31:03 +08:00 · 1808 次点击这是一个创建于 632 天前的主题，其中的信息可能已经有所发展或是发生改变。
找到的源码： https://github.com/solstice23/refined-now-playing-netease
实现方式是虚拟列表，每个词一个元素，transform + opacity 变换，监听滚动事件，但是显卡直接拉满
有什么其他实现方式？ canvas/svg ？
 |
1
jalena 2023-03-02 08:39:49 +08:00
把它的代码拿过来
|
 |
2
VeryZero 2023-03-02 08:57:09 +08:00
Apple Music 有网页版，去扒代码
|
 |
3
musi 2023-03-02 09:12:19 +08:00  1
一行两个容器，一个浅色字体，一个深色字体，逐渐让深色字体容器的宽度增大
|
 |
4
subframe75361 OP @musi #3
每个词唱到的时候会有轻微上移，这样没法实现 |
 |
5
wednesdayco 2023-03-02 09:24:41 +08:00
opacity 用 background-clip 实现？
|
 |
6
abc2237512422 2023-03-02 16:03:51 +08:00 1
其实吃显卡的是流体背景，歌词本身占用不高的
渐变截断歌词用的是 CSS mask 属性，可以在右上角设置切换 |
 |
7
HandlerMethod 269 天前
@subframe75361 想问下歌词滚动上去这个动效(类似波浪效果?)是怎么实现的
|
|
8
subframe75361 OP |
Select Language