ex:
import 'dart:math';
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
home: HomePage(),
));
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage>
with SingleTickerProviderStateMixin {
Animation<double> _animation;
AnimationController _animationController;
bool reversed = false;
@override
void initState() {
super.initState();
_animationController =
AnimationController(vsync: this, duration: Duration(seconds: 1));//持续时间
_animation = TweenSequence([
TweenSequenceItem(
tween: Tween(begin: 0.0, end: -pi / 2),//从正常位置到反转
weight: 0.5,
),
TweenSequenceItem(
tween: Tween(begin: pi / 2, end: 0.0),//从反转到正常位置
weight: 0.5,
),
]).animate(_animationController);
}
@override
void dispose() {
super.dispose();
_animationController.dispose();
}
//是否反转
_doAnim() {
reversed ? _animationController.reverse() : _animationController.forward();
reversed = !reversed;
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: AnimatedBuilder(
animation: _animation,
builder: (BuildContext context, Widget child) {
return Transform(
transform: Matrix4.identity()//生成矩阵
..setEntry(3, 2, 0.001)//3d效果
..rotateY(_animation.value),//从左到右翻转
alignment: Alignment.center,//居中
child: GestureDetector(
onTap: _doAnim,
child: IndexedStack(
children: <Widget>[
CardOne(),
CardTwo(),
],
alignment: Alignment.center,
index: _animationController.value < 0.5 ? 0 : 1,//0~1 //小于0.5显示第0个页面,否则显示第一个
),
),
);
}),
),
);
}
}
class CardOne extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Card(
color: Color(0xffff0000),
child: Container(
width: 200.0,
height: 200.0,
child: Text(
'This is red',
style: TextStyle(color: Color(0xffffffff), fontSize: 30.0),
),
),
);
}
}
class CardTwo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Card(
color: Color(0xff0000ff),
child: Container(
width: 200.0,
height: 200.0,
child: Text(
'this is blue',
style: TextStyle(color: Color(0xffffffff), fontSize: 30.0),
),
),
);
}
}
输出: