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

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

  •  
  •   subframe75361 ·
    subframe7536 · Mar 2, 2023 · 2856 views
    This topic created in 1169 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
        1
    jalena  
       Mar 2, 2023
    把它的代码拿过来
    VeryZero
        2
    VeryZero  
       Mar 2, 2023
    Apple Music 有网页版,去扒代码
    musi
        3
    musi  
       Mar 2, 2023   ❤️ 1
    一行两个容器,一个浅色字体,一个深色字体,逐渐让深色字体容器的宽度增大
    subframe75361
        4
    subframe75361  
    OP
       Mar 2, 2023
    @musi #3
    每个词唱到的时候会有轻微上移,这样没法实现
    wednesdayco
        5
    wednesdayco  
       Mar 2, 2023
    opacity 用 background-clip 实现?
    abc2237512422
        6
    abc2237512422  
       Mar 2, 2023   ❤️ 1
    其实吃显卡的是流体背景,歌词本身占用不高的

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