Flutter 動畫1

寫代碼就希望寫出來的東西是可以動的，所以，最近分享一點動畫的代碼一起學習呀~

覺得有用的話，記得收藏一波~

以下所有的代碼，可以直接複製進去main.dart文件裏面，就可以運行出這個效果啦~

（一）效果圖
這個效果是當你一開始運行，這個小方塊就會開始從左上角沿着對角線運動到右下角

（一）代碼

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text("demo"),
      ),
      body: AnimateDemo(),
    ));
  }
}

class AnimateDemo extends StatefulWidget {
  @override
  _AnimateDemoState createState() => _AnimateDemoState();
}

class _AnimateDemoState extends State<AnimateDemo>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;//初始化
  Animation _animation;
  
  @override
  void initState() {
    super.initState();
    _animationController =
        AnimationController(duration: Duration(seconds: 2), vsync: this);
    _animation = Tween<AlignmentGeometry>(
            begin: Alignment.topLeft, end: Alignment.bottomRight)//動畫運動的始末軌跡
        .animate(_animationController);
        
    _animationController.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
            width: 200,
            height: 200,
            color: Colors.orange,
            child: AlignTransition(
                alignment: _animation,//調用的函數
                child: Container(
                  width: 30,
                  height: 30,
                  color: Colors.green,
      ))));
  }
}

（二）效果圖
該效果是點擊圖標，再開始沿着運動軌跡運動

（二）代碼

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text("甜寵軟妹"),
      ),
      body: AlignDemo(),
    ));
  }
}

class AlignDemo extends StatefulWidget {
  @override
  _AlignDemoState createState() => _AlignDemoState();
}

class _AlignDemoState extends State<AlignDemo> {
  var _aligmment = Alignment.topLeft;//初始化

  @override
  Widget build(BuildContext context) {
    return Align(
      child: Container(
        width: 200,
        height: 200,
        color: Colors.orange,
        child: AnimatedAlign(
          alignment: _aligmment,
          duration: Duration(seconds: 2),
          child: IconButton(
              icon: Icon(
                Icons.car_repair,
                color: Colors.white,
                size: 30,
              ),
              onPressed: () {
                setState(() {
                  _aligmment = Alignment.bottomRight;//給突變綁定事件
                });
              }),
        ),
      ),
    );
  }
}

總結：
效果1 是通過給container外層加一個AlignTransition，在初始化函數裏面調用動畫函數

效果2 是直接給圖標綁定事件，在動畫組件裏面調用函數即可實現