Flutter动画效果插件widget_and_text_animator的使用

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

Flutter动画效果插件widget_and_text_animator的使用

介绍

widget and text animator 是一个Flutter插件，用于简化Widget和Text的动画创建。它可以让动画效果变得非常简单，并且可以创建出令人惊艳的效果！你可以在这里查看在线预览。

logo

支持平台

  • ALL

如何使用

添加依赖

在pubspec.yaml文件中添加以下内容：

dependencies:
  widget_and_text_animator: ^1.1.5

然后，在Dart代码中导入：

import 'package:widget_and_text_animator/widget_and_text_animator.dart';

基础用法

WidgetAnimator

WidgetAnimator 可以包装任何Widget，使其具有动画效果。它提供了三种主要功能：

  • Incoming effects - 当Widget首次进入屏幕时显示的动画效果。
  • At rest effects - 当Widget可见时显示的动画效果。
  • Outgoing effects - 当Widget被替换时离开屏幕的动画效果。

示例：简单的Container动画

当Container首次进入屏幕时从底部滑入：

WidgetAnimator(
  incomingEffect: WidgetTransitionEffects.incomingSlideInFromBottom(),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

intro1

示例：持续摆动的Container

让Container在屏幕上持续摆动：

WidgetAnimator(
  atRestEffect: WidgetRestingEffects.swing(),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

intro2

示例：组合Incoming和At Rest动画

将FloatingActionButton首次进入屏幕时从底部滑入，并在显示时持续摆动：

WidgetAnimator(
  incomingEffect: WidgetTransitionEffects.incomingSlideInFromBottom(),
  atRestEffect: WidgetRestingEffects.swing(),
  child: FloatingActionButton(
    onPressed: (){},
    tooltip: 'Increment',
    child: const Icon(Icons.add),
  ),
)

intro3

Widget概述

主要Widget

该库包含四个主要的Widget：

  • WidgetAnimator：为任何Widget添加动画效果，如透明度、偏移、模糊、倾斜、旋转、缩放等。
  • WidgetAnimatorSequence：基于时间或用户点击来动画化一系列WidgetAnimator。
  • TextAnimator：作为标准Text widget的直接替代品，赋予其强大的动画功能。
  • TextAnimatorSequence：类似于WidgetAnimatorSequence，但适用于TextAnimator widgets。

TextAnimator的重要性

虽然你可以通过WidgetAnimator轻松地动画化Text widget，但它会将整个文本作为一个整体处理。TextAnimator的存在是为了对字符串中的每个字符进行处理，从而创建一些酷炫的交错效果。

更多细节

WidgetTransitionEffects

WidgetTransitionEffects用于创建进出动画效果，以下是其主要属性：

属性 描述 默认值
offset 设置相对于正常位置的偏移量 Offset(0,0)
skew X和Y轴上的倾斜程度 Offset(0,0)
scale 缩放比例 1
blur X和Y轴上的模糊程度 Offset(0,0)
rotation 旋转弧度 0
opacity 透明度范围 1
curve 动画曲线 Curve.easeInOut
builder 自定义动画构建器 null
duration 动画持续时间 Duration(milliseconds: 300)
delay 动画延迟时间 null

WidgetAtRestEffects

WidgetAtRestEffects用于创建Widget在静止状态下的动画效果，以下是几种常见的构造函数：

  • WidgetRestingEffects.wave()：使Widget上下波动。
  • WidgetRestingEffects.pulse()：改变Widget的透明度。
  • WidgetRestingEffects.rotate()：旋转Widget 360度。
  • WidgetRestingEffects.bounce()：抬起并弹回Widget。
  • WidgetRestingEffects.slide()：左右倾斜Widget。
  • WidgetRestingEffects.swing()：前后摆动Widget。
  • WidgetRestingEffects.size()：改变Widget的大小。
  • WidgetRestingEffects.fidget()：随机移动Widget。
  • WidgetRestingEffects.dangle()：基于顶部中心轴左右倾斜Widget。
  • WidgetRestingEffects.vibrate()：随机移动Widget的位置。

WidgetAnimatorSequence

WidgetAnimatorSequence用于按顺序动画化一系列WidgetAnimator，支持基于时间和用户点击触发。

示例：自动切换颜色的容器

每4秒自动切换一次颜色，并允许用户点击跳转：

return WidgetAnimatorSequence(
  children: [
    WidgetAnimator(
        key: const ValueKey('one'),
        incomingEffect: WidgetTransitionEffects.incomingScaleDown(),
        outgoingEffect: WidgetTransitionEffects.outgoingScaleUp(),
        child: Container(width: 200,height: 200,color: Colors.red,child: Align(alignment: Alignment.centerLeft,child: Text('Red')))),
    WidgetAnimator(
        key: const ValueKey('two'),
        incomingEffect: WidgetTransitionEffects.incomingSlideInFromLeft(),
        outgoingEffect: WidgetTransitionEffects.outgoingSlideOutToBottom(),
        child: Container(width: 200,height: 200,color: Colors.green,child: Align(alignment: Alignment.centerLeft,child: Text('Green')))),
    WidgetAnimator(
        key: const ValueKey('three'),
        incomingEffect: WidgetTransitionEffects(blur: const Offset(2,2), duration: const Duration(milliseconds: 600)),
        atRestEffect: WidgetRestingEffects.slide(),
        outgoingEffect: WidgetTransitionEffects(blur: const Offset(2,2), duration: const Duration(milliseconds: 600)),
        child: Container(width: 200,height: 200,color: Colors.blue,child: Align(alignment: Alignment.centerLeft,child: Text('Blue'))))
  ],
  tapToProceed: true,
  loop: true,
  transitionTime: const Duration(seconds: 4),
);

widget_sequence

TextAnimator

TextAnimator是Text widget的替代品，它可以分割文本并为每个字符或单词创建动画效果。

示例：波浪文本

使文本逐字符出现并上下波动：

return Container(width: 200, height: 200, color: Colors.red, 
  child: TextAnimator('Wave text', atRestEffect: WidgetRestingEffects.wave(),)
);

wave_text

TextAnimatorSequence

TextAnimatorSequence用于按顺序动画化一系列TextAnimator，支持基于时间和用户点击触发。

示例：自动切换文本

每4秒自动切换一次文本，并允许用户点击跳转：

return TextAnimatorSequence(
  children: [
      TextAnimator('Red',
        incomingEffect: WidgetTransitionEffects.incomingScaleDown(),
        atRestEffect: WidgetRestingEffects.bounce(),
        outgoingEffect: WidgetTransitionEffects.outgoingScaleUp(),
        style: GoogleFonts.sanchez(textStyle: const TextStyle(fontWeight: FontWeight.w900, color: Colors.red, letterSpacing: -2, fontSize: 64))),
      TextAnimator('Green',
        incomingEffect: WidgetTransitionEffects.incomingSlideInFromLeft(),
        atRestEffect: WidgetRestingEffects.fidget(),
        outgoingEffect: WidgetTransitionEffects.outgoingSlideOutToBottom(),
        style: GoogleFonts.sanchez(textStyle: const TextStyle(fontWeight: FontWeight.w900, color: Colors.green, letterSpacing: -2, fontSize: 64))),
      TextAnimator('Blue',
        incomingEffect: WidgetTransitionEffects(blur: const Offset(2, 2), duration: const Duration(milliseconds: 600)),
        atRestEffect: WidgetRestingEffects.wave(),
        outgoingEffect: WidgetTransitionEffects(blur: const Offset(2, 2), duration: const Duration(milliseconds: 600)),
        style: GoogleFonts.sanchez(textStyle: const TextStyle(fontWeight: FontWeight.w900, color: Colors.blue, letterSpacing: -2, fontSize: 64))),
  ],
tapToProceed: true,
loop: true,
transitionTime: const Duration(seconds: 4),
);

text_sequence

Keys

为了检测WidgetAnimator的变化，可以通过更改child类型或为其分配不同的key来实现。例如：

WidgetAnimator(
  incomingEffect: WidgetTransitionEffects.incomingSlideInFromLeft(),
  outgoingEffect: WidgetTransitionEffects.outgoingSlideOutToRight(),
  child: isBlue ? Container(key: ValueKey('blue'), width: 100, height: 100, color: Colors.blue) : 
                  Container(key: ValueKey('red'), width: 100, height: 100, color: Colors.red) 
)

keys

自定义动画

如果默认效果无法满足需求，可以使用builder属性自定义动画效果。例如，创建一个三角形路径的动画：

WidgetAnimator(
  atRestEffect: WidgetRestingEffects(
    duration: const Duration(seconds: 3),
    builder: (WidgetRestingEffects effects, AnimationController animationController) {
      AnimationSettings _animationSettings = AnimationSettings(animationController: animationController);
      _animationSettings.offsetYAnimation = TweenSequence<double>(
        [
          TweenSequenceItem<double>(tween: Tween<double>(begin: 0, end: 150).chain(CurveTween(curve: Curves.easeInOut)), weight: 33.0,),
          TweenSequenceItem<double>(tween: Tween<double>(begin: 150, end: 150).chain(CurveTween(curve: Curves.easeInOut)), weight: 33.0,),
          TweenSequenceItem<double>(tween: Tween<double>(begin: 150, end: 0).chain(CurveTween(curve: Curves.easeInOut)), weight: 33.0,)
        ]
      ).animate(CurvedAnimation(parent: animationController, curve: Curves.linear));

      _animationSettings.offsetXAnimation = TweenSequence<double>(
        [
          TweenSequenceItem<double>(tween: Tween<double>(begin: 0, end: 80).chain(CurveTween(curve: Curves.easeInOut)), weight: 33.0,),
          TweenSequenceItem<double>(tween: Tween<double>(begin: 80, end: -80).chain(CurveTween(curve: Curves.easeInOut)), weight: 33.0,),
          TweenSequenceItem<double>(tween: Tween<double>(begin: -80, end: 0).chain(CurveTween(curve: Curves.easeInOut)), weight: 33.0,)
        ]
      ).animate(CurvedAnimation(parent: animationController, curve: Curves.linear));

      return _animationSettings;
    },
  ),
  child: Container(
    width: 200,
    height: 200,
    color: Colors.amber,
    child: const Center(
      child: Padding(
        padding: EdgeInsets.all(8.0),
        child: Text('Hello'),
      ),
    ),
  ),
)

custom

GestureAnimator

GestureAnimator是一个可以直接替代GestureDetector的Widget，它仅覆盖基本的onTap手势，但允许通过几个属性为按下后的Widget添加动画效果。

示例：带有动画效果的按钮

按下按钮时缩小、向上移动并触发触觉反馈：

return GestureAnimator(
  curve: Curves.easeInOut,
  scaleSize: 0.9,
  yOffset: -5,
  duration: const Duration(milliseconds: 150),
  hapticFeedback: HapticFeedback.selectionClick,   
  triggerOnTapAfterAnimationComplete: true,
  onTap: (){
    Navigator.of(context).push(Samples.route());
  },
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Container(color: Colors.green, child: const Padding(
      padding: EdgeInsets.all(12.0),
      child: Text('Do not push me!'),
    )),
  ),
);

更多示例

更多示例可以在GitHub项目中找到。

反馈与贡献

如果你遇到问题或有新功能的需求，请在这里提交issue或提出建议。

感谢支持

如果你喜欢这个包，欢迎请我喝杯咖啡！

Buy Me A Coffee

breath


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter中使用widget_and_text_animator插件来实现动画效果的一个简单示例。首先，你需要确保已经在pubspec.yaml文件中添加了该插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  widget_and_text_animator: ^最新版本号  # 请替换为最新的版本号

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

接下来，你可以在你的Flutter应用中使用这个插件来创建动画效果。以下是一个基本的示例，展示了如何使用WidgetAnimator和TextAnimator来创建动画。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Widget and Text Animator Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 使用WidgetAnimator创建动画
              WidgetAnimator(
                duration: 2000,  // 动画持续时间，单位为毫秒
                animationType: AnimationType.bounce,  // 动画类型
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                ),
              ),

              SizedBox(height: 20),

              // 使用TextAnimator创建文本动画
              TextAnimator(
                duration: 1500,
                animationType: AnimationType.fade,
                text: 'Hello, Flutter!',
                style: TextStyle(
                  fontSize: 24,
                  color: Colors.red,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们使用了WidgetAnimator和TextAnimator两个组件来创建动画效果。WidgetAnimator用于对任何Widget进行动画处理，而TextAnimator专门用于对文本进行动画处理。

  • duration参数指定了动画的持续时间。
  • animationType参数指定了动画的类型，如弹跳（bounce）、淡入淡出（fade）等。

你可以根据需要调整这些参数以及子Widget的样式和属性。

确保你的Flutter环境已经正确配置，并且已经安装了所需的依赖包。运行这个示例，你应该能看到一个带有动画效果的Flutter应用。

回到顶部