您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

flutter-动画-像素增量

发布时间：2026-09-23 22:56:29编辑：雪饮阅读（）

动画
https://docs.flutter.dev/ui/animations
那这里第一个关键点就是理解这个图

总结起来核心就是
1. **Implicit Animations 隐式动画**：不用手动管理 AnimationController，改属性自动播放动画，以`AnimatedXXX`开头
2. **Explicit Animations 显式动画**：需要自己创建`AnimationController`，手动控制播放、倒放、循环，比如`XXXTransition`、`AnimatedBuilder`
3. **CustomPainter**：底层画布绘图，自己在 Canvas 上绘制一切
4. **Lottie/Flare**：导入 AE 设计导出的动效文件，直接渲染设计师做好的复杂动画
5. **TweenAnimationBuilder**：介于隐式、显式之间，无需 Controller，但可以自定义动画插值
接下来我们来实现模仿html的select的效果
https://gitee.com/xy220807/flutter-learning/commit/6366e56bcb5f8d240ff74950d313d61fb4000824

接下来我们看看动画化容器的属性
https://docs.flutter.dev/cookbook/animation/animated-container
接下来我们来看淡入小部件
https://docs.flutter.dev/cookbook/animation/opacity-animation

今天来看英雄动画
https://docs.flutter.dev/ui/animations/hero-animations
今天来看动画页面路径转换
https://docs.flutter.dev/cookbook/animation/page-route-animation
接下来看 使用物理模拟进行动画制作
https://docs.flutter.dev/cookbook/animation/physics-simulation
这里主要理解下像素增量

1. 先搞懂两个坐标系
Alignment 坐标系（Align 组件用的）：
• 原点 (0, 0) 在正中心
• x 范围 [-1, 1]：-1 是左边缘，1 是右边缘
• y 范围 [-1, 1]：-1 是上边缘，1 是下边缘
像素坐标系（details.delta 给的）：
• 单位是像素，比如向右拖了 50px
2. 为什么除以 size.width / 2
关键洞察：假如我要从中心移动到右边缘，从中心到右边缘，像素距离正好是半宽。
假定父容器宽度 = 400px
半宽 = 400 / 2 = 200px

中心 (Alignment.x = 0)  →  右边缘 (Alignment.x = 1)
像素距离 = 200px
所以换算关系是：
Alignment 增量 = 像素增量 / 半宽
具体例子（假设容器 400×600）：

拖拽动作	delta	计算	Alignment 变化
向右拖 100px	dx=100	100 / 200	x += 0.5
向右拖 200px	dx=200	200 / 200	x += 1.0（从中心到右边缘）
向下拖 150px	dy=150	150 / 300	y += 0.5


接下来咱们来看看错开动画
https://docs.flutter.dev/ui/animations/staggered-animations
接下来咱们来看看 创建一个错开菜单动画
https://docs.flutter.dev/cookbook/effects/staggered-menu-animation
接下来咱们看看 API概述
https://docs.flutter.dev/ui/animations/overview