上篇说了基本动画，还有一些特殊的常用动画，它们分别用于不同的动画场景。
1. Hero 动画
Hero 动画 用于在页面导航过程中实现元素的共享动画。它可以在两个页面之间通过同一个元素产生过渡效果，通常用于图片、按钮等。Hero 会在页面切换时平滑地过渡，给用户视觉上提供一个连贯的体验。
使用步骤：
- 在两个页面中为相同的
Widget使用Hero并赋予相同的tag。 - 当页面导航时，
Hero会自动从一个页面移动到另一个页面，产生共享元素动画。
示例：Hero 动画
import 'package:flutter/material.dart';
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('First Page')),
body: Center(
child: GestureDetector(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => SecondPage()));
},
child: Hero(
tag: 'hero-tag',
child: Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
child: Center(child: Text('Tap me!', style: TextStyle(color: Colors.white))),
),
),
),
),
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Second Page')),
body: Center(
child: Hero(
tag: 'hero-tag',
child: Container(
width: 200.0,
height: 200.0,
color: Colors.blue,
child: Center(child: Text('Here I am!', style: TextStyle(color: Colors.white))),
),
),
),
);
}
}
void main() => runApp(MaterialApp(home: FirstPage()));
-
tag：Hero的tag属性用来唯一标识共享的元素。在两个页面中，tag必须一致。 -
自动管理动画：
Hero动画是隐式的，你只需要指定Hero的起始和结束位置，Flutter 会自动为你管理动画。
2. FadeTransition
FadeTransition 是一个用于渐隐渐显的动画组件，它通过控制 Opacity 属性来逐渐显示或隐藏某个 Widget。它依赖于 Animation 对象。
示例：FadeTransition
import 'package:flutter/material.dart';
class FadeTransitionExample extends StatefulWidget {
@override
_FadeTransitionExampleState createState() => _FadeTransitionExampleState();
}
class _FadeTransitionExampleState extends State<FadeTransitionExample> with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: Duration(seconds: 2));
_animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
_controller.forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('FadeTransition Example')),
body: Center(
child: FadeTransition(
opacity: _animation,
child: Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
),
),
),
);
}
}
void main() => runApp(MaterialApp(home: FadeTransitionExample()));
-
opacity：这是一个Animation<double>，控制Widget的透明度，从 0 到 1 之间过渡。 -
渐变效果：当
_controller.forward()运行时，Container会从透明状态逐渐显现。
3. ScaleTransition
ScaleTransition 通过控制 Widget 的缩放效果来实现动画，常用于弹出效果或者某些需要缩放的场景。
示例：ScaleTransition
import 'package:flutter/material.dart';
class ScaleTransitionExample extends StatefulWidget {
@override
_ScaleTransitionExampleState createState() => _ScaleTransitionExampleState();
}
class _ScaleTransitionExampleState extends State<ScaleTransitionExample> with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: Duration(seconds: 2));
_animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
_controller.forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('ScaleTransition Example')),
body: Center(
child: ScaleTransition(
scale: _animation,
child: Container(
width: 100.0,
height: 100.0,
color: Colors.green,
),
),
),
);
}
}
void main() => runApp(MaterialApp(home: ScaleTransitionExample()));
-
scale：这是一个Animation<double>，控制Widget的缩放比例，通常从 0 到 1。 -
缩放动画：通过
_controller驱动，Widget会从无到有逐渐放大。
4. RotationTransition
RotationTransition 通过控制 Widget 的旋转角度来实现动画。你可以指定一个旋转中心，并通过 Animation 来控制旋转。
示例：RotationTransition
import 'package:flutter/material.dart';
class RotationTransitionExample extends StatefulWidget {
@override
_RotationTransitionExampleState createState() => _RotationTransitionExampleState();
}
class _RotationTransitionExampleState extends State<RotationTransitionExample> with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: Duration(seconds: 2));
_animation = Tween<double>(begin: 0.0, end: 2.0).animate(_controller);
_controller.repeat();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('RotationTransition Example')),
body: Center(
child: RotationTransition(
turns: _animation,
child: Container(
width: 100.0,
height: 100.0,
color: Colors.red,
),
),
),
);
}
}
void main() => runApp(MaterialApp(home: RotationTransitionExample()));
-
turns：这是一个Animation<double>，控制Widget的旋转角度，0.0表示没有旋转，1.0表示旋转一整圈。 -
旋转动画：当
_controller不断重复时，Widget会不停地旋转。
总结
-
Hero动画：用于两个页面间的共享元素过渡，提供平滑的页面切换效果。 -
FadeTransition：控制透明度的渐隐渐显动画。 -
ScaleTransition：实现缩放效果的动画。 -
RotationTransition：用于旋转动画，通过控制旋转角度产生旋转效果。
这些动画组件极大地方便了在 Flutter 中的动画实现，简化了开发过程，并为用户提供了丰富的视觉效果。
