Flutter hooks中的Animation相关的钩子

站长

2024年07月16日 16:52 · 阅读数 36

一、详细介绍Flutter hooks中的useSingleTickerProvider

useSingleTickerProvider 是 Flutter Hooks 包中提供的一个钩子，它用于在 HookWidget 中创建一个单一的 TickerProvider。这个钩子特别适用于需要 TickerProvider 的场景，比如动画控制 (AnimationController)。在 Flutter 的动画系统中，TickerProvider 被用于驱动动画，它告诉动画每一帧应该在何时播放。

在标准的 Flutter 开发中，当你需要在 StatefulWidget 中使用 AnimationController，你通常需要让 State 类实现 TickerProviderStateMixin。但在使用 Flutter Hooks 时，useSingleTickerProvider 提供了一个更简洁的方式来获取 TickerProvider。

使用方法

你可以直接在 HookWidget 中调用 useSingleTickerProvider 来获取一个 TickerProvider，然后将它用于创建 AnimationController 或其他需要 TickerProvider 的对象。

示例

下面是一个使用 useSingleTickerProvider 和 AnimationController 的示例，展示了如何在 HookWidget 中创建一个简单的淡入淡出动画：

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

class FadeWidget extends HookWidget {
  @override
  Widget build(BuildContext context) {
    // 使用useSingleTickerProvider获取一个TickerProvider
    final tickerProvider = useSingleTickerProvider();
    // 使用获取的TickerProvider创建AnimationController
    final animationController = useAnimationController(
      duration: const Duration(seconds: 2),
      vsync: tickerProvider,
    );

    // 启动动画
    useEffect(() {
      animationController.forward();
      return null; // 在这里不需要清理操作
19    }, const []);
20
21    // 创建动画
22    final animation = useMemoized(
23      () => Tween(begin: 0.0, end: 1.0).animate(animationController),
24      [animationController],
25    );
26
27    return FadeTransition(
28      opacity: animation,
29      child: Center(
30        child: Container(
31          width: 200,
32          height: 200,
33          color: Colors.blue,
34          child: Center(
35            child: Text(
36              'Flutter Hooks',
37              style: TextStyle(color: Colors.white, fontSize: 24),
38            ),
39          ),
40        ),
41      ),
42    );
43  }
44}

在这个示例中，我们首先使用 useSingleTickerProvider 获取一个 TickerProvider，然后用它创建一个 AnimationController。通过 useEffect，我们在组件首次渲染时启动动画。同时，我们使用 Tween 创建了一个从 0 到 1 渐变的动画，并通过 FadeTransition 使用这个动画来实现淡入效果。

注意事项

使用 useSingleTickerProvider 时，它会自动管理 TickerProvider 的生命周期，因此你不需要担心 TickerProvider 的创建和销毁问题。
如果你的组件需要多个 TickerProvider，那么可能需要重新考虑组件的设计，因为 useSingleTickerProvider 只提供了一个 TickerProvider。在这种情况下，可能需要使用传统的 StatefulWidget 和 TickerProviderStateMixin。
当使用 useAnimationController 或其他需要 TickerProvider 的 Hooks 时，useSingleTickerProvider 是一个非常有用的工具，它简化了动画的创建和管理过程。

useSingleTickerProvider 钩子提供了一种在使用 Flutter Hooks 时简洁方便地获取 TickerProvider 的方法，使得在 HookWidget 中创建和管理动画变得更加容易。

二、详细介绍Flutter hooks中的useAnimationController

useAnimationController 是 Flutter Hooks 包中提供的一个钩子，用于在 HookWidget 中方便地创建和管理 AnimationController 对象。这个钩子抽象了 AnimationController 的初始化和销毁过程，让开发者能够更专注于动画逻辑的实现，而不用担心资源管理。

使用方法

useAnimationController 可以接受一个配置对象，这个对象允许你定制 AnimationController 的行为，包括动画的时长、值区间、动画曲线等。如果没有提供配置，将创建一个默认的 AnimationController。

示例

下面是一个使用 useAnimationController 的示例，展示了如何创建一个简单的淡入淡出动画：

Dart
1import 'package:flutter/material.dart';
2import 'package:flutter_hooks/flutter_hooks.dart';
3
4class FadeAnimationExample extends HookWidget {
5  @override
6  Widget build(BuildContext context) {
7    // 使用useAnimationController创建一个AnimationController
8    final animationController = useAnimationController(
9      duration: const Duration(seconds: 2), // 动画时长
10    );
11
12    // 创建一个Tween动画
13    final animation = useMemoized(
14      () => Tween(begin: 0.0, end: 1.0).animate(animationController),
15      [animationController],
16    );
17
18    // 使用useEffect启动动画
19    useEffect(() {
20      // 从透明度0淡入到透明度1
21      animationController.forward();
22      return null; // 在这个示例中，我们不需要清理操作
23    }, [animationController]);
24
25    return Scaffold(
26      appBar: AppBar(
27        title: Text('useAnimationController 示例'),
28      ),
29      body: Center(
30        child: FadeTransition(
31          opacity: animation, // 使用Tween动画改变透明度
32          child: Container(
33            width: 200,
34            height: 200,
35            color: Colors.blue,
36            child: Center(
37              child: Text(
38                'Flutter Hooks',
39                style: TextStyle(color: Colors.white, fontSize: 24),
40              ),
41            ),
42          ),
43        ),
44      ),
45    );
46  }
47}

在这个示例中，我们使用 useAnimationController 创建了一个 AnimationController，并设置了动画时长为 2 秒。然后，我们使用 Tween 创建了一个从 0 到 1 渐变的动画，并通过 FadeTransition 使用这个动画来实现淡入效果。useEffect 被用来在组件首次渲染时启动动画。

注意事项

useAnimationController 自动处理 AnimationController 的初始化和销毁，因此你不需要担心资源泄漏。
使用 useMemoized 来创建依赖于 AnimationController 的动画，以确保动画对象不会在每次组件渲染时被重新创建。
通过 useEffect 钩子，你可以在组件的特定生命周期（如首次渲染或卸载前）执行动画操作，如启动或停止动画。
如果需要使用自定义的 TickerProvider，可以配合 useSingleTickerProvider 钩子一起使用。

useAnimationController 钩子为 Flutter 开发者提供了一种在使用 Flutter Hooks 时简洁方便地创建和管理动画的方法，简化了动画的创建和资源管理过程，使得在 HookWidget 中实现动画变得更加容易和直观。

三、详细介绍Flutter hooks中的useAnimation

useAnimation 是 Flutter Hooks 包中提供的一个钩子，用于在 HookWidget 中方便地监听 Animation 对象的值变化。当你使用动画时，经常需要在动画值改变的时候重建界面以响应这些变化。useAnimation 钩子可以帮助你实现这个需求，它会在动画值变化时触发组件重建，从而更新 UI。

使用方法

要使用 useAnimation 钩子，你首先需要有一个 Animation<double> 对象。这个动画对象可以是通过 AnimationController 创建的，也可以是任何其他类型的动画，比如通过 Tween、CurvedAnimation 等创建的动画。

useAnimation 接受一个 Animation<double> 对象作为参数，并返回当前动画的值。当动画值变化时，它会自动触发组件重建。

示例

下面是一个使用 useAnimationController 和 useAnimation 的示例，展示了如何创建一个简单的旋转动画：

Dart
1import 'package:flutter/material.dart';
2import 'package:flutter_hooks/flutter_hooks.dart';
3
4class RotationAnimationExample extends HookWidget {
5  @override
6  Widget build(BuildContext context) {
7    // 使用useAnimationController创建一个AnimationController
8    final animationController = useAnimationController(
9      duration: const Duration(seconds: 2), // 动画时长为2秒
10    )..repeat(reverse: true); // 动画循环执行，反向播放
11
12    // 创建一个旋转动画
13    final animation = useMemoized(
14      () => Tween(begin: 0.0, end: 2 * 3.14).animate(animationController),
15      [animationController],
16    );
17
18    // 使用useAnimation监听动画值的变化
19    final animationValue = useAnimation(animation);
20
21    return Transform.rotate(
22      angle: animationValue, // 使用动画值作为旋转角度
23      child: Center(
24        child: Container(
25          width: 100,
26          height: 100,
27          color: Colors.blue,
28          child: Center(
29            child: Text(
30              '旋转',
31              style: TextStyle(color: Colors.white, fontSize: 24),
32            ),
33          ),
34        ),
35      ),
36    );
37  }
38}

在这个示例中，我们使用 useAnimationController 创建了一个 AnimationController，并设置了动画时长为 2 秒。然后，我们通过 Tween 创建了一个从 0 到 2 * 3.14（即一圈）的旋转动画，并使用 useAnimation 来监听这个动画的值。当动画值变化时，useAnimation 会触发组件重建，并更新旋转角度，从而实现旋转动画效果。

注意事项

useAnimation 自动监听动画值的变化并触发组件重建，使得动画的实现更加简单直观。
使用 useAnimationController 和 useAnimation 钩子可以轻松创建和管理动画，避免手动管理动画的生命周期和监听器。
你可以结合使用多个动画钩子来实现更复杂的动画效果，如配合 useEffect 钩子来控制动画的播放和停止。

通过使用 useAnimation 钩子，Flutter 开发者能够以一种简洁和响应式的方式在 HookWidget 中实现动画，从而提升应用的用户体验和交互性。

转载自:https://juejin.cn/post/7362309246556766247