如何使用Flutter AnimationController和Transform旋转图像? [英] How to rotate an image using Flutter AnimationController and Transform?
问题描述
我有星形png图像,我需要使用Flutter AnimationController和Transformer旋转星形。我找不到图像旋转动画的任何文档或示例。
I have star png image and I need to rotate the star using Flutter AnimationController and Transformer. I couldn't find any documents or example for image rotation animation.
任何想法如何使用Flutter AnimationController和Transform旋转图像?
Any idea How to rotate an image using Flutter AnimationController and Transform?
UPDATE:
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
AnimationController animationController;
@override
void initState() {
super.initState();
animationController = new AnimationController(
vsync: this,
duration: new Duration(milliseconds: 5000),
);
animationController.forward();
animationController.addListener(() {
setState(() {
if (animationController.status == AnimationStatus.completed) {
animationController.repeat();
}
});
});
}
@override
Widget build(BuildContext context) {
return new Container(
alignment: Alignment.center,
color: Colors.white,
child: new AnimatedBuilder(
animation: animationController,
child: new Container(
height: 80.0,
width: 80.0,
child: new Image.asset('images/StarLogo.png'),
),
builder: (BuildContext context, Widget _widget) {
return new Transform.rotate(
angle: animationController.value,
child: _widget,
);
},
),
);
}
}
推荐答案
此处我的旋转图像示例。我不知道-但也许适合您
Here my example of rotating image. I don't know - but maybe it suits for you
AnimationController rotationController;
@override
void initState() {
rotationController = AnimationController(duration: const Duration(milliseconds: 500), vsync: this);
super.initState();
}
//...
RotationTransition(
turns: Tween(begin: 0.0, end: 1.0).animate(rotationController),
child: ImgButton(...)
//...
rotationController.forward(from: 0.0); // it starts the animation
UPD-如何使用 Transform.rotate
UPD - how to solve problem with Transform.rotate
在您的情况下,所有功能均与您编写的完全一样-它将图像从0.0旋转到1.0(这是 AnimationController
的默认参数)。必须将上参数设置为2 * pi
(来自 math
包)
In your case all works exactly as you've written - it rotates image from 0.0 to 1.0 (it's default parameters for AnimationController
). For full circle you have to set upper parameter to 2 * pi
(from math
package)
import 'dart:math';
//...
animationController = AnimationController(vsync: this, duration: Duration(seconds: 5), upperBound: pi * 2);
这篇关于如何使用Flutter AnimationController和Transform旋转图像?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!