Flutter笔记69：Flutter缓动动画

用CurvedAnimation做缓动动画效果，用AnimatedBuilder是一个中间件，将Animation和Widget关联起来。

main.dart：

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

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: MaterialApp(
        title: 'Flutter缓动动画',
        theme: ThemeData(
          primarySwatch: Colors.blue
        ),
        debugShowCheckedModeBanner: false,
        home: AnimateDemo(),
      ),
    );
  }
}

class AnimateDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    List<Widget> list = [
      EasingAnimation()
    ];

    return Scaffold(
      appBar: AppBar(
        title: Text('动画示例'),
      ),
      body: ListView(
        children: list.map((widget){
          return ListTile(
            title: Text(widget.toString()),
            onTap: (){
              Navigator.of(context).push(MaterialPageRoute(builder: (context)=>widget));
            },
          );
        }).toList(),
      ),
    );
  }
}

easing.dart：

import 'package:flutter/material.dart';

class EasingAnimation extends StatefulWidget{
  EasingAnimation({Key key}) : super(key:key);

  _EasingAnimationState createState() => _EasingAnimationState();
}

//混入 SingleTickerProviderStateMixin 是为了在不显示当前页面时，动画停止，节约资源
class _EasingAnimationState extends State<EasingAnimation> with SingleTickerProviderStateMixin{
  Animation _animation;
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(duration:Duration(seconds: 2), vsync: this);
    _animation = Tween(begin: -1.0, end: 0.0).animate(
      //缓动动画
      CurvedAnimation(
        parent: _controller,
        curve: Curves.fastOutSlowIn
      )
    )..addStatusListener(_handler);
  }

  _handler(status){
    //动画完成
    if(status == AnimationStatus.completed){
      _animation.removeStatusListener(_handler);
      //重置动画
      _controller.reset();
      //重新离场播放
      _animation = Tween(begin: 0.0, end: 1.0).animate(
        //缓动动画
        CurvedAnimation(
          parent: _controller,
          curve: Curves.fastOutSlowIn
        )
      )..addStatusListener((status){
        if(status == AnimationStatus.completed){
          Navigator.pop(context);
        }
      });
      _controller.forward();
    }
  }

  //销毁动画
  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final double width = MediaQuery.of(context).size.width;
    _controller.forward();

    return Scaffold(
      appBar: AppBar(
        title: Text('缓动动画'),
      ),
      body: AnimatedBuilder(
        animation: _controller,
        builder: (context,child){
          return Transform(
            transform: Matrix4.translationValues(
              _animation.value*width,
              0.0,
              0.0
            ),
            child: Center(
              child: Container(
                width: 200.0,
                height: 200.0,
                color: Colors.red,
              ),
            ),
          );
        },
      ),
    );
  }
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！