flutter ScaleTransition achieve zoom animation

For more articles please see the flutter from entry to the master

flutter animation states listener

AnimationController

    //动画控制器
     AnimationController controller;
    //AnimationController是一个特殊的Animation对象，在屏幕刷新的每一帧，就会生成一个新的值，
    // 默认情况下，AnimationController在给定的时间段内会线性的生成从0.0到1.0的数字
    //用来控制动画的开始与结束以及设置动画的监听
    //vsync参数，存在vsync时会防止屏幕外动画（动画的UI不在当前屏幕时）消耗不必要的资源
    //duration 动画的时长，这里设置的 seconds: 2 为2秒，当然也可以设置毫秒 milliseconds：2000.
    controller =
        AnimationController(duration: const Duration(seconds: 2), vsync: this);
    //动画开始、结束、向前移动或向后移动时会调用StatusListener
    controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        //动画从 controller.reverse() 反向执行 结束时会回调此方法
        print("status is completed");
        // controller.reset(); 将动画重置到开始前的状态
        //开始执行
        //controller.forward();
      } else if (status == AnimationStatus.dismissed) {
        //动画从 controller.forward() 正向执行 结束时会回调此方法
        print("status is dismissed");
        //controller.forward();
      }else if (status == AnimationStatus.forward) {
        print("status is forward");
        //执行 controller.forward() 会回调此状态
      }else if (status == AnimationStatus.reverse) {
        //执行 controller.reverse() 会回调此状态
        print("status is reverse");
      }
    });

Common instructions AnimationController

value	Explanation
controller.forward()	Forward started animation
controller.reverse()	Reverse started animation
controller.reset()	Animation reset to the initial state
controller.dispose()	Cancel / Stop animation

flutter AnimationStatus animated Status Description

value	Explanation
AnimationStatus.forward	Execution controller.forward () calls back to this state
AnimationStatus.reverse	Execution controller.reverse () calls back to this state
AnimationStatus.dismissed	Animation from controller.reverse () callback will be performed in reverse at the end of this method
AnimationStatus.completed)	Animation from controller.forward () method will call back at the end of the forward execution

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_x/base/base_appbar_page.dart';

/**
 * RotationTransition 缩放动画
 */
class ScaleTransitionPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new AnimaScalePageState();
  }
}

class AnimaScalePageState extends BaseAppBarPageState<ScaleTransitionPage>
    with SingleTickerProviderStateMixin {
  //动画控制器
  AnimationController controller;

  @override
  String buildInitState() {
    buildBackBar("动画", backIcon: Icons.arrow_back_ios);
    //AnimationController是一个特殊的Animation对象，在屏幕刷新的每一帧，就会生成一个新的值，
    // 默认情况下，AnimationController在给定的时间段内会线性的生成从0.0到1.0的数字
    //用来控制动画的开始与结束以及设置动画的监听
    //vsync参数，存在vsync时会防止屏幕外动画（动画的UI不在当前屏幕时）消耗不必要的资源
    //duration 动画的时长，这里设置的 seconds: 2 为2秒，当然也可以设置毫秒 milliseconds：2000.
    controller =
        AnimationController(duration: const Duration(seconds: 2), vsync: this);
    //动画开始、结束、向前移动或向后移动时会调用StatusListener
    controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        //动画从 controller.forward() 正向执行 结束时会回调此方法
      } else if (status == AnimationStatus.dismissed) {
        //动画从 controller.reverse() 反向执行 结束时会回调此方法
        print("status is dismissed");
      } else if (status == AnimationStatus.forward) {
        print("status is forward");
        //执行 controller.forward() 会回调此状态
      } else if (status == AnimationStatus.reverse) {
        //执行 controller.reverse() 会回调此状态
        print("status is reverse");
      }
    });

    return null;
  }

  @override
  Widget buildWidget(BuildContext context) {
    return Row(
      children: <Widget>[
        Column(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(15),
              child: FlatButton(
                  onPressed: () {
                    if( controller.isCompleted){
                      //反向开始
                      controller.reverse();
                    }else{
                      //正向动画开始
                      controller.forward();
                    }
                  },
                  child: Text("开始")),
            ),
            buildRotationTransition(),
          ],
        )
      ],
    );
  }

  @override
  void dispose() {
    super.dispose();
    controller.dispose();
  }




  //缩放
  Widget buildRotationTransition() {
    return Center(
      child: ScaleTransition(
        //设置动画的缩放中心
        alignment: Alignment.center,
        //动画控制器
        scale: controller,
        //将要执行动画的子view
        child: Container(
          width: 100,
          height: 100,
          color: Colors.grey,
        ),
      ),
    );
  }
}