Flutter动画效果插件cool_animations的使用

Flutter动画效果插件cool_animations的使用

Cool Animations

Cool Animations 是一个简单且色彩丰富的动画库，它由 Flutter 构建。

维护者: Tanmoy Karmakar

规格

这个库允许你轻松地实现带有惊人曲线的动画图标。
它完全用 Dart 编写。

安装

在你的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
   cool_animations: ^0.0.3

示例代码

以下是一个简单的使用示例：

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Material App',
      home: Homepage(),
    );
  }
}

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

  @override
  _HomepageState createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Cool animations'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            BounceWidget(
              onTap: (val) {
                // 忽略: 避免打印
                print(val);
              },
            ),
            RotateWidget(
              onTap: (val) {
                // 忽略: 避免打印
                print(val);
              },
              inactiveIcon: Icons.hourglass_empty_rounded,
              activeIcon: Icons.hourglass_full_rounded,
              activeColor: Colors.blue,
            ),
          ],
        ),
      ),
    );
  }
}

简单使用

要集成简单的底部导航栏，只需使用以下代码：

BounceWidget(
  onTap: (val) {
    // 忽略: 避免打印
    print(val);
  },
),

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

1 回复

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


当然，以下是如何在Flutter中使用cool_animations插件来实现一些动画效果的代码示例。cool_animations是一个提供了多种预定义动画效果的Flutter插件，可以帮助开发者快速实现复杂的动画。

首先，确保你的pubspec.yaml文件中已经添加了cool_animations依赖：

dependencies:
  flutter:
    sdk: flutter
  cool_animations: ^3.0.1  # 请检查最新版本号

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

以下是一些使用cool_animations插件的示例代码：

示例1：使用FadeAnimation

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Fade Animation Example'),
        ),
        body: Center(
          child: FadeAnimation(
            1.5.seconds, // 动画持续时间
            child: Text(
              'Hello, World!',
              style: TextStyle(fontSize: 24, color: Colors.blue),
            ),
          ),
        ),
      ),
    );
  }
}

示例2：使用SlideAnimation

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Slide Animation Example'),
        ),
        body: Center(
          child: SlideAnimation(
            1.5.seconds, // 动画持续时间
            alignment: Alignment.topLeft, // 动画开始位置
            child: Text(
              'Hello from the top left!',
              style: TextStyle(fontSize: 24, color: Colors.green),
            ),
          ),
        ),
      ),
    );
  }
}

示例3：使用BounceAnimation

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Bounce Animation Example'),
        ),
        body: Center(
          child: BounceAnimation(
            1.5.seconds, // 动画持续时间
            child: Text(
              'Bounce me!',
              style: TextStyle(fontSize: 24, color: Colors.red),
            ),
          ),
        ),
      ),
    );
  }
}

示例4：使用RotateAnimation

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Rotate Animation Example'),
        ),
        body: Center(
          child: RotateAnimation(
            1.5.seconds, // 动画持续时间
            from: 0.0, // 初始角度
            to: 360.0, // 结束角度
            child: Text(
              'Rotate me!',
              style: TextStyle(fontSize: 24, color: Colors.purple),
            ),
          ),
        ),
      ),
    );
  }
}

这些示例展示了如何使用cool_animations插件中的几种常见动画效果。你可以根据实际需求调整动画的持续时间、位置、角度等参数，以实现你所需要的动画效果。更多动画效果和详细用法，请参考cool_animations的官方文档。

回到顶部