如何使用 Flutter AnimationController 和 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?

更新:

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

在你的情况下，一切都和你写的完全一样——它将图像从 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 旋转图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！