上篇說了基本動畫，還有一些特殊的常用動畫，它們分別用于不同的動畫場景。

1. Hero 動畫

Hero 動畫 用于在頁面導(dǎo)航過程中實現(xiàn)元素的共享動畫。它可以在兩個頁面之間通過同一個元素產(chǎn)生過渡效果，通常用于圖片、按鈕等。Hero 會在頁面切換時平滑地過渡，給用戶視覺上提供一個連貫的體驗。

使用步驟：

1. 在兩個頁面中為相同的 Widget 使用 Hero 并賦予相同的 tag。
2. 當(dāng)頁面導(dǎo)航時，Hero 會自動從一個頁面移動到另一個頁面，產(chǎn)生共享元素動畫。

示例：Hero 動畫

import 'package:flutter/material.dart';

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Page')),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.push(context, MaterialPageRoute(builder: (context) => SecondPage()));
          },
          child: Hero(
            tag: 'hero-tag',
            child: Container(
              width: 100.0,
              height: 100.0,
              color: Colors.blue,
              child: Center(child: Text('Tap me!', style: TextStyle(color: Colors.white))),
            ),
          ),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(
        child: Hero(
          tag: 'hero-tag',
          child: Container(
            width: 200.0,
            height: 200.0,
            color: Colors.blue,
            child: Center(child: Text('Here I am!', style: TextStyle(color: Colors.white))),
          ),
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: FirstPage()));

• tag：Hero 的 tag 屬性用來唯一標(biāo)識共享的元素。在兩個頁面中，tag 必須一致。
• 自動管理動畫：Hero 動畫是隱式的，你只需要指定 Hero 的起始和結(jié)束位置，F(xiàn)lutter 會自動為你管理動畫。

2. FadeTransition

FadeTransition 是一個用于漸隱漸顯的動畫組件，它通過控制 Opacity 屬性來逐漸顯示或隱藏某個 Widget。它依賴于 Animation 對象。

示例：FadeTransition

import 'package:flutter/material.dart';

class FadeTransitionExample extends StatefulWidget {
  @override
  _FadeTransitionExampleState createState() => _FadeTransitionExampleState();
}

class _FadeTransitionExampleState extends State<FadeTransitionExample> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(seconds: 2));
    _animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('FadeTransition Example')),
      body: Center(
        child: FadeTransition(
          opacity: _animation,
          child: Container(
            width: 100.0,
            height: 100.0,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: FadeTransitionExample()));

• opacity：這是一個 Animation<double>，控制 Widget 的透明度，從 0 到 1 之間過渡。
• 漸變效果：當(dāng) _controller.forward() 運行時，Container 會從透明狀態(tài)逐漸顯現(xiàn)。

3. ScaleTransition

ScaleTransition 通過控制 Widget 的縮放效果來實現(xiàn)動畫，常用于彈出效果或者某些需要縮放的場景。

示例：ScaleTransition

import 'package:flutter/material.dart';

class ScaleTransitionExample extends StatefulWidget {
  @override
  _ScaleTransitionExampleState createState() => _ScaleTransitionExampleState();
}

class _ScaleTransitionExampleState extends State<ScaleTransitionExample> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(seconds: 2));
    _animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('ScaleTransition Example')),
      body: Center(
        child: ScaleTransition(
          scale: _animation,
          child: Container(
            width: 100.0,
            height: 100.0,
            color: Colors.green,
          ),
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: ScaleTransitionExample()));

• scale：這是一個 Animation<double>，控制 Widget 的縮放比例，通常從 0 到 1。
• 縮放動畫：通過 _controller 驅(qū)動，Widget 會從無到有逐漸放大。

4. RotationTransition

RotationTransition 通過控制 Widget 的旋轉(zhuǎn)角度來實現(xiàn)動畫。你可以指定一個旋轉(zhuǎn)中心，并通過 Animation 來控制旋轉(zhuǎn)。

示例：RotationTransition

import 'package:flutter/material.dart';

class RotationTransitionExample extends StatefulWidget {
  @override
  _RotationTransitionExampleState createState() => _RotationTransitionExampleState();
}

class _RotationTransitionExampleState extends State<RotationTransitionExample> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(seconds: 2));
    _animation = Tween<double>(begin: 0.0, end: 2.0).animate(_controller);
    _controller.repeat();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('RotationTransition Example')),
      body: Center(
        child: RotationTransition(
          turns: _animation,
          child: Container(
            width: 100.0,
            height: 100.0,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: RotationTransitionExample()));

• turns：這是一個 Animation<double>，控制 Widget 的旋轉(zhuǎn)角度，0.0 表示沒有旋轉(zhuǎn)，1.0 表示旋轉(zhuǎn)一整圈。
• 旋轉(zhuǎn)動畫：當(dāng) _controller 不斷重復(fù)時，Widget 會不停地旋轉(zhuǎn)。

總結(jié)

• Hero 動畫：用于兩個頁面間的共享元素過渡，提供平滑的頁面切換效果。
• FadeTransition：控制透明度的漸隱漸顯動畫。
• ScaleTransition：實現(xiàn)縮放效果的動畫。
• RotationTransition：用于旋轉(zhuǎn)動畫，通過控制旋轉(zhuǎn)角度產(chǎn)生旋轉(zhuǎn)效果。

這些動畫組件極大地方便了在 Flutter 中的動畫實現(xiàn)，簡化了開發(fā)過程，并為用戶提供了豐富的視覺效果。