PS: Flutter中文网提供的动画组件真心太多了,貌似有25种,看着裂开了。。。太多了,用的时候反而不好选择了,感觉只要用自己最熟悉的能实现效果就是最好的。。。
再复杂的动画也是由简单动画组成的,还是熟悉一下4种基本动画效果吧。。。
-
动画核心类简介
在Flutter中Widget动画的核心类有下面这些:
Animation:动画库中的一个核心类,它生成指导动画的值;
CurvedAnimation:将动画过程抽象为一个非线性曲线;
AnimationController:用来管理管理动画,常用的方法有forward():启动动画;reverse({double from}:倒放动画;reset():重置动画,将其设置到动画的开始位置;stop({ bool canceled = true }):停止动画。
Tween:AnimationController对象的范围从0.0到1.0。如果您需要不同的范围或不同的数据类型,则可以使用Tween来配置动画以生成不同的范围或数据类型的值。
-
平移动画:SlideTransition
-
先看下构造方法如下图,必要参数是 Animation<Offset> position
-
示例代码:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
///
/// 平移动画
///
class TransAnimationTest extends StatefulWidget {
@override
State<StatefulWidget> createState() => TransAnimationTestState();
}
class TransAnimationTestState extends State<TransAnimationTest>
with TickerProviderStateMixin {
AnimationController controller;
Animation<Offset> animation;
@override
void initState() {
super.initState();
controller =
AnimationController(duration: Duration(milliseconds: 2000), vsync: this)
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
});
controller.forward();
}
@override
Widget build(BuildContext context) {
animation = Tween(
begin: Offset.zero,
end: Offset((MediaQuery.of(context).size.width - 100) / 100, 1))
.animate(controller);
return Scaffold(
appBar: AppBar(title: Text("平移动画")),
body: Container(
child: SlideTransition(
position: animation,
child: Container(
margin: EdgeInsets.fromLTRB(0, 20, 0, 0),
width: 100,
height: 100,
color: Colors.red,
),
),
),
);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
}
-
旋转动画: RotationTransition
-
构造函数需要:Animation<double> turns
示例代码
-
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
///
/// 旋转动画
///
class RotateAnimationTest extends StatefulWidget {
@override
State<StatefulWidget> createState() => RotateAnimationTestState();
}
class RotateAnimationTestState extends State<RotateAnimationTest>
with TickerProviderStateMixin {
AnimationController controller;
Animation animation;
@override
void initState() {
super.initState();
controller =
AnimationController(duration: Duration(milliseconds: 2000), vsync: this)
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
});
animation = Tween<double>(begin: 0, end: 0.5).animate(controller);
controller.forward();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("旋转动画")),
body: ClipOval(
child: RotationTransition(
turns: animation,
child: Center(
child: Container(
width: 100,
height: 100,
alignment: Alignment.center,
color: Colors.red,
child: Text("旋转起来"),
),
)
),
),
);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
}
-
缩放动画:ScaleTransition
-
构造函数必要参数: Animation<double> scale
示例代码
-
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
///
/// 缩放动画
///
class ScaleAnimationTest extends StatefulWidget {
@override
State<StatefulWidget> createState() => ScaleAnimationTestState();
}
class ScaleAnimationTestState extends State<ScaleAnimationTest>
with TickerProviderStateMixin {
AnimationController controller;
Animation<double> animation;
@override
void initState() {
super.initState();
controller =
AnimationController(duration: Duration(milliseconds: 2000), vsync: this)
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
});
controller.forward();
animation = Tween<double>(begin: 0.5, end: 1).animate(controller);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("缩放动画")),
body: Container(
child: ScaleTransition(
scale: animation,
child: Center(
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
)
),
),
);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
}
-
渐变动画:FadeTransition
-
构造函数必要参数: Animation<double> opacity
示例代码
-
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
///
/// 渐变动画
///
class FadeAnimationTest extends StatefulWidget {
@override
State<StatefulWidget> createState() => FadeAnimationTestState();
}
class FadeAnimationTestState extends State<FadeAnimationTest>
with TickerProviderStateMixin {
AnimationController controller;
Animation animation;
@override
void initState() {
super.initState();
controller =
AnimationController(duration: Duration(milliseconds: 2000), vsync: this)
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
});
animation = Tween<double>(begin: 0.25, end: 1).animate(controller);
controller.forward();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("渐变动画")),
body: ClipOval(
child: FadeTransition(opacity: animation,
child: Center(
child: Container(
width: 100,
height: 100,
alignment: Alignment.center,
color: Colors.red,
),
)
),
),
);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
}