多个Flutter动画一个接一个地工作 | 多个Flutter动画一个接一个地工作

本文介绍了多个Flutter动画一个接一个地工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是个陌生的人，目前我正试图制作一个简单的应用程序，在该应用程序中，当打开该应用程序时，文本会显示为 fadeIn 并将其位置从底部更改为顶部.是的，我要转播两个动画.第一个是 FadeIn ，它完成后会继续进行下一个 animation ，这是 Position Transition ，它会更改 Vertical 文本的位置，从 400.0 到 200.0像素.

I am new to flutter, at the moment I am trying to make a simple app where when the APP is opened a Text appears with fadeIn and changes its position from bottom to top. Yes, there are two animations which I want to Transit. The first one is FadeIn after it is completed goes and carries on with the next animation which is Position Transition which changes the Vertical position of the Text from 400.0 to 200.0 pixels.

我能够完成fadeIn的过程，但未应用位置1.首先，我要在完成后启动FadeIn TextAnimation，而不是同时启动动画，而要同时启动PositionAnimation.

I was able to achieve the fadeIn process but position one is not being applied.First I want the FadeIn TextAnimation to start after it's done I want to start the PositionAnimation, not at the same time but one after the other when the animations complete.

这是代码:

class _SplashScreenState extends State<SplashScreen>
 with TickerProviderStateMixin {
 AnimationController animationController;
 double position = 400.0;
 Animation<double> _animation;
 Tween<double> tween;

  @override
    void initState() {
    super.initState();

    animationController = AnimationController(
    vsync: this,
    duration: Duration(milliseconds: 700),
  );

   _animation = CurvedAnimation(
   parent: animationController,
   curve: Curves.easeIn,
 );

   tween = Tween(begin: 400, end: 200);

   animationController.forward();
}

 @override
  Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.amber,
    body: FadeTransition(
      opacity: _animation,

      child: Padding(
        padding: EdgeInsets.symmetric(
            vertical:_animation.isCompleted? tween : position,
            horizontal: 180.0),
        child: Text(
          'My Life',
          style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 30.0,
              color: Colors.white70,
              letterSpacing: 2.0),
        ),
      ),
    ),
  );
}

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

任何专业知识，由于我是新手，所以我不确定自己做错了什么.任何人都请引导我.

Any expertise, Since I am new I am not sure what I did wrong. Please guide me, anyone.

这是我今天尝试过的更新代码，但仍然没有得到结果:

Here is the updated code which I have tried today but still I am not getting the result:

class _SplashScreenState extends State<SplashScreen>
  with TickerProviderStateMixin {
AnimationController animationControllerFade;
AnimationController animationControllerPost;
double position = 400.0;
FadeTransition fadeTransition;
Animation<double> animation;
int i = 0;

@override
void initState() {
   super.initState();

   animationControllerFade = AnimationController(
      vsync: this,
    duration: Duration(milliseconds: 700),
   );
   animationControllerPost = AnimationController(
     vsync: this,
   duration: Duration(milliseconds: 700),
   );

   animation = CurvedAnimation(
     parent: animationControllerFade,
     curve: Curves.easeIn,
   );

   animationControllerFade.forward();
 }

 @override
 Widget build(BuildContext context) {
   Scaffold sc;
   sc = Scaffold(
     backgroundColor: Colors.amber,
   );

   fadeTransition = FadeTransition(
     opacity: animation,
     child: paddingOwn(position),
   );

   animationControllerFade.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
       animationControllerPost.forward();
       sc = Scaffold(
          body: TweenAnimationBuilder(
          curve: Curves.easeIn,
          duration: Duration(milliseconds: 700),
          tween: Tween<double>(begin: 400.0, end: 200.0),
          builder: (BuildContext context, double val, Widget child) {
            return Positioned(child: paddingOwn(val));
           },
          ),
        );
       }
       else {
          sc = Scaffold(body: fadeTransition);
       }
     });

     return sc;
   }

   Widget paddingOwn(double val) {
      return Padding(
        padding: EdgeInsets.symmetric(
        vertical: val,
        horizontal: 180,
      ),
      child: Text(
        'My Life',
        style: TextStyle(
           fontWeight: FontWeight.bold,
           fontSize: 30.0,
           color: Colors.white70,
           letterSpacing: 2.0),
      ),
     );
    }

    @override
    void dispose() {
      animationControllerFade.dispose();
      animationControllerPost.dispose();
      super.dispose();
    }
   }

仍然没有结果.

推荐答案

如果要获取位置转换，则需要使用 SlideTransition .

If you want to get the position transition, you need to use SlideTransition.

此外，您还需要为 Tween 设置动画，以便正确插值.

Also, you need to animate the Tween in order to get the values interpolated properly.

我更改了一些代码，以使文本居中并从此处进行动画处理.无论如何，请记住 SlideTransition 与偏移量一起使用相对于孩子的大小

I changed a little your code in order to center the text and animate it from there. Anyway, just keep in mind that SlideTransition works with Offsets in a relative way from the size of the child

现在，您应该能够使此代码适应您想要获得的最终结果:

Now, you should be able to adapt this code to the final result you want to achieve:

class _SplashScreenState extends State<SplashScreen> with TickerProviderStateMixin {
  AnimationController _fadeAnimationController;
  AnimationController _slideAnimationController;
  double position = 400.0;
  Animation<double> _fadeAnimation;
  Animation<Offset> _slideAnimation;

  @override
  void initState() {
    super.initState();

    _fadeAnimationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 700),
    );

    _slideAnimationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 700),
    );

    _fadeAnimation = CurvedAnimation(
      parent: _fadeAnimationController,
      curve: Curves.easeIn,
    );

    _slideAnimation = Tween(begin: Offset(0, 0), end: Offset(0, -3)).animate(CurvedAnimation(
      parent: _slideAnimationController,
      curve: Curves.easeInOut,
    ));

    _play();
  }

  Future<void> _play() async {
    try {
      await _fadeAnimationController.forward().orCancel;
      await _slideAnimationController.forward().orCancel;
    } on TickerCanceled {
      //Handle if animation was canceled for whatever reason if you need it
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber,
      body: Center(
        child: SlideTransition(
          position: _slideAnimation,
          child: FadeTransition(
            opacity: _fadeAnimation,
            child: Text(
              'My Life',
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30.0, color: Colors.white70, letterSpacing: 2.0),
            ),
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _fadeAnimationController.dispose();
    _slideAnimationController.dispose();
    super.dispose();
  }
}

更新:

由于两个错误，您没有看到填充的变化:

You are not seeing changes with your padding because you have two mistakes:

您不是在动画补间中
您使用的是 symmetric ，这会在两侧增加相同的边距.

You are not animating the tween
You are using symmetric, that adds the same margin from both sides.

要解决补间问题，您需要添加以下内容:

To solve the tween thing, you need to add something like this:

tween = Tween(begin: 400, end: 200).animate(animationController);

要解决填充问题，可以使用 only ，仅在一侧应用 padding :

To solve the padding thing, you can use only, to apply the padding only in one side:

padding: EdgeInsets.only(top: tween)

这篇关于多个Flutter动画一个接一个地工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..