Flutter动画效果插件flutter_flash

Flutter动画效果插件flutter_flash_curve的使用

flutter_flash_curve 是一个用于创建闪动曲线动画的 Flutter 包。

动画效果展示

闪动透明度闪动缩放闪动平移闪动旋转

使用方法

在文件中导入包：

import 'package:flutter_flash_curve/flutter_flash_curve.dart';

使用 FlashCurve、InFlashCurve 或 OutFlashCurve 曲线类：

// 初始化动画控制器
final _controller = AnimationController(
  vsync: this,
  duration: const Duration(milliseconds: 500),
);

// 创建闪动曲线
final curve = FlashCurve(flashes: 8);
// 或者
// final curve = InFlashCurve(flashes: 8);
// 或者
// final curve = OutFlashCurve(flashes: 8);

// 创建透明度渐变动画
final opacityTween = Tween(begin: 1.0, end: 0.2).animate(CurvedAnimation(
  parent: _controller,
  reverseCurve: curve.flipped,
  curve: curve,
));

// 使用AnimatedBuilder构建动画组件
AnimatedBuilder(
  animation: _controller,
  builder: (_, child) {
    return Opacity(
      opacity: opacityTween.value,
      child: child,
    );
  },
  child: const FlutterLogo(size: 100),
),

属性说明

属性	数据类型	描述	默认值
flashes	int	闪动周期数	8

闪动曲线类型枚举

闪动 -> FlashCurveType.flash
进入闪动 -> FlashCurveType.inFlash
离开闪动 -> FlashCurveType.outFlash

扩展

扩展	描述	结果
FlashCurveType->curve	返回闪动曲线类型的曲线	Curve

作者

Anıl Sorgit - GitHub

完整示例代码

import 'dart:math' as math;
import 'dart:ui';

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

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

enum _AnimationType {
  opacity,
  scale,
  translate,
  rotate,
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  _AnimationType _animationType = _AnimationType.opacity;
  FlashCurveType _curveType = FlashCurveType.inFlash;
  late final AnimationController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
      value: 0,
    );
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _onChangedAnimationType(_AnimationType value) {
    setState(() {
      _animationType = value;
      _controller.reset();
    });
  }

  void _playAnim({required FlashCurveType curveType}) {
    if (_controller.isAnimating) return;
    setState(() {
      _curveType = curveType;
      _controller.isCompleted ? _controller.reverse(from: 1) : _controller.forward(from: 0);
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flash Curve'),
        ),
        body: Center(
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const SizedBox(width: double.infinity), // 全宽以适应其他控件
                const SizedBox(height: 20),
                _flashAnimBuilder,
                const SizedBox(height: 20),
                _animationTypeDropdown,
                _flashButton,
                _inFlashButton,
                _outFlashButton,
                const SizedBox(height: 20),
              ],
            ),
          ),
        ),
      ),
    );
  }

  AnimatedBuilder get _flashAnimBuilder {
    return AnimatedBuilder(
      animation: _controller,
      builder: (_, child) {
        final tween = _animationType == _AnimationType.opacity
            ? Tween(begin: 1.0, end: 0.2)
            : _animationType == _AnimationType.scale
                ? Tween(begin: 1.0, end: 0.2)
                : _animationType == _AnimationType.translate
                    ? Tween(begin: 0.0, end: 1.0)
                    : _animationType == _AnimationType.rotate
                        ? Tween(begin: 0.0, end: 1.0)
                        : Tween(begin: 0.0, end: 1.0);

        final anim = tween.animate(CurvedAnimation(
          parent: _controller,
          reverseCurve: _curveType.curve.flipped,
          curve: _curveType.curve,
        ));

        return _animationType == _AnimationType.opacity
            ? _opacityAnimWidget(value: anim.value, child: child)
            : _animationType == _AnimationType.scale
                ? _scaleAnimWidget(value: anim.value, child: child)
                : _animationType == _AnimationType.translate
                    ? _translateAnimWidget(value: anim.value, child: child)
                    : _animationType == _AnimationType.rotate
                        ? _rotateAnimWidget(value: anim.value, child: child)
                        : _errorAnimWidget;
      },
      child: const FlutterLogo(size: 100),
    );
  }

  Text get _errorAnimWidget {
    return const Text(
      'Error!',
      style: TextStyle(
        fontSize: 20,
        fontWeight: FontWeight.bold,
        color: Colors.red,
      ),
    );
  }

  Widget _opacityAnimWidget({double value = 1, Widget? child}) {
    return Opacity(
      opacity: value,
      child: child,
    );
  }

  Widget _scaleAnimWidget({double value = 1, Widget? child}) {
    return Transform.scale(
      scale: value,
      child: child,
    );
  }

  Widget _translateAnimWidget({double value = 0, Widget? child}) {
    return Transform.translate(
      offset: Offset(lerpDouble(-100, 100, value) ?? -100, 0),
      child: child,
    );
  }

  Widget _rotateAnimWidget({double value = 0, Widget? child}) {
    return Transform.rotate(
      angle: value * 2 * math.pi,
      child: child,
    );
  }

  DropdownButton<_AnimationType> get _animationTypeDropdown {
    return DropdownButton<_AnimationType>(
      value: _animationType,
      onChanged: (value) => _onChangedAnimationType(value!),
      items: const [
        DropdownMenuItem(
          value: _AnimationType.opacity,
          child: Text('Opacity'),
        ),
        DropdownMenuItem(
          value: _AnimationType.scale,
          child: Text('Scale'),
        ),
        DropdownMenuItem(
          value: _AnimationType.translate,
          child: Text('Translate'),
        ),
        DropdownMenuItem(
          value: _AnimationType.rotate,
          child: Text('Rotate'),
        ),
      ],
    );
  }

  ElevatedButton get _flashButton {
    return ElevatedButton(
      onPressed: () => _playAnim(
        curveType: FlashCurveType.flash,
      ),
      child: const Text('Flash'),
    );
  }

  ElevatedButton get _inFlashButton {
    return ElevatedButton(
      onPressed: () => _playAnim(
        curveType: FlashCurveType.inFlash,
      ),
      child: const Text('InFlash'),
    );
  }

  ElevatedButton get _outFlashButton {
    return ElevatedButton(
      onPressed: () => _playAnim(
        curveType: FlashCurveType.outFlash,
      ),
      child: const Text('OutFlash'),
    );
  }
}

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

sinazl 1楼

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

flutter_flash_curve 是一个用于在 Flutter 应用中实现动画效果的插件。它提供了一些预定义的曲线动画，使开发者能够轻松地创建流畅的动画效果。以下是如何使用 flutter_flash_curve 插件的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_flash_curve: ^1.0.0  # 请使用最新版本

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

2. 导入插件

在你的 Dart 文件中导入 flutter_flash_curve 插件：

import 'package:flutter_flash_curve/flutter_flash_curve.dart';

3. 使用动画曲线

flutter_flash_curve 提供了一些预定义的动画曲线，你可以直接在 AnimationController 中使用这些曲线。

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

class MyAnimatedWidget extends StatefulWidget {
  @override
  _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );

    // 使用 flutter_flash_curve 提供的动画曲线
    _animation = CurvedAnimation(
      parent: _controller,
      curve: FlashCurves.flashCurve,
    );

    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Opacity(
          opacity: _animation.value,
          child: Container(
            width: 100.0 * _animation.value,
            height: 100.0 * _animation.value,
            color: Colors.blue,
          ),
        );
      },
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Flash Curve Example')),
      body: Center(
        child: MyAnimatedWidget(),
      ),
    ),
  ));
}

4. 解释代码

AnimationController 用于控制动画的播放。
CurvedAnimation 使用 FlashCurves.flashCurve 来定义动画的曲线。
AnimatedBuilder 用于根据动画的值构建 UI。

5. 运行效果

运行上述代码后，你将看到一个蓝色方块，它会在 2 秒内逐渐变大并逐渐消失，使用了 flutter_flash_curve 提供的动画曲线。

6. 其他曲线

flutter_flash_curve 可能还提供了其他预定义的动画曲线，你可以根据需要选择合适的曲线。例如：

_animation = CurvedAnimation(
  parent: _controller,
  curve: FlashCurves.anotherCurve,  // 使用其他预定义的曲线
);