Flutter鼠标悬停动画插件animate_on_hover的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter鼠标悬停动画插件animate_on_hover的使用

添加悬停时的动画效果到你的Web小部件上，可以使用此包。

截图

开始使用

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

dependencies:
  animate_on_hover: ^1.0.2

使用方法

首先，导入该包：

import 'package:animate_on_hover/animate_on_hover.dart';

然后，在你的小部件上添加increaseSizeOnHover()方法，并传入缩放因子作为参数：

Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Container(
        height: 75,
        width: 100,
        decoration: BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.circular(5),
        ),
      ).increaseSizeOnHover(1.5),
    ),
  );
}

在这个例子中，当鼠标悬停在红色容器上时，容器会放大1.5倍。

额外信息

欢迎提交拉取请求。对于重大更改，请先打开一个问题讨论你想要进行的更改。


### 完整示例代码

```dart
import 'package:animate_on_hover/animate_on_hover.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Animate on hover 示例',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const HomeScreen());
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: 75,
          width: 100,
          decoration: BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.circular(5),
          ),
        ).increaseSizeOnHover(1.5), // 当鼠标悬停时，容器将放大1.5倍
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter应用中使用animate_on_hover插件来实现鼠标悬停动画的一个简单示例。这个插件允许你在鼠标悬停在Widget上时触发动画效果。

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

dependencies:
  flutter:
    sdk: flutter
  animate_on_hover: ^2.0.0  # 请检查最新版本号

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

接下来，你可以创建一个Flutter应用，并在其中使用AnimateOnHover包装你的Widget。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animate on Hover Demo'),
        ),
        body: Center(
          child: HoverWidget(),
        ),
      ),
    );
  }
}

class HoverWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      color: Colors.grey[300],
      child: AnimateOnHover(
        hoverChild: Transform.scale(
          scale: 1.2,
          child: Container(
            color: Colors.blue,
          ),
        ),
        child: Container(
          color: Colors.grey[300],
          child: Center(
            child: Text(
              'Hover Over Me',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
        hoverAnimationCurve: Curves.easeInOutQuad,
        hoverDuration: Duration(milliseconds: 300),
      ),
    );
  }
}

在这个示例中：

  • AnimateOnHover组件用于包装一个Widget，当鼠标悬停在该Widget上时，将显示hoverChild定义的Widget。
  • hoverChild是一个放大了1.2倍的蓝色容器。
  • 默认情况下，AnimateOnHover显示的是child定义的Widget，即一个灰色的容器，其中包含文本“Hover Over Me”。
  • hoverAnimationCurve定义了动画的曲线，这里使用的是Curves.easeInOutQuad。
  • hoverDuration定义了动画的持续时间，这里是300毫秒。

运行这个应用，当你将鼠标悬停在中心的灰色方块上时，你会看到它放大并变成蓝色。当你将鼠标移开时，它会恢复到原始状态。

这个示例展示了如何使用animate_on_hover插件来创建简单的鼠标悬停动画效果。你可以根据需要调整动画参数、Widget样式等，以实现更复杂和定制化的动画效果。

回到顶部