Better Web Animation 网页动画优化

为所有网页的新加载、变化、移动和消失的内容提供可配置的平滑显现和动画效果,包括图片和元素位置、尺寸变化的平滑过渡。

这些是代码更新过的版本。 显示所有版本

  • v6.11 2024-11-07

    改进性能,修复bug,后面出了出现大问题,更新频率可能会很低

  • v6.0 2024-11-05

    一些废物功能,自己发现吧

  • v4.6 2024-11-05

    更新日志 v4.7

    • 新增功能:自动检测已有动画

      • 默认启用检测已有动画功能,避免对已具有动画的元素重复应用动画效果,提高性能和视觉体验。
    • 复杂页面自动检测与动画管理

      • 增加复杂页面检测功能:当页面元素数量超过默认的复杂度阈值(10000个元素)时,自动禁用动画,防止页面卡顿。
      • 实时监控页面突变率:MutationObserver 监测页面突变,若突变速率超过默认阈值(100 突变/秒),将自动禁用动画,并通过通知告知用户。
    • 优化设置界面

      • 设置界面不再直接覆盖网页,而是以独立模态窗口形式呈现,增加遮罩层,提升用户体验。
      • 默认值增加:频繁变化检测阈值(10 次变化/500毫秒)、复杂度阈值和突变阈值均带有合理默认值。
      • 新增加载时白屏开关,默认启用加载时渐入效果,用户可在设置中自行关闭。
    • 其他优化

      • 通过油猴菜单直接切换动画启用状态,并在界面显示动画是否启用。
      • 更新代码注释和优化部分功能逻辑,提高脚本性能和稳定性。
  • v4.5 2024-11-05
  • v4.5 2024-11-05

    修复b站弹幕bug

  • v4.4 2024-11-05
  • v4.4 2024-11-05

    添加了自动更新链接

  • v4.3 2024-11-04

    ## 更新日志

    ### 版本 4.3

    - 优化了 `MutationObserver` 的性能:引入节流处理,将回调频率限制为每 100 毫秒,减少高频率 DOM 变动对性能的影响,尤其适用于极长的网页。
    - 使用 `IntersectionObserver` 替代视口检测:通过 `IntersectionObserver` 仅对可见元素应用动画,提升滚动性能并减少动画开销。
    - 增强了动画样式的隔离性:为动画类名添加 `tampermonkey-` 前缀,避免与网站样式冲突。
    - 增加了特定网站的排除机制:在脚本内置了可配置的 `excludedSites` 列表,避免在特定网站上自动启用动画效果。
    - 更新了配置面板的用户体验:优化了面板布局和输入字段样式,提升用户自定义动画设置的便捷性。

    ### 版本 4.2

    - 修复了网页底部内容被重复的问题:修改了 `MutationObserver` 处理被移除节点的逻辑,避免将节点重复插入 DOM,从而解决了底部内容重复的现象。
    - 移除了介绍页的相关功能:删除了嵌入介绍页的代码,以精简脚本。
    - 优化了动画逻辑:在节点移除前应用离开动画,避免在动画结束前重新插入元素导致的重复问题。
    - 对渐隐动画增加检查,确保不会对已经应用了离开动画的元素重复执行。

    ### 版本 4.1

    - 添加多语言支持:根据用户的浏览器语言选择中文或英文显示配置面板。
    - 解决频繁变更检测的问题:通过 `changeRecords` 管理频繁变更的记录,避免对频繁变化的元素重复应用动画。
    - 在 Bilibili 视频页面中,忽略了特定的 XPath 元素,防止其受到动画处理。
    - 增加了设置菜单,用户可以通过 Tampermonkey 提供的菜单自定义动画效果。

    ### 版本 4.0

    - 初步实现了网页内容的平滑显现和过渡效果。
    - 支持对新加载的元素、属性变化、文本变化等进行动画处理。
    - 添加了多个动画类型,包括淡入淡出(Fade)、缩放(Zoom)、旋转(Rotate)、滑动(Slide)。
    - 添加了配置面板,用户可以自定义动画类型和动画时长。

    ### 版本 3.0

    - 引入 `MutationObserver` 以检测 DOM 变化,实现对新增、修改、删除的元素进行动画处理。
    - 为特定类型的元素添加默认动画效果,如图像加载时的淡入效果。
    - 增加了对特定属性变化(如 `src` 和 `style`)的过渡动画支持。

    ### 版本 2.0

    - 增加了动画类型选择功能:用户可以选择是否启用淡入淡出、缩放、旋转等动画。
    - 添加了对用户配置的支持,使用 Tampermonkey 的 `GM_setValue` 和 `GM_getValue` 来保存用户的动画设置。
    - 实现了设置面板功能,用户可以通过菜单按钮弹出配置窗口。

    ### 版本 1.0

    - 实现了基础的平滑显现和隐藏动画。
    - 为新加载的网页内容提供渐显效果,提升用户体验。
    - 增加了 Tampermonkey 菜单命令,以便用户手动启用或禁用脚本。

  • v4.2 2024-11-04