本文共 3895 字，大约阅读时间需要 12 分钟。

���������������������

1. ���������

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatefulWidget {    @override    _MyAppState createState() => _MyAppState();}class _MyAppState extends State
   
        with TickerProviderStateMixin {    AnimationController controller;    @override    void initState() {        super.initState();        controller = AnimationController(            duration: const Duration(milliseconds: 2000),            vsync: this,        );    }    Future
    
      playAnimation() async {        await controller.forward().orCancel;        await controller.reverse().orCancel;    }    @override    Widget build(BuildContext context) {        return MaterialApp(            home: Scaffold(                body: GestureDetector(                    behavior: HitTestBehavior.opaque,                    onTap: () {                        playAnimation();                    },                    child: Center(                        child: Container(                            width: 300.0,                            height: 300.0,                            decoration: BoxDecoration(                                color: Colors.black.withOpacity(0.1),                                border: Border.all(                                    color: Colors.black.withOpacity(0.5),                                ),                            ),                            child: StaggerAnimation(                                controller: controller,                            ),                        ),                    ),                ),            ),        );    }}class StaggerAnimation extends StatelessWidget {    final Animation
     
       controller;    Animation
      
        height;    Animation
       
         padding;    Animation
        
          color; StaggerAnimation({Key key, this.controller}) : super(key: key) { height = Tween
         
          ( begin: 0, end: 300.0, ).animate(CurvedAnimation( parent: controller, curve: Interval(0.0, 0.6, curve: Curves.ease), )); color = ColorTween( begin: Colors.green, end: Colors.red, ).animate(CurvedAnimation( parent: controller, curve: Interval(0.0, 0.6, curve: Curves.ease), )); padding = Tween
          
           ( begin: EdgeInsets.only(left: 0.0), end: EdgeInsets.only(left: 300), ).animate(CurvedAnimation( parent: controller, curve: Interval(0.6, 1.0, curve: Curves.ease), )); } @override Widget build(BuildContext context) { return AnimatedBuilder( builder: (context, child) { return Container( alignment: Alignment.bottomLeft, padding: padding.value, child: Container( color: color.value, width: 30.0, height: height.value, ), ); }, animation: controller, ); }}
          
         
        
       
      
     
    
   

2. ���������������

������������������������������Flutter������������������������������������������������������������������������������

• MyApp���������������������������������������������GestureDetector������������������������
• AnimationController������������������������������������������������2000������������vsync���������
• playAnimation������������������������������������������������������������������������������
• StaggerAnimation���������������������StatelessWidget������������������������������
  • ���������������������Singleton������������Psuedo_resolve���������������������Animation���������
  • ������Tween���CurvedAnimation���������������������������������������������������������������
  • ���build������������������AnimatedBuilder���������������������padding���color���height������������CurvedAnimation���������

3. ���������������

���������������������������������������������������������

• ������������������������������������
• ������������������������������������������������
• ���������������������������StaggerAnimation���������������������������������������

���������������������������������Flutter���������������API���������������������������������������������������������������GestureRecognizer���������������