下面是一个示例,直接拷贝到main.dart运行即可,inkwell那部分的ontap可以不要的!这个旋转动画的最关键代码就是: ..repeat() 注意:两个点哦!
参考视频:https://www.bilibili.com/video/av55835996?from=search&seid=17612587344903857505
import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with TickerProviderStateMixin{
AnimationController animationController;
Animation animation;
// Animation animationColor;
CurvedAnimation curve;
double pi = 3.14;
@override
void initState() {
// TODO: implement initState
animationController = AnimationController(
vsync: this,
// value: 32.0,
// lowerBound: 0.0,
// upperBound: 200.0,
duration: Duration(milliseconds: 500),
)..repeat();
// curve = CurvedAnimation(parent: animationController, curve: Curves.easeInOutCirc);
animation = Tween(begin: 0, end: 2*pi,).animate(animationController);
// animationColor = ColorTween(begin: Colors.red, end: Colors.green,).animate(curve);
animationController.addStatusListener((AnimationStatus status){print(status);});
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(''),),
body:AnimatedBuilder(
animation: animation,
builder: (context,child){
return Transform.rotate(angle: animation.value,child: InkWell(
child: Center(
child: Container(
width: 100.0,
height: 100.0,
color: Colors.red,
),
),
onTap: () {
animationController.forward();
switch(animationController.status){
case AnimationStatus.completed:
animationController.reverse();
break;
default:
animationController.forward();
}
}
),);
}),
);
}
}