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

前端是否有办法根据用户设备性能自动减弱过渡动画效果?

  •  
  •   drymonfidelia · Apr 27, 2025 · 2027 views
    This topic created in 408 days ago, the information mentioned may be changed or developed.
    2 replies    2025-04-27 19:58:53 +08:00
    geelaw
        1
    geelaw  
       Apr 27, 2025
    CSS 动画和 requestAnimationFrame 都是“浏览器认为的最佳动画时机”,除此之外 prefers-reduced-motion 表明用户不想看动画(比如晕动画的人),除此之外 setTimeout 的运行时机实际上也不会超过客户端的性能。
    w568w
        2
    w568w  
       Apr 27, 2025
    有个 Long Animation Frames API ,可以在动画和响应掉帧的时候调用指定回调: https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/Long_animation_frame_timing

    可以设置一个 threshold ,比如掉帧在 5s 内超过 10 次就改为弱动画。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   921 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 41ms · UTC 20:25 · PVG 04:25 · LAX 13:25 · JFK 16:25
    ♥ Do have faith in what you're doing.