Flutter 基础动画二

上篇说了基本动画，还有一些特殊的常用动画，它们分别用于不同的动画场景。

1. Hero 动画

Hero 动画 用于在页面导航过程中实现元素的共享动画。它可以在两个页面之间通过同一个元素产生过渡效果，通常用于图片、按钮等。Hero 会在页面切换时平滑地过渡，给用户视觉上提供一个连贯的体验。

使用步骤：

1. 在两个页面中为相同的 Widget 使用 Hero 并赋予相同的 tag。
2. 当页面导航时，Hero 会自动从一个页面移动到另一个页面，产生共享元素动画。

示例：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 属性用来唯一标识共享的元素。在两个页面中，tag 必须一致。
• 自动管理动画：Hero 动画是隐式的，你只需要指定 Hero 的起始和结束位置，Flutter 会自动为你管理动画。

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 之间过渡。
• 渐变效果：当 _controller.forward() 运行时，Container 会从透明状态逐渐显现。

3. ScaleTransition

ScaleTransition 通过控制 Widget 的缩放效果来实现动画，常用于弹出效果或者某些需要缩放的场景。

示例：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 驱动，Widget 会从无到有逐渐放大。

4. RotationTransition

RotationTransition 通过控制 Widget 的旋转角度来实现动画。你可以指定一个旋转中心，并通过 Animation 来控制旋转。

示例：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 的旋转角度，0.0 表示没有旋转，1.0 表示旋转一整圈。
• 旋转动画：当 _controller 不断重复时，Widget 会不停地旋转。

总结

• Hero 动画：用于两个页面间的共享元素过渡，提供平滑的页面切换效果。
• FadeTransition：控制透明度的渐隐渐显动画。
• ScaleTransition：实现缩放效果的动画。
• RotationTransition：用于旋转动画，通过控制旋转角度产生旋转效果。

这些动画组件极大地方便了在 Flutter 中的动画实现，简化了开发过程，并为用户提供了丰富的视觉效果。