Flutter动画过渡效果插件tween_image_widget的使用

Flutter 动画过渡效果插件 tween_image_widget 的使用

tween_image_widget 是一个用于在 Flutter 中实现图像序列动画的插件。通过该插件，您可以轻松地创建重复或可控的动画效果。下面将详细介绍如何使用这个插件，并提供一个完整的示例 Demo。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 tween_image_widget 作为依赖项：

dependencies:
  tween_image_widget: ^0.0.2  # 请使用 pub 上的最新版本

2. 使用 Widget

2.1 重复动画

如果您想创建一个简单的重复动画，只需传递图像路径、索引范围和动画持续时间即可。例如：

TweenImageWidget(
  ImagesEntry(1, 8, "assets/img/addpage_icon_load%s.png"),  // 图像路径模板
  durationMilliseconds: 500,  // 动画持续时间为 500 毫秒
  height: 50,  // 可选：设置图像的高度
  width: 50,   // 可选：设置图像的宽度
)

2.2 控制动画

如果您需要手动控制动画（如暂停、恢复、反转等），则需要将 repeat 参数设置为 false，并定义 TweenImageWidget，然后根据场景调用 reverse()、forward() 和 stop() 等方法。例如：

class _MyHomePageState extends State<MyHomePage> {
  TweenImageWidget _curtainAnimationImage;

  [@override](/user/override)
  void initState() {
    super.initState();
    _curtainAnimationImage = TweenImageWidget(
      ImagesEntry(1, 20, "equipmentcontrol_pic_curtain%s".toAssetImg()),  // 图像路径模板
      durationMilliseconds: 5000,  // 动画持续时间为 5000 毫秒
      repeat: false,  // 不自动重复
    );
  }

  void _startAnimation() {
    _curtainAnimationImage.forward();  // 开始正向播放动画
  }

  void _stopAnimation() {
    _curtainAnimationImage.stop();  // 停止动画
  }

  void _reverseAnimation() {
    _curtainAnimationImage.reverse();  // 反向播放动画
  }
}

2.3 其他参数

• startsValue: 动画的起始状态值，以百分比计算。例如，startsValue: curtainPosition / 100 表示从 curtainPosition 百分比处开始动画。
• width 和 height: 可选参数，用于指定图像的宽度和高度。如果设置了这些参数，图像将根据指定的尺寸进行缩放。

3. 示例代码

下面是一个完整的示例，展示了如何使用 tween_image_widget 实现门的开关动画。用户可以通过点击按钮来控制门的开闭。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'tween_image_widget Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Tween Image Widget Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  bool isDoorOpen = true;
  TweenImageWidget _doorAnimationImage;

  [@override](/user/override)
  void initState() {
    super.initState();
    _doorAnimationImage = TweenImageWidget(
      ImagesEntry(1, 4, "images/equipmentcontrol_pic_door%s"),  // 图像路径模板
      durationMilliseconds: 600,  // 动画持续时间为 600 毫秒
      repeat: false,  // 不自动重复
      startsValue: isDoorOpen ? 1 : 0,  // 根据门的状态设置起始值
    );
  }

  void _toggleDoor() {
    setState(() {
      isDoorOpen = !isDoorOpen;  // 切换门的状态
      if (isDoorOpen) {
        _doorAnimationImage.forward();  // 打开门
      } else {
        _doorAnimationImage.reverse();  // 关闭门
      }
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Expanded(child: _doorAnimationImage),  // 显示动画
          SizedBox(height: 20),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              ElevatedButton(
                child: Text("Lock"),
                onPressed: () {
                  _toggleDoor();  // 关闭门
                },
              ),
              ElevatedButton(
                child: Text("Unlock"),
                onPressed: () {
                  _toggleDoor();  // 打开门
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}