时间戳

首页 > 解决方案 > 使用 AnimationPositioned 移动图像

flutter - 使用 AnimationPositioned 移动图像

问题描述

我正在尝试使用 AnimatedPositioned 将图像从中心移动到新位置 (50,10)。以下是我的代码

class _SplashScreenState extends State<SplashScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Color(0xFFFFFFFF),
      child: Stack(
        children: [
          AnimatedPositioned(
            duration: Duration(seconds: 3),
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                child: Image(
                  image: AssetImage('images/img.png'),
                  width: 30,
                  height: 30,
                ),
              ),
            ),
            top: 50,
            left: 10,
          )
        ],
      ),
    );
  }

出于某种原因，上面的代码没有做任何动画，并且图像在移动到左上角之前最初没有居中。我怎样才能解决它？

更新：

我也尝试过 AnimatedAlign，

return Container(
      color: Color(0xFFFFFFFF),
      child: AnimatedAlign(
        duration: Duration(seconds: 3),
        alignment: Alignment(50, 10),
        curve: Curves.bounceOut,
        child: Image(
          image: AssetImage('images/img.png'),
          width: 30,
          height: 30,
        ),
      ),
    );

由于某种原因，图像仍然没有移动

标签： flutteranimationdart

解决方案

替换为以下代码。这对我有用。:)

class _SplashScreenState extends State<SplashScreen>
    with TickerProviderStateMixin {
  AnimationController _animationController;
  Animation _animation;

  @override
  void initState() {
    _animationController =
        AnimationController(vsync: this, duration: Duration(seconds: 3));
    _animation = Tween<Offset>(begin: Offset(0.5, 0.5), end: Offset.zero)
        .animate(_animationController);
    _animationController.forward().whenComplete(() {
      // when animation completes, put your code here
    });
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Stack(
          alignment: Alignment.center,
          fit: StackFit.loose,
          children: <Widget>[
            // left = x value, top = y value;
            // to set last position (50,10) top:50, left:10, end _animation Offset.zero
            Positioned(
              top: 50,
              left: 10,
              child: SlideTransition(
                position: _animation,
                child: AnimatedContainer(
                  height: MediaQuery.of(context).size.height,
                  width: MediaQuery.of(context).size.width,
                  alignment: Alignment.topLeft,
                  duration: Duration(seconds: 0),
                  child: Image(
                    height: 50,
                    width: 50,
                    image: AssetImage('assets/img.png'),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

推荐阅读