Flutter动画位置控制插件position_animator的使用

Flutter动画位置控制插件position_animator的使用

position_animator 是一个 Flutter 包，允许你从一个部件当前位置平滑地移动到屏幕上的另一个部件的位置。该包还提供了自定义动画行为和外观的功能。

特性

• 动画部件从当前位置移动到目标部件的位置。
• 可以自定义动画曲线和持续时间。
• 选项可以调整动画过程中部件的大小。
• 可以使用自定义构建器来定义部件如何被动画化。

使用示例

以下是一些示例图片：

入门指南

安装

在你的 pubspec.yaml 文件中添加 position_animator：

dependencies:
  position_animator: ^1.0.0

然后运行：

flutter pub get

使用

要使用 PositionAnimator，你需要将要动画的部件包装在一个 PositionAnimatorWidget 中，并为要动画的部件和目标部件提供 GlobalKey。

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:position_animator/position_animator.dart';

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

class MyApp extends StatelessWidget {
  final GlobalKey appBarKey = GlobalKey();
  final GlobalKey bottomBarKey = GlobalKey();

  MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Builder(builder: (context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text('AppBar'),
            actions: [
              Icon(
                Icons.shopping_cart_outlined,
                key: appBarKey,
              ),
              const SizedBox(width: 20),
            ],
          ),
          bottomNavigationBar: SizedBox(
            height: kToolbarHeight,
            child: AppBar(
              title: const Text('BottomBar'),
              actions: [
                Icon(
                  Icons.shopping_cart_outlined,
                  key: bottomBarKey,
                ),
                const SizedBox(width: 20),
              ],
            ),
          ),
          body: ListView.separated(
            itemCount: 20,
            padding: const EdgeInsets.all(20),
            itemBuilder: (BuildContext context, int index) {
              final GlobalKey widgetKey = GlobalKey();
              return Row(
                children: [
                  PositionAnimatorWidget(
                    key: widgetKey,
                    child: SizedBox.square(
                      dimension: 100,
                      child: Card(
                        color:
                        Color.fromRGBO(Random().nextInt(255), Random().nextInt(255), Random().nextInt(255), 1),
                        child: const FittedBox(
                          fit: BoxFit.scaleDown,
                          child: Icon(Icons.shopping_basket_outlined),
                        ),
                      ),
                    ),
                  ),
                  const Spacer(flex: 2),
                  ElevatedButton(
                    onPressed: () {
                      final animator = PositionAnimator(
                        targetWidgetKey: bottomBarKey,
                        widgetKey: widgetKey,
                        duration: const Duration(seconds: 3),
                        curve: Curves.elasticInOut,
                      );
                      animator.start(context);
                    },
                    child: const Text('Add'),
                  ),
                  const SizedBox(width: 20),
                  ElevatedButton(
                    onPressed: () {
                      final animator = PositionAnimator(
                        targetWidgetKey: appBarKey,
                        widgetKey: widgetKey,
                        duration: const Duration(seconds: 1),
                        curve: Curves.linear,
                      );
                      animator.start(context);
                    },
                    child: const Text('Add'),
                  ),
                ],
              );
            },
            separatorBuilder: (BuildContext context, int index) {
              return const Divider();
            },
          ),
        );
      }),
    );
  }
}