Better Web Animation 网页动画优化

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

Forfatter
马牛逼（Felix）
Daglige installasjoner
0
Totale installasjoner
51
Vurderinger
0 0 0
Versjon
6.11
Lagd
04.11.2024
Oppdatert
07.11.2024
Lisens
CC BY-NC 4.0
Gjelder
Alle sider

Feature Introduction

Animation Effects Support

  • Fade In and Fade Out: Webpage elements will have smooth fade-in and fade-out effects when loading or removing, enhancing the visual experience.
  • Zoom: New content will appear with a zoom-in effect, starting small and growing larger, providing a stronger visual impact.
  • Rotate: Elements can have a rotation animation effect when loaded, adding a sense of fun.
  • Slide: New elements can slide in from the bottom of the page, suitable for notifications or page updates.

Custom Configuration

  • Users can adjust the type and duration of the animation effects through the configuration panel in the Tampermonkey menu.
  • Fade In/Fade Out Duration and Property Transition Duration can be precisely controlled through configuration to meet different user preferences.
  • Exclude Specific Tags: Users can configure the script not to apply animations to certain specific HTML tags (e.g., script tags) to avoid unnecessary performance overhead.

Performance Optimization

  • Only Visible Elements: To enhance performance, the script will check if the element is visible on the page and only apply animation effects to visible elements.
  • Frequent Change Detection: By setting a threshold for frequently changing elements, the script avoids repeatedly applying animations to such elements, thereby reducing resource consumption.

Compatibility with Specific Pages

  • On Bilibili video pages, the script will ignore specific player area elements to prevent interference with the player, thereby improving compatibility and user experience on those pages.

If you want to help me make this project better, please submit a PR on Github

功能介绍

动画效果支持

  • 渐显与渐隐（Fade）：网页元素在加载或移除时会有平滑的渐显和渐隐效果，提升视觉体验。
  • 缩放（Zoom）：新加载的内容会有缩放进入的效果，从小到大显现，给用户更多的视觉冲击。
  • 旋转（Rotate）：元素加载时可以添加旋转动画，增加趣味性。
  • 滑动（Slide）：新元素可以从页面的底部滑入，适用于提示信息或页面更新的场景。

自定义配置

  • 用户可以通过 Tampermonkey 菜单中的配置面板，自行调整动画效果的类型和持续时间。
  • 渐显/渐隐持续时间、属性过渡持续时间 都可以通过配置进行精确控制，满足不同用户的偏好。
  • 排除特定标签：可以配置不对某些特定的 HTML 标签应用动画（如 script 标签），以避免不必要的性能消耗。

性能优化

  • 仅处理可见元素：为提高性能，脚本会检测元素是否在页面中可见，仅对可见的元素应用动画效果。
  • 频繁变更检测：通过设置频繁变化的阈值，避免对频繁变更的元素重复应用动画，减少资源消耗。

特定页面的兼容性

  • 在 Bilibili 视频页面中，脚本会忽略特定的播放器区域元素，防止对播放器造成干扰，从而提高页面的兼容性与用户体验。

如果你想帮助我把这个项目做得更好，请在Github上提交pr