【发布时间】：2019-08-07 02:49:37
【问题描述】：
我想让图片在点击后用颤振代码旋转90度。
点击第1个和第4个，动画效果很好，但是
点击2nd和3nd，它会旋转而没有动画效果。
我尝试了其他一些方法来实现，但没有奏效。
谁能帮我解释一下怎么回事？
我使用的代码如下：
import 'dart:math';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
AnimationController animationController1;
AnimationController animationController2;
AnimationController animationController3;
AnimationController animationController4;
Animation<double> animation1;
Animation<double> animation2;
Animation<double> animation3;
Animation<double> animation4;
int rotateTime = 0;
@override
void initState() {
animationController1 =
AnimationController(vsync: this, duration: Duration(milliseconds: 500));
animationController2 =
AnimationController(vsync: this, duration: Duration(milliseconds: 500));
animationController3 =
AnimationController(vsync: this, duration: Duration(milliseconds: 500));
animationController4 =
AnimationController(vsync: this, duration: Duration(milliseconds: 500));
animation1 =
Tween<double>(begin: 0, end: pi / 2).animate(animationController1);
animation2 =
Tween<double>(begin: pi / 2, end: pi).animate(animationController2);
animation3 =
Tween<double>(begin: pi, end: -pi / 2).animate(animationController3);
animation4 =
Tween<double>(begin: -pi / 2, end: 0).animate(animationController4);
super.initState();
}
@override
void dispose() {
super.dispose();
animationController1?.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Container(
child: GestureDetector(
onTap: _rotateChildContinuously,
child:
RotateTrans(Image.asset('images/smile.png'), buildAnimation())),
),
);
}
_rotateChildContinuously() {
print(rotateTime);
setState(() {
rotateTime++;
if (rotateTime == 1) {
animationController1.forward(from: 0);
} else if (rotateTime == 2) {
animationController2.forward(from: pi / 2);
} else if (rotateTime == 3) {
animationController3.forward(from: pi);
} else if (rotateTime == 4) {
animationController4.forward(from: -pi / 2);
}
});
}
Animation buildAnimation() {
if (rotateTime == 1 || rotateTime == 0) {
return animation1;
} else if (rotateTime == 2) {
return animation2;
} else if (rotateTime == 3) {
return animation3;
} else if (rotateTime == 4) {
rotateTime = 0;
return animation4;
}
}
}
class RotateTrans extends StatelessWidget {
final Widget child;
final Animation<double> animation;
RotateTrans(this.child, this.animation);
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: animation,
child: child,
builder: (context, child) {
return Container(
child: Transform.rotate(
angle: animation.value,
child: Container(
child: child,
),
),
);
},
);
}
}
感谢您的宝贵时间！！！
【问题讨论】：