Flutter动画效果插件peckish_animations的使用

Flutter动画效果插件peckish_animations的使用

特性

允许开发者在通知中添加心情反馈、5星评分等。

开始使用

安装 Flutter 和 Dart，然后将此包添加到你的 pubspec.yaml 文件中并运行 flutter pub get。

额外信息

如有任何关于插件的问题或建议，请联系 peckish 团队。邮箱: peckishhuman@gmail.com

示例代码

main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Peckish Animation',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin {
  bool _showBalloons = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Peckish Animation"),),
      body: Stack(
        children: [
          // 其他小部件
          Center(
            child: IconButton(
              icon: Icon(
                _showBalloons ? Icons.favorite : Icons.favorite_border,
                color: _showBalloons ? Colors.red : Colors.grey,
                size: 50,
              ),
              onPressed: () {
                setState(() {
                  _showBalloons = !_showBalloons;
                });
              },
            ),
          ),
          // 气球动画 - 现在更简单了！
          BalloonAnimation(
            balloonCount: 25,
            showBalloons: _showBalloons,
            onComplete: () {
              print('Peckish Animation completed!');
            },
          ),
        ],
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的 Flutter 应用程序，其中包含一个按钮。点击该按钮时，会显示或隐藏一系列气球动画。气球动画由 BalloonAnimation 小部件生成，它接受几个参数来控制动画的行为。


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

1 回复

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


peckish_animations 是一个用于 Flutter 的动画插件，它提供了一些预定义的动画效果，可以轻松地集成到你的 Flutter 应用中。使用这个插件，你可以快速地为你的应用添加各种动画效果，而不需要从头编写复杂的动画代码。

安装 peckish_animations

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

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

然后，运行 flutter pub get 来安装依赖。

使用 peckish_animations

peckish_animations 提供了一些预定义的动画效果，你可以直接使用这些效果来为你的应用添加动画。

1. 引入插件

在你需要使用动画的 Dart 文件中，首先引入 peckish_animations：

import 'package:peckish_animations/peckish_animations.dart';

2. 使用预定义动画

peckish_animations 提供了多种预定义的动画效果，例如 FadeInAnimation、SlideInAnimation、ScaleAnimation 等。

示例：使用 FadeInAnimation
import 'package:flutter/material.dart';
import 'package:peckish_animations/peckish_animations.dart';

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Peckish Animations Example'),
      ),
      body: Center(
        child: FadeInAnimation(
          duration: Duration(seconds: 2),
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

在这个示例中，FadeInAnimation 会使文本在 2 秒内逐渐淡入。

示例：使用 SlideInAnimation
import 'package:flutter/material.dart';
import 'package:peckish_animations/peckish_animations.dart';

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Peckish Animations Example'),
      ),
      body: Center(
        child: SlideInAnimation(
          duration: Duration(seconds: 2),
          from: Offset(-1.0, 0.0), // 从左边滑入
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

在这个示例中，SlideInAnimation 会使文本从左边滑入。

示例：使用 ScaleAnimation
import 'package:flutter/material.dart';
import 'package:peckish_animations/peckish_animations.dart';

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Peckish Animations Example'),
      ),
      body: Center(
        child: ScaleAnimation(
          duration: Duration(seconds: 2),
          scale: 2.0, // 放大到两倍
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

在这个示例中，ScaleAnimation 会使文本在 2 秒内放大到两倍。

自定义动画

peckish_animations 还允许你通过传递自定义的 AnimationController 和 Curve 来进一步自定义动画效果。

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

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

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  AnimationController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Peckish Animations Example'),
      ),
      body: Center(
        child: FadeInAnimation(
          controller: _controller,
          curve: Curves.easeInOut,
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}
回到顶部