Flutter特效动画插件hyper_effects的使用

概述

Hyper Effects 是一个受到 SwiftUI 语法启发的Flutter包，旨在创建美观的效果。它使你能够轻松地添加各种效果和过渡动画，而无需复杂的控制器或补间动画。

• 紧凑语法：一行代码实现多种复杂效果。
• 一切可动画化：无需动画控制器或补间动画，任何小部件都可以通过一行代码进行动画处理。
• 滚动过渡：根据小部件在滚动视图中的位置控制其外观。
• 指针过渡：无需手势检测器或状态管理，基于指针事件控制小部件外观。
• 易于集成：API设计简单易扩展，如果缺少某种效果，可以轻松添加。

在线演示

安装与配置

安装

在pubspec.yaml文件中添加依赖：

dependencies:
  hyper_effects: ^latest_version

或者直接运行命令：

flutter pub add hyper_effects

使用示例

以下是一个简单的例子，展示了如何使用hyper_effects来为一个小部件添加透明度效果：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Hyper Effects Demo')),
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool myCondition = false;

  void toggleCondition() {
    setState(() {
      myCondition = !myCondition;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: toggleCondition,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      )
          .opacity(myCondition ? 0 : 1)
          .animate(trigger: myCondition),
    );
  }
}

在这个例子中，点击容器时，它的透明度会在0和1之间切换，并且这个变化是带有动画效果的。

效果列表

更多细节请参考 源码

动画原理

Hyper Effects 不是一个完整的动画库，而是提供了一种方便的方式来在两个值之间插值。它受SwiftUI语法的影响，允许你在Flutter中体验类似的动画编排方式。理解这一点对于充分利用Hyper Effects非常重要。

高级用法

即时动画

如果你想立即触发动画，可以使用oneShot函数：

Container(
  color: Colors.blue,
).slideInFromBottom().oneShot();

动画序列

使用animateAfter可以让一个动画在前一个动画结束后再开始：

GestureDetector(
  onTap: () {
    setState(() {
      trigger = !trigger;
    });
  },
  child: Image.asset('assets/pin_ball_256x.png', width: 150, height: 150)
      .shake()
      .oneShot(
        delay: const Duration(seconds: 1),
        repeat: -1,
        playIf: () => !trigger,
      )
      .translateY(300, from: 0)
      .animate(
        trigger: trigger,
        curve: Curves.easeOutQuart,
        duration: const Duration(milliseconds: 2000),
        playIf: () => trigger,
      )
      .slideOut(const Offset(0, -300))
      .animateAfter(
        curve: Curves.elasticOut,
        duration: const Duration(milliseconds: 450),
        onEnd: () => setState(() => trigger = false),
      )
      .resetAll(),
);

滚动文本

Rolling Text 特效可以从一个文本滚动到另一个文本，每个字符单独滚动形成新的文本：

Text('Hello').roll(
  'World',
  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
  tapeStrategy: TapeStrategy.random,
  tapeCurve: Curves.easeInOutQuart,
  tapeSlideDirection: TapeSlideDirection.down,
  staggerTapes: true,
  staggerSoftness: 0.5,
  reverseStaggerDirection: true,
).animate(trigger: myTrigger);

滚动过渡

根据小部件在滚动视图中的位置动态调整其样式：

ListView.builder(
  itemBuilder: (context, index) {
    return Container(
      width: 350,
      height: 100,
      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: randomColor(index),
        borderRadius: BorderRadius.circular(16),
      ),
      child: Text(
        'Item $index',
        style: const TextStyle(fontSize: 24, color: Colors.white),
      ),
    ).scrollTransition(
      (context, widget, event) =>
      widget
          .blur(
            switch (event.phase) {
              ScrollPhase.identity => 0,
              ScrollPhase.topLeading => 10,
              ScrollPhase.bottomTrailing => 10,
            },
          )
          .scale(
            switch (event.phase) {
              ScrollPhase.identity => 1,
              ScrollPhase.topLeading => 0.9,
              ScrollPhase.bottomTrailing => 0.9,
            },
          ),
    );
  },
);

结论

Hyper Effects 提供了一种简洁且强大的方式来为Flutter应用程序添加丰富的动画效果。无论是简单的透明度变化还是复杂的滚动过渡，它都能帮助开发者快速实现高质量的用户界面交互。如果你希望进一步了解或参与开发，请访问 GitHub仓库 或加入我们的 Discord社区 获取支持。