Flutter图片帧动画插件image_frame_animation的使用

Flutter 图片帧动画插件 image_frame_animation 的使用

播放视频图片序列，主要用于将视频作为背景，视频为循环视频

使用 ffmpeg 将视频转换为 frames

ffmpeg -i video.mp4 frame_%d.jpg

将图片放到 assets 目录

-assets
  -b2_frames

添加到 pubspec.yaml

  assets:
    - assets/b2_frame/

示例代码

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

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

  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final FrameController _controller = FrameController(
      assetPath: "assets/b2_frame", // 用于放置图片集的文件夹，后面不需要 /
      assetBaseName: "frame_",     // 基础名称
      assetFileSuffix: "jpg"       // 文件扩展名
  );

  bool _loaded = false;

  [@override](/user/override)
  void initState() {
    super.initState();
    _init();
  }
  
  Future<void> _init() async {
    await _controller.load();
    setState(() {
      _loaded = true;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return _loaded ?
    ImageFrameAnimation(
        frameController: _controller,
        duration: const Duration(seconds: 20) // 动画持续时间
    )
        : Container(
      child: Center(
        child: CircularProgressIndicator() // 加载时显示的进度指示器
      )
    );
  }
}

更多关于Flutter图片帧动画插件image_frame_animation的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图片帧动画插件image_frame_animation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


image_frame_animation 是一个用于在 Flutter 中实现图片帧动画的插件。它允许你将一系列图片帧按顺序播放，创建出动画效果。以下是使用 image_frame_animation 插件的详细步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 image_frame_animation 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  image_frame_animation: ^1.0.0  # 使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 准备图片帧

确保你已经准备好了一系列图片帧，这些图片帧将用于动画的每一帧。通常，这些图片帧会按照一定的命名规则存储在项目的 assets 目录下。

例如，假设你有以下图片帧：

assets/animations/frame1.png
assets/animations/frame2.png
assets/animations/frame3.png
assets/animations/frame4.png

在 pubspec.yaml 文件中添加这些图片资源：

flutter:
  assets:
    - assets/animations/frame1.png
    - assets/animations/frame2.png
    - assets/animations/frame3.png
    - assets/animations/frame4.png

3. 使用 ImageFrameAnimation 组件

在你的 Flutter 代码中，你可以使用 ImageFrameAnimation 组件来播放这些图片帧动画。

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

class FrameAnimationExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Frame Animation'),
      ),
      body: Center(
        child: ImageFrameAnimation.asset(
          'assets/animations/frame', // 图片帧的基本路径
          format: 'png',             // 图片格式
          frameCount: 4,             // 图片帧的数量
          frameDuration: Duration(milliseconds: 100), // 每帧的持续时间
          repeat: true,              // 是否循环播放
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: FrameAnimationExample(),
));

4. 参数说明

  • asset: 图片帧的基本路径，不包括序号和文件扩展名。例如，assets/animations/frame。
  • format: 图片的格式，例如 png 或 jpg。
  • frameCount: 图片帧的数量。
  • frameDuration: 每帧的持续时间。
  • repeat: 是否循环播放动画。

5. 运行项目

现在你可以运行你的 Flutter 项目，看到图片帧动画在屏幕上播放。

6. 其他功能

image_frame_animation 还支持其他功能，例如：

  • 网络图片帧动画：使用 ImageFrameAnimation.network。
  • 自定义控制动画的播放、暂停、停止等。

7. 示例代码

以下是一个完整的示例代码，展示了如何使用 image_frame_animation 插件：

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

class FrameAnimationExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Frame Animation'),
      ),
      body: Center(
        child: ImageFrameAnimation.asset(
          'assets/animations/frame',
          format: 'png',
          frameCount: 4,
          frameDuration: Duration(milliseconds: 100),
          repeat: true,
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: FrameAnimationExample(),
));
回到顶部