flutter 旋转 缩放动画，基本使用

有一段时间没有更新，最近在项目中，有使用到动画，就把之前学习过的动画，和最近学习过的动画，分享给大家;先看最终效果

rotation.gif
scale.gif

旋转动画源码如下

import 'dart:math';
import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_test_demos/custom_circle_widget.dart';

class RotationAnimationDemoPage extends StatefulWidget {
  @override
  _RotationAnimationDemoPageState createState() =>
      _RotationAnimationDemoPageState();
}

class _RotationAnimationDemoPageState extends State<RotationAnimationDemoPage>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

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

  @override
  void initState() {
    _animationController = AnimationController(
        vsync: this,
        // upperBound: 180/360,
        duration: Duration(milliseconds: 3000),
    )
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          // _animationController.reset();
          // _animationController.forward();
        }
      });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("paint 12"),
      ),
      body: Column(
        children: [
          ButtonBar(
            alignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                  onPressed: () {
                    _animationController.forward();
                  },
                  child: Text("开始")),
              ElevatedButton(
                  onPressed: () {
                    _animationController.stop();
                  },
                  child: Text("停止")),
              ElevatedButton(
                  onPressed: () {
                    _animationController.reverse();
                  },
                  child: Text("反转")),
              ElevatedButton(
                  onPressed: () {
                    _animationController.forward();
                    _animationController.repeat();
                  },
                  child: Text("循环执行")),
              ElevatedButton(
                  onPressed: () {
                    _animationController.forward();
                  },
                  child: Text("旋转180度"))
            ],
          ),
          Expanded(
            child: Center(
                child: RotationTransition(
              turns: _animationController,
              child: Icon(
                Icons.refresh,
                size: 100,
              ),
            )),
          )
        ],
      ),
    );
  }
}

如果想旋转指定的角度 ，比如说想只旋转180度的话，就把// upperBound: 180/360,，这句注释取消就可以了，upperBound指的是动画最大值，系统默认为1.0，那我们就让他旋转到0.5，那么0.5*360 =180，就刚好是旋转180度喽；

缩放动画源码如下

import 'dart:math';
import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_test_demos/custom_circle_widget.dart';

class ScaleAnimationDemoPage extends StatefulWidget {
  @override
  _ScaleAnimationDemoPageState createState() => _ScaleAnimationDemoPageState();
}

class _ScaleAnimationDemoPageState extends State<ScaleAnimationDemoPage>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> scale;

  @override
  void initState() {
    _animationController = AnimationController(
        vsync: this,
        duration: Duration(milliseconds: 3000),
        )
      ..addStatusListener((status) {
        // if (status == AnimationStatus.completed) {
        //   // _animationController.reset();
        //   _animationController.reverse();
        // }else if(status == AnimationStatus.dismissed){
        //   _animationController.forward();
        //
        // }
      });
    scale = Tween(begin: 1.2,end:0.01 ).animate(_animationController);

    super.initState();
  }


  @override
  void dispose() {
    _animationController.dispose();

    // TODO: implement dispose
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("paint 12"),
      ),
      body: Column(
        children: [
          ButtonBar(
            alignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                  onPressed: () {
                    _animationController.forward();
                  },
                  child: Text("开始")),
              ElevatedButton(
                  onPressed: () {
                    _animationController.stop();
                  },
                  child: Text("停止")),
              ElevatedButton(
                  onPressed: () {
                    _animationController.reverse();
                  },
                  child: Text("反转")),
              ElevatedButton(
                  onPressed: () {
                    _animationController.reset();
                    _animationController.forward();
                    _animationController.repeat();
                  },
                  child: Text("循环执行")),
            ],
          ),
          Expanded(
            child: Center(
                child: ScaleTransition(
              scale: scale,
              child: Icon(
                Icons.refresh,
                size: 100,
              ),
            )),
          )
        ],
      ),
    );
  }
}

如果想实现 缩小-->放大-->缩小-->放大这样连贯的动画（如：scale.gif最后一小段的动画效果），（而不是 缩小-->回到起始位置-->缩小-->回到起始位置），就把下面代码注释取消就可以了

       // if (status == AnimationStatus.completed) {
        //   // _animationController.reset();
        //   _animationController.reverse();
        // }else if(status == AnimationStatus.dismissed){
        //   _animationController.forward();
        //
        // }

结尾

看到这里的小伙们，或者觉得文章对你有点帮助的话，请点赞加关注喽，您的反馈就是我们前进的动力。后续会分享更多关于移动端的干货。谢谢~~