技術標籤：Flutter

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

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

以下所有的程式碼，可以直接複製進去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 是直接給圖示繫結事件，在動畫元件裡面呼叫函式即可實現