在颤动中将小部件滚动出屏幕

Question

我想把这个容器滚出屏幕，这样它就会向上运动，并在2-3秒内消失。我正在使用这个页面作为闪屏。align小部件包装的容器代码如下：

Scaffold(
   // backgroundColor: Colors.black,
    body: Align(
      alignment: Alignment.topCenter,
      child: Transform.scale(
        scale: 1.5,
        child: Container(
          height: 400,
          decoration: BoxDecoration(
              color: Colors.deepOrange, borderRadius: BorderRadius.circular(200)),
        ),
      ),
    ),
  );

Answer 1

可以使用SlideTransition小部件为容器的位置设置动画：

Animation<Offset> animation;
AnimationController animationController;

@override
void initState() {
  super.initState();
  animationController = AnimationController(
    vsync: this,
    duration: Duration(seconds: 1),
  );

  animation = Tween<Offset>(begin: Offset.zero, end: Offset(0, -1.5)) //negative to go upwards
      .animate(animationController);
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      children: [
        Align(
          alignment: Alignment.topCenter,
          child: SlideTransition(
            position: animation,
            child: Transform.scale(
              scale: 1.5,
              child: Container(
                height: 400,
                decoration: BoxDecoration(
                  color: Colors.deepOrange,
                  borderRadius: BorderRadius.circular(200),
                ),
              ),
            ),
          ),
        ),
        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          child: RaisedButton(
            child: Text('Animate'),
            onPressed: () {        //the button that trigger the animation
              if (animation.status == AnimationStatus.completed) {
                animationController.reverse();
              } else if (animation.status == AnimationStatus.dismissed) {
                animationController.forward();
              }
            },
          ),
        ),
      ],
    ),
  );
}

在示例中，我显示了一个触发动画的按钮，但您可以在initState中执行此操作。

并且您需要为一个动画添加SingleTickerProviderStateMixin混合，或者为两个或更多动画添加TickerProviderStateMixin：

class _YourScreenState extends State<YourScreen> with TickerProviderStateMixin {

Answer 2

您可以使用流行的Spring package很好地做到这一点。

示例：

import 'package:flutter/material.dart';
import 'package:spring/spring.dart';

class SpringExample extends StatelessWidget {
  
  // For the rotation animation to loop.
  final SpringController springController =
      SpringController(initialAnim: Motion.loop);

  @override
  Widget build(BuildContext context) {
       return Spring.scale(
           start: 1,
           end: 1.5,
           animDuration: const Duration(seconds: 3),
           child: Spring.slide(
             slideType: SlideType.slide_out_top,
             animDuration: const Duration(seconds: 3),
             child: Spring.rotate(
               springController: springController,
               child: Container(
                 height: 400,
                 decoration: BoxDecoration(
                     color: Colors.deepOrange,
                     borderRadius: BorderRadius.circular(200)),
               ),
             ),
           ));
  }
}