Flutter动画效果插件flutter_awesome_animations_kit的使用

轻松地通过选择动画类型来为视图或列表项添加动画效果。选项包括：无动画、淡入、缩放、从右向左滑动、从左向右滑动、向上滑动、翻转、弹跳、从左向右缩放、中心缩放向外。无缝增强您的用户界面！🚀✨

AnimationView功能

• ⭐️ 多种动画类型：选择多种动画类型，如none（无动画）、fadeIn（淡入）、scale（缩放）、slideRTL（从右向左滑动）、slideLTR（从左向右滑动）、slideUp（向上滑动）、flip（翻转）、bounce（弹跳）、scaleLTR（从左向右缩放）和scaleCenterZoomOut（中心缩放向外）。
• ⭐️ 完全自定义：通过repeatMode标志、持续时间和曲线设置来完全自定义动画，以创建独特的效果。
• ⭐️ 易于使用：可以轻松地将动画包裹在列表项或其他普通小部件周围，而无需index参数。
• ⭐️ 支持ListView：当与ListView一起使用时，必须提供index参数以确保正确处理列表项。
• ⭐️ 重复模式：启用或禁用重复模式以实现连续动画循环。

AnimatedText功能

• ⭐️ 文本动画：提供countDown（倒计数）、countUp（递增）、typing（打字）和none（无动画）文本动画。
• ⭐️ 可定制文本：通过起始值和结束值、持续时间、曲线和文本样式来自定义文本动画。
• ⭐️ 重复模式：启用或禁用重复模式以实现连续动画循环。

动画视图	动画文本

安装

在pubspec.yaml文件中添加此包：

$ flutter pub add flutter_awesome_animations_kit

导入包：

import 'package:flutter_awesome_animations_kit/flutter_awesome_animations_kit.dart';

使用

该软件包提供了AnimatedView和AnimatedText小部件，您可以使用它们为您的Flutter应用程序添加动画效果。

AnimatedView小部件

AnimatedView小部件可以在带有索引的列表项周围或任何普通小部件周围进行包装，而无需index参数。

对于ListView:

当使用AnimatedView与ListView一起时，必须提供index参数。

对于普通小部件:

可以包裹任何普通小部件，而无需index参数。

动画类型

你可以使用以下动画类型，并且可以完全自定义：

自定义选项

你可以通过以下方式进行自定义：

• repeatMode: 设置标志为true以启用连续动画。
• duration: 设置持续时间属性以自定义动画持续时间。
• curve: 设置曲线属性以自定义动画的缓动效果。

示例

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated View Example'),
      ),
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return AnimatedView(
            index: index,
            animationType: AnimationType.slideRTL, // 设置动画类型
            duration: Duration(milliseconds: 500), // 设置自定义持续时间
            curve: Curves.easeInOut, // 设置曲线
            repeatMode: true, // 设置重复模式
            child: ListTile(
              title: Text('Item $index'),
            ),
          );
        },
      ),
    );
  }
}

AnimatedText小部件

AnimatedText小部件提供countDown、countUp、typing和none文本动画。

动画类型

你可以使用以下动画类型，并且可以完全自定义：

自定义选项

你可以通过以下方式进行自定义：

• startValue 和 endValue
• duration
• curve
• style
• repeatMode

示例

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Text Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedText(
              normalText: "Hello...",
              animationType: TextAnimationType.typing,
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),
            AnimatedText(
              startValue: 0, 
              endValue: 100.0,
              animationType: TextAnimationType.countDown,
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),
            AnimatedText(
              startValue: 0,
              endValue: 100.0,
              animationType: TextAnimationType.countUp,
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
          ],
        ),
      ),
    );
  }
}

⏳ 工作进行中 (WIP)

• 🖥️ Web支持 (WIP) （未在Web平台上测试）。

额外信息

更多关于该包的信息：在哪里找到更多信息，如何为该包做贡献，如何报告问题，以及对包作者的期望响应等。