flutter-简单组合动画

交织动画，就是多个动画组合。这个只是简单的动画。

 

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_video_world/constant/data.dart';
import 'package:flutter_video_world/ui/widgets/heart.dart';
import 'package:flutter_video_world/ui/widgets/progress.dart';
import 'package:flutter_video_world/utils/utils_app.dart';

class SettingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SettingFulPage();
  }
}

class SettingFulPage extends StatefulWidget {
  @override
  _SettingFulPageState createState() => _SettingFulPageState();
}

class _SettingFulPageState extends State
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  Animation colorTween;
  Animation widthTween;
  Animation heightTween;

  @override
  void initState() {
    super.initState();
    _controller =
        new AnimationController(duration: Duration(seconds: 5), vsync: this);

    colorTween = ColorTween(begin: Colors.green, end: Colors.red).animate(
        CurvedAnimation(
            parent: _controller,
            curve: Interval(0.0, 0.6, curve: Curves.ease)));

    //交织动画，也就是按时间段执行动画
//    widthTween = Tween(begin: 0.0, end: 100.0).animate(CurvedAnimation(
//        parent: _controller, curve: Interval(0.0, 0.6, curve: Curves.ease)));
//
//    heightTween = Tween(begin: 50.0, end: 150.0).animate(CurvedAnimation(
//        parent: _controller, curve: Interval(0.6, 1.0, curve: Curves.ease)));

    //动画，同时启动
    widthTween = Tween(begin: 0.0, end: 100.0).animate(_controller);

    heightTween = Tween(begin: 50.0, end: 150.0).animate(_controller);

    _controller.addListener(() {
      setState(() {});
    });

    _controller.addStatusListener((status){
      if(status == AnimationStatus.completed){
        _controller.reverse();
      }else if(status == AnimationStatus.dismissed){
        _controller.forward();
      }
    });

    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      alignment: Alignment.center,
      width: AppUtils.instance.screenW,
      height: AppUtils.instance.screenH,
      child: Container(
        color: colorTween.value,
        width: widthTween.value,
        height: heightTween.value,
      ),
    );
  }
}