Better Web Animation

Overview

The Better Web Animation userscript enhances the user experience on all websites by providing customizable, smooth animation effects for newly loaded, changed, moved, or disappearing content. This includes animations for images, position and size transitions, and other dynamic elements on the page. It offers multiple configuration options to tailor animation effects based on user preference or webpage complexity.

Features

• Smooth Animations: Adds fade-in, fade-out, zoom, rotate, and slide animations.
• Attribute & Position Transitions: Smooth transitions for element position and size changes.
• Configurable Animation Presets: Options include "Default," "Gentle," "Dynamic," and "Custom."
• Complexity & Mutation Detection: Automatically disables animations on complex or highly dynamic webpages to maintain performance.
• Multi-language Support: Supports both English and Chinese.
• In-Browser Settings Panel: Customizable animation settings accessible from a settings menu.

Installation

To use this script, you need a userscript manager such as Tampermonkey or Greasemonkey. Install this script by copying the code into your userscript manager.

Usage

1. Open the Settings Panel: Right-click on the userscript icon in your browser and choose Settings.
2. Toggle Animations: You can enable or disable all animations from the menu.
3. Configure Animations: Adjust animation types, durations, and conditions for triggering animations.

Configuration Options

• Presets:
  • Default: Basic fade-in and transition settings.
  • Gentle: Slower, smoother animations.
  • Dynamic: Fast and responsive animations.
  • Custom: Allows full customization of animation durations and effects.
• Animation Types:
  • Fade: Controls fade-in and fade-out effects.
  • Zoom, Rotate, Slide: Additional visual effects for loading elements.
• Threshold Settings:
  • Complexity Threshold: Maximum element count before animations are disabled.
  • Mutation Threshold: Controls animation disabling based on rapid content changes.
• Excluded Tags: Specify HTML tags to exclude from animations.

Supported Configuration Fields

• Fade-in & Fade-out Duration: Set the duration of fade animations.
• Transition Duration: Set duration for attribute transitions (e.g., color, opacity).
• Position & Size Transition: Smooth transitions for position or size changes.
• Change Detection: Detects and manages frequent changes in content to prevent performance issues.

License

This script is licensed under the Creative Commons BY-NC 4.0 License.

---

Better Web Animation 网页动画优化

概述

Better Web Animation 用户脚本为所有网站提供了平滑的动画效果，提升了用户体验。脚本支持对新加载、变化、移动和消失的内容进行可配置的动画效果，包括图片、元素位置及尺寸的平滑过渡，用户可以根据个人偏好或网页复杂度自定义动画效果。

功能特色

• 平滑动画：支持渐入、渐出、缩放、旋转和滑动等动画效果。
• 属性及位置过渡：为元素的位置和尺寸变化提供平滑的过渡效果。
• 动画预设：提供“默认”、“柔和”、“动感”和“自定义”预设。
• 复杂度和突变检测：在复杂或高动态网页上自动禁用动画，确保性能。
• 多语言支持：支持英文和中文。
• 浏览器内配置面板：可以通过设置菜单自定义动画选项。

安装

使用此脚本需安装用户脚本管理器，如 Tampermonkey 或 Greasemonkey。在用户脚本管理器中添加此脚本代码即可。

使用说明

1. 打开设置面板：右键单击浏览器中的用户脚本图标，选择 Settings。
2. 切换动画效果：可以在菜单中启用或禁用所有动画效果。
3. 配置动画：调整动画类型、持续时间和触发动画的条件。

配置选项

• 动画预设：
  • 默认：基本的渐入和过渡设置。
  • 柔和：较慢且更平滑的动画效果。
  • 动感：快速响应的动画效果。
  • 自定义：允许完全自定义动画的持续时间和效果。
• 动画类型：
  • 淡入/淡出：控制渐入和渐出的动画效果。
  • 缩放、旋转、滑动：加载元素的其他视觉效果。
• 阈值设置：
  • 复杂度阈值：元素数量达到上限后禁用动画。
  • 突变阈值：根据内容变化频率自动禁用动画。
• 排除标签：指定不需要应用动画的 HTML 标签。

配置字段

• 渐入和渐出持续时间：设置渐入和渐出动画的持续时间。
• 过渡持续时间：设置属性过渡的持续时间（如颜色、透明度）。
• 位置和尺寸过渡：位置或尺寸变化的平滑过渡效果。
• 变化检测：检测并管理频繁变化的内容，防止频繁变化影响页面性能。

协议

在本项目中使用了 知识共享署名-非商业性使用 4.0 国际许可协议 (CC BY-NC 4.0)，可以点击下方按钮查看详细信息：