Flutter动画效果插件fly_animation的使用

Flutter动画效果插件fly_animation的使用

fly_animation 插件用于实现单个或多个小部件从一个位置移动到另一个位置的动画效果。

使用

首先，确保在 pubspec.yaml 文件中添加 fly_animation 依赖项：

dependencies:
  fly_animation: ^1.0.0

然后，你可以按照以下示例来使用该插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Fly Animation Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FlyAnimationExample(),
    );
  }
}

final _animationEndWidgetKey = GlobalKey();
int starsCount = 6;

///Fly animation example widget
class FlyAnimationExample extends StatefulWidget {
  [@override](/user/override)
  _FlyAnimationExampleState createState() => _FlyAnimationExampleState();
}

class _FlyAnimationExampleState extends State<FlyAnimationExample> {

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fly Animation Example'),
      ),
      body: FlyAnimationWidget(
        animationEndKey: _animationEndWidgetKey,
        countOfAnimationWidgets: starsCount,
        topPosition: 300.0,
        childWidget: ChildWidget(),
        animationWidget: Image.asset(
          'assets/star.png',
          height: 24,
          width: 24,
        ),
        animationWidgetWidth: 30,
        animationWidgetHeight: 30,
        animationDurationInMillis: 700,
        hideAnimationWidgetOnComplete: true,
      ),
    );
  }
}

class ChildWidget extends StatefulWidget {
  [@override](/user/override)
  _ChildWidgetState createState() => _ChildWidgetState();
}

class _ChildWidgetState extends State<ChildWidget> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(16),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Container(
                key: _animationEndWidgetKey,
                child: Image.asset(
                  'assets/star.png',
                  height: 36,
                  width: 36,
                ),
              ),
              SizedBox(
                width: 8,
              ),
              Text(
                'Total stars: $starsCount',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 20
                ),
              ),
            ],
          ),
          SizedBox(height: 200),
          Visibility(
            visible: starsCount == 0 ? false : true,
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Text(
                'You won $starsCount stars',
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 15
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}