Dart与Flutter教程 动画制作简易指南

Dart与Flutter动画制作简易指南

Flutter是一个强大的UI框架，使用Dart语言开发。它提供了丰富的动画API，使得开发者可以轻松创建流畅的动画效果。以下是使用Flutter制作简易动画的步骤。

1. 基本动画

Flutter中最简单的动画是使用AnimationController和Tween来控制的。

import 'package:flutter/material.dart';

class SimpleAnimation extends StatefulWidget {
  @override
  _SimpleAnimationState createState() => _SimpleAnimationState();
}

class _SimpleAnimationState extends State<SimpleAnimation> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

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

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

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

void main() {
  runApp(MaterialApp(
    home: SimpleAnimation(),
  ));
}

2. 使用AnimatedWidget

为了简化代码，可以使用AnimatedWidget来封装动画逻辑。

class AnimatedContainerWidget extends AnimatedWidget {
  AnimatedContainerWidget({Key key, Animation<double> animation})
      : super(key: key, listenable: animation);

  @override
  Widget build(BuildContext context) {
    final Animation<double> animation = listenable;
    return Center(
      child: Container(
        width: animation.value,
        height: animation.value,
        color: Colors.green,
      ),
    );
  }
}

3. 使用AnimatedBuilder

AnimatedBuilder是另一种封装动画的方式，适合更复杂的场景。

class AnimatedBuilderExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AnimatedBuilder Example')),
      body: AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          return Transform.rotate(
            angle: _controller.value * 2.0 * 3.1416,
            child: child,
          );
        },
        child: FlutterLogo(size: 200),
      ),
    );
  }
}

4. 使用Hero动画

Hero动画用于在不同页面之间共享元素。

class HeroAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Hero Animation')),
      body: Center(
        child: Hero(
          tag: 'heroTag',
          child: FlutterLogo(size: 100),
        ),
      ),
    );
  }
}

5. 使用物理动画

Flutter还支持基于物理的动画，如SpringSimulation。

class PhysicsAnimation extends StatefulWidget {
  @override
  _PhysicsAnimationState createState() => _PhysicsAnimationState();
}

class _PhysicsAnimationState extends State<PhysicsAnimation> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );
    _animation = Tween<Offset>(begin: Offset.zero, end: Offset(1.5, 0)).animate(
      CurvedAnimation(parent: _controller, curve: Curves.elasticOut),
    );
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Physics Animation')),
      body: Center(
        child: SlideTransition(
          position: _animation,
          child: FlutterLogo(size: 100),
        ),
      ),
    );
  }

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

通过这些简单的示例，你可以快速上手Flutter中的动画制作。Flutter的动画系统非常灵活，适合各种复杂的动画需求。