Flutter动画效果插件animate_do的使用

简介

animate_do 是一个受 Animate.css 启发的Flutter动画包，它完全基于Flutter的动画系统构建，没有外部依赖。该包适用于iOS、Android、Linux、Mac、Web和Windows平台，并且支持Dart 3版本以及空安全（Null-Safety）。

开始使用

animate_do 包非常易于使用。每个动画都包含默认值，这些默认值看起来非常美观，但你也可以根据需要更改属性。

动画组件通用属性

可用动画

FadeIn 动画

• FadeIn
• FadeInDown
• FadeInDownBig
• FadeInUp
• FadeInUpBig
• FadeInLeft
• FadeInLeftBig
• FadeInRight
• FadeInRightBig

FadeOut 动画

• FadeOut
• FadeOutDown
• FadeOutDownBig
• FadeOutUp
• FadeOutUpBig
• FadeOutLeft
• FadeOutLeftBig
• FadeOutRight
• FadeOutRightBig

BounceIn 动画

• BounceInDown
• BounceInUp
• BounceInLeft
• BounceInRight

ElasticIn 动画

• ElasticIn
• ElasticInDown
• ElasticInUp
• ElasticInLeft
• ElasticInRight

SlideIns 动画

• SlideInDown
• SlideInUp
• SlideInLeft
• SlideInRight

FlipIn 动画

• FlipInX
• FlipInY

Zooms 动画

• ZoomIn
• ZoomOut

SpecialIn 动画

• JelloIn

Attention Seeker 动画

• Bounce
• Dance
• Flash
• Pulse
• Roulette
• ShakeX
• ShakeY
• Spin
• SpinPerfect
• Swing

所有Attention Seeker动画都可以通过设置infinite属性来实现无限循环。

示例代码

基本示例

import 'package:flutter/material.dart';
import 'package:animate_do/animate_do.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      theme: ThemeData.light(useMaterial3: true),
      home: Scaffold(
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              FadeInLeft(child: const Square()),
              FadeInUp(child: const Square()),
              FadeInDown(child: const Square()),
              FadeInRight(child: const Square()),
            ],
          ),
        ),
      ),
    );
  }
}

class Square extends StatelessWidget {
  const Square({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      color: Colors.blueAccent,
    );
  }
}

带有切换功能的基本示例

import 'package:flutter/material.dart';
import 'package:animate_do/animate_do.dart';

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool animate = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      theme: ThemeData.light(useMaterial3: true),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Toggle Animation'),
          actions: [
            IconButton(
              icon: const Icon(Icons.refresh),
              onPressed: () {
                setState(() {
                  animate = !animate;
                });
              },
            )
          ],
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                FadeIn(animate: animate, child: const Square()),
                FadeInUp(animate: animate, child: const Square()),
                FadeInDown(animate: animate, child: const Square()),
                FadeInLeft(animate: animate, child: const Square()),
                FadeInRight(animate: animate, child: const Square()),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class Square extends StatelessWidget {
  const Square({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      color: Colors.blueAccent,
    );
  }
}

使用 onFinish 回调

FadeIn(
  animate: animate,
  delay: const Duration(milliseconds: 100),
  onFinish: (direction) => print('$direction'),
  child: const Square(),
)

手动触发动画

如果你需要更细粒度地控制动画，可以使用 manualTrigger 和 controller 属性：

class ManualTriggerExample extends StatefulWidget {
  const ManualTriggerExample({Key? key}) : super(key: key);

  @override
  State<ManualTriggerExample> createState() => _ManualTriggerExampleState();
}

class _ManualTriggerExampleState extends State<ManualTriggerExample>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

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

  void triggerAnimation() {
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Manual Trigger Example'),
      ),
      body: Center(
        child: FadeInUp(
          manualTrigger: true,
          controller: (controller) => _controller = controller,
          child: const Square(),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: triggerAnimation,
        child: const Icon(Icons.play_arrow),
      ),
    );
  }
}

以上是关于 animate_do 插件的详细说明及示例代码。希望对你有所帮助！如果需要更多帮助，请随时提问。