如何在Flutter中顺时针平滑旋转图像?

yzckvree  于 2023-04-22  发布在  Flutter
关注(0)|答案(2)|浏览(294)

我试图顺时针旋转图像(秒)与平滑动画,这是我目前的代码:

Transform.rotate(
          angle: _dateTime.second * 6 * pi / 180,
          child: Image.asset(
            'assets/Clocks/FirstClock/secondhand.png',
          ),
        ),

我试过动画生成器和旋转过渡,但我不能应用秒Angular 的动画,它总是不准确

bq9c1y66

bq9c1y661#

我正在努力解决您的问题:
使用Transform. rotate顺时针平滑旋转图像:

Transform.rotate(
      angle: _angleInRadians,
      child: Image.asset('assets/abc.jpg'),
    );

验证码:

class RotateImage extends StatefulWidget {
  @override
  _RotateImageState createState() => _RotateImageState();
}

class _RotateImageState extends State<RotateImage>
    with TickerProviderStateMixin {
  late Ticker _ticker;
  double _angleInRadians = 0;

  @override
  void initState() {
    super.initState();
    _ticker = this.createTicker((_) => setState(() {
      _angleInRadians += 0.01;
    }))
      ..start();
  }

  @override
  void dispose() {
    _ticker.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Transform.rotate(
      angle: _angleInRadians,
      child: Image.asset('assets/abc.jpg'),
    );
  }
}

Video

j8ag8udp

j8ag8udp2#

首先创建一个statefulwidget它有两个参数,图像提供者和持续时间。
在state类中放置一个animatedController

late AnimationController _controller;

然后在initState中初始化控制器。

_controller = AnimationController(
  vsync: this,
  duration: Duration(seconds: 
widget.duration.toInt()),
)..repeat();

然后在构建方法中

RotationTransition(
    turns: Tween(begin: 0.0, end: 
    1.0).animate(_controller),
    child: Image(
    image: widget.imageProvider,
  ),
),

最后可以调用dispose方法来释放控制器

相关问题