尝试为 Flutter Widget 实现动画,但不起作用

问题描述 投票:0回答:1

我试图在屏幕上显示后立即通过平滑的滑动运动将小部件动画到其正常位置,但是,在实现下面的代码后,它不起作用,尝试了多种方法,例如更改 Transform.translate到 SlideTransition,我仍然没有得到任何结果。

我的代码有问题吗?我是不是忘记添加什么了?

class DiscoverCard extends StatefulWidget {

  const DiscoverCard({
    super.key,
    required this.title,
    required this.symbol,
    required this.price,
    required this.imagePath
  });

  final String title;
  final String symbol;
  final String imagePath;
  final String price;

  @override
  State<DiscoverCard> createState() => _DiscoverCardState();
}

class _DiscoverCardState extends State<DiscoverCard>
  with SingleTickerProviderStateMixin {

  late AnimationController controller;
  late Animation<Offset> slide;

  @override
  void initState() {
    controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 200)
    );

    slide = Tween<Offset>(
      begin: const Offset(0.5, 0.0),
      end: const Offset(0.0, 0.0)
    ).animate(controller);

    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    controller.forward();

    return AnimatedBuilder(
      animation: controller,
      builder: (context, child) {
        return Transform.translate(
          offset: slide.value,
          child: DiscoverCardUI(
            widget: widget
          ),
        ); 
      }
    );
  }
}
android ios flutter animation mobile
1个回答
0
投票

我假设你没有注意到动画。

尝试增加动画的转换和持续时间。 https://api.flutter.dev/flutter/widgets/Transform/Transform.translate.html

偏移

0.5
看起来很小。

  @override
  void initState() {
    controller = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 1000));

    slide = Tween<Offset>(
            begin: const Offset(12.5, 0.0), end: const Offset(0.0, 0.0))
        .animate(controller);

    super.initState();
  }

我已经在 dartpad 上尝试过了。并且动画效果很好。

© www.soinside.com 2019 - 2024. All rights reserved.