Flutter动画值管理插件animated_value的使用

Flutter 动画值管理插件 animated_value 的使用

animated_value 插件为 Flutter 提供了一种简单且灵活的方式来动画化值。它使用自定义的 lerp（线性插值）函数或自定义构建器函数来创建平滑的动画效果。所有的动画都是隐式的，就像在 AnimatedContainer 中更改值一样简单。

使用示例

下面是一个基本的例子，展示了如何使用 AnimatedValue 小部件来动画化 ButtonStyle：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Animated Value Example')),
        body: Center(child: AnimatedButtonExample()),
      ),
    );
  }
}

class AnimatedButtonExample extends StatefulWidget {
  [@override](/user/override)
  _AnimatedButtonExampleState createState() => _AnimatedButtonExampleState();
}

class _AnimatedButtonExampleState extends State<AnimatedButtonExample> {
  bool _isPressed = false;

  final ButtonStyle buttonStyle1 = ElevatedButton.styleFrom(
    primary: Colors.blue,
    onPrimary: Colors.white,
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
    textStyle: TextStyle(fontSize: 16),
  );

  final ButtonStyle buttonStyle2 = ElevatedButton.styleFrom(
    primary: Colors.red,
    onPrimary: Colors.black,
    padding: EdgeInsets.symmetric(horizontal: 30, vertical: 20),
    textStyle: TextStyle(fontSize: 20),
  );

  void _toggleButtonStyle() {
    setState(() {
      _isPressed = !_isPressed;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        AnimatedValue<ButtonStyle?>(
          // 要动画化的值
          value: _isPressed ? buttonStyle2 : buttonStyle1,

          // 可选的 `lerp()` 函数用于复杂对象
          lerp: ButtonStyle.lerp,

          // 在动画过程中重建小部件
          builder: (context, value, _) {
            return ElevatedButton(
              style: value,
              onPressed: _toggleButtonStyle,
              child: Text('点击我'),
            );
          },
        ),
      ],
    );
  }
}

自定义插值

animated_value 插件提供了 LerpTween 类和 LerpCallback 类型，用于在两个值之间进行自定义插值。以下是一个简要的解释和使用示例：

final tween = LerpTween(
  begin: ...,
  end: ...,
  lerp: AppBarTheme.lerp,
);

扩展方法

animated_value 插件还为 LerpCallback 类提供了扩展方法，使得创建 LerpTween 对象更加容易。以下是一个使用这些扩展方法的示例：

final tween = AppBarTheme.lerp.tween(begin: ..., end: ...);

完整示例 Demo

为了更好地理解 animated_value 插件的使用，以下是一个完整的示例应用，展示了如何使用 AnimatedValue 来动画化按钮样式和 AppBarTheme。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animated Value Example'),
        ),
        body: Center(child: AnimatedButtonAndAppBarExample()),
      ),
    );
  }
}

class AnimatedButtonAndAppBarExample extends StatefulWidget {
  [@override](/user/override)
  _AnimatedButtonAndAppBarExampleState createState() => _AnimatedButtonAndAppBarExampleState();
}

class _AnimatedButtonAndAppBarExampleState extends State<AnimatedButtonAndAppBarExample> {
  bool _isPressed = false;

  final ButtonStyle buttonStyle1 = ElevatedButton.styleFrom(
    primary: Colors.blue,
    onPrimary: Colors.white,
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
    textStyle: TextStyle(fontSize: 16),
  );

  final ButtonStyle buttonStyle2 = ElevatedButton.styleFrom(
    primary: Colors.red,
    onPrimary: Colors.black,
    padding: EdgeInsets.symmetric(horizontal: 30, vertical: 20),
    textStyle: TextStyle(fontSize: 20),
  );

  final AppBarTheme appBarTheme1 = AppBarTheme(
    color: Colors.blue,
    elevation: 4,
  );

  final AppBarTheme appBarTheme2 = AppBarTheme(
    color: Colors.red,
    elevation: 8,
  );

  void _toggleStyles() {
    setState(() {
      _isPressed = !_isPressed;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 动画化按钮样式
        AnimatedValue<ButtonStyle?>(
          value: _isPressed ? buttonStyle2 : buttonStyle1,
          lerp: ButtonStyle.lerp,
          builder: (context, value, _) {
            return ElevatedButton(
              style: value,
              onPressed: _toggleStyles,
              child: Text('点击我'),
            );
          },
        ),
        SizedBox(height: 20),
        // 动画化 AppBarTheme
        AnimatedValue<AppBarTheme>(
          value: _isPressed ? appBarTheme2 : appBarTheme1,
          lerp: AppBarTheme.lerp,
          builder: (context, value, _) {
            return AppBar(
              backgroundColor: value.color,
              elevation: value.elevation,
              title: Text('动态 AppBar'),
            );
          },
        ),
      ],
    );
  }
}