• 请不要在回答技术问题时复制粘贴 AI 生成的内容
subframe75361
V2EX  ›  程序员

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

  •  
  •   subframe75361 ·
    subframe7536 · Mar 2, 2023 · 3532 views
    This topic created in 1344 days ago, the information mentioned may be changed or developed.

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

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

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

    8 replies  •  2024-02-28 21:23:51 +08:00
    jalena
    jalena
    Mar 2, 2023
    1
    把它的代码拿过来
    VeryZero
    VeryZero
    Mar 2, 2023
    2
    Apple Music 有网页版,去扒代码
    musi
    musi
    Mar 2, 2023❤️1
    3
    一行两个容器,一个浅色字体,一个深色字体,逐渐让深色字体容器的宽度增大
    subframe75361
    subframe75361
    OP
    Mar 2, 2023
    4
    @musi #3
    每个词唱到的时候会有轻微上移,这样没法实现
    wednesdayco
    wednesdayco
    Mar 2, 2023
    5
    opacity 用 background-clip 实现?
    abc2237512422
    abc2237512422
    Mar 2, 2023❤️1
    6
    其实吃显卡的是流体背景,歌词本身占用不高的

    渐变截断歌词用的是 CSS mask 属性,可以在右上角设置切换
    HandlerMethod
    HandlerMethod
    Feb 28, 2024
    7
    @subframe75361 想问下歌词滚动上去这个动效(类似波浪效果?)是怎么实现的
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2719 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 13:31 · PVG 21:31 · LAX 05:31 · JFK 08:31
    ♥ Do have faith in what you're doing.