Flutter动画-ScaleTransition-心动特效

关键代码

import 'package:flutter/material.dart';
class PageState extends StatefulWidget {
  @override
  _PageStateState createState() => _PageStateState();
}

class _PageStateState extends State
    with SingleTickerProviderStateMixin {
  AnimationController controller;

  //doubler类型动画
  Animation doubleAnimation;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //创建AnimationController
    controller = new AnimationController(
        vsync: this, duration: Duration(milliseconds: 200));
    //animation第一种创建方式：
    doubleAnimation =
        new Tween(begin: 0.0, end: 200.0).animate(controller)
          ..addListener(() {
            setState(() {});
          })
          ..addStatusListener((AnimationStatus status) {
            //执行完成后反向执行
            if (status == AnimationStatus.completed) {
              controller.reverse();
            } else if (status == AnimationStatus.dismissed) {
              //反向执行完成，正向执行
              controller.forward();
            }
          });
    //启动动画
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          title: Text("Tween动画"),
        ),
        body: Container(
          alignment: Alignment.center,
          child: ScaleTransition(
              scale: new Tween(begin: 1.5, end: 1.0).animate(controller),
              child: Container(
                width: 100.0,
                height: 100.0,
                decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(100),
                ),
                child: Center(child: Text('Heart'),),
              )),
        ));
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    controller.dispose();
  }
}

效果图

Flutter-心动特效.gif