Flutter动态表情动画插件animated_emoji的使用

Animated Emoji

animated_emoji插件为您的应用提供了超过400个动态表情。您可以在应用程序中的任何地方使用AnimatedEmoji小部件并选择一个表情。

使用方法

基本用法

只需在代码中使用AnimatedEmoji组件，并指定一个表情即可：

const AnimatedEmoji(
  AnimatedEmojis.rocket,
),

自定义配置

您可以根据需要配置这个小部件，例如设置大小、是否重复播放等：

AnimatedEmoji(
  AnimatedEmojis.clap.dark,
  size: 128,
  repeat: false,
),

离线支持

为了实现离线支持，您还可以将表情添加到您的assets中。首先，在pubspec.yaml文件中导入表情。表情的名字可以在Noto Animated Emoji找到。

需要注意的是，如果您想使用特定肤色的表情变化，需要单独导入这些变体（在导入时添加前缀，如Dark, Light等）：

flutter:
  assets:
    - packages/animated_emoji/lottie/rocket.json
    - packages/animated_emoji/lottie/clap.json 
    # 导入一个肤色变化的表情。
    - packages/animated_emoji/lottie/clapDark.json

额外信息

该包使用了Noto Animated Emoji，其授权协议为CC BY 4.0。

示例Demo

下面是一个完整的示例demo，展示了如何使用animated_emoji插件来创建带有动态表情的应用程序界面：

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Emoji',
      theme: ThemeData(primarySwatch: Colors.blue, useMaterial3: true),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Animated Emoji')),
      body: Center(
        child: Column(
          children: [
            const AnimatedEmoji(
              AnimatedEmojis.rocket,
              size: 128,
            ),
            const AnimatedEmoji(
              AnimatedEmojis.victory,
              size: 128,
              repeat: false,
              // 强制从assets加载表情。
              source: AnimatedEmojiSource.asset,
            ),
            AnimatedEmoji(
              // 更改肤色
              AnimatedEmojis.wave.dark,
            ),
            const DemoHoverEmoji(),
          ],
        ),
      ),
    );
  }
}

/// 演示如何使用 [AnimationController] 与 [AnimatedEmoji].
class DemoHoverEmoji extends StatefulWidget {
  const DemoHoverEmoji({super.key});

  @override
  State<DemoHoverEmoji> createState() => _DemoHoverEmojiState();
}

class _DemoHoverEmojiState extends State<DemoHoverEmoji>
    with SingleTickerProviderStateMixin {
  late final AnimationController controller;

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

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (event) {
        controller.forward(from: 0);
      },
      child: AnimatedEmoji(
        AnimatedEmojis.brokenHeart,
        controller: controller,
        size: 128,
        onLoaded: (duration) {
          // 获取动画的持续时间。
          controller.duration = duration;
        },
      ),
    );
  }
}

/// 展示高级用法。
class AdvancedUsageEmojis extends StatelessWidget {
  const AdvancedUsageEmojis({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AnimatedEmoji(
          AnimatedEmojis.fromId('1f386'),
        ),
        AnimatedEmoji(
          AnimatedEmojis.fromEmojiString('❤️')!,
        ),
        Builder(
          builder: (context) {
            // 根据名字获取表情。
            final emoji = AnimatedEmojis.fromName('victory');

            // 检查表情是否支持肤色。
            return AnimatedEmoji(
              emoji.hasSkinTones
                  ? (emoji as AnimatedTonedEmojiData).mediumLight
                  : emoji,
            );
          },
        ),
      ],
    );
  }
}

此示例包括了基本的动态表情展示、通过鼠标悬停触发动画、以及更复杂的表情查找和显示逻辑。希望这可以帮助您更好地理解和使用animated_emoji插件！