Flutter动画装饰插件animated_box_decoration的使用

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

Flutter动画装饰插件animated_box_decoration的使用

animated_box_decoration 是一个用于在Flutter中平滑地在两个 BoxDecoration 之间进行动画的插件。它支持颜色、渐变和图像背景之间的动画。

特性

  • 支持在颜色和渐变之间进行动画。
  • 支持不同类型的渐变之间的动画。
  • 支持涉及图像的背景动画。

使用方法

如果你想要在初始和最终 Decoration 之间获取进度为 t 的中间 Decoration，可以使用以下代码：

const intermediate = SmoothDecorationTween(begin: begin, end: end).transform(t);

你也可以直接使用 SmoothAnimatedContainer 小部件，就像使用 AnimatedContainer 小部件一样。

示例代码

下面是一个完整的示例demo，展示了如何使用 animated_box_decoration 插件来实现各种背景动画。

main.dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool toggleStyle = true;

  Decoration _colorDeco1 = BoxDecoration(color: Colors.blue);
  Decoration _colorDeco2 = BoxDecoration(color: Colors.red);

  Decoration _linearGradientDeco1 = BoxDecoration(
    gradient: LinearGradient(colors: [
      Colors.black87,
      Color(0xFF04619f),
      Color(0xFF358f74),
      Color(0xFF923cb5),
      Colors.black87,
    ], stops: [
      0.1,
      0.3,
      0.45,
      0.8,
      0.98
    ]),
  );

  Decoration _linearGradientDeco2 = BoxDecoration(
    gradient: LinearGradient(colors: [
      Color(0xFFF6EA41),
      Color(0xFFEEBD89),
      Color(0xFFD13ABD),
      Color(0xFFAEBAF8),
    ]),
  );

  Decoration _sweepGradientDeco1 = BoxDecoration(
    gradient: SweepGradient(
      center: Alignment(0.13, 0.1),
      startAngle: 0.5,
      endAngle: 6.3,
      colors: [
        Color(0xFFF6EA41),
        Color(0xFFEEBD89),
        Color(0xFFD13ABD),
        Color(0xFFB60F46),
        Color(0xFFF6EA41),
      ],
      stops: [
        0.01,
        0.2,
        0.7,
        0.8,
        0.98
      ],
    ),
  );

  Decoration _sweepGradientDeco2 = BoxDecoration(
    gradient: SweepGradient(
      center: Alignment(0.03, -0.17),
      startAngle: 0.1,
      endAngle: 5.3,
      colors: [
        Colors.black87,
        Color(0xFF04619f),
        Color(0xFF358f74),
        Color(0xFF923cb5),
        Colors.black87,
      ],
      stops: [
        0.1,
        0.3,
        0.45,
        0.8,
        0.98
      ],
    ),
  );

  Decoration _imageDeco1 = BoxDecoration(
    image: DecorationImage(
      fit: BoxFit.fill,
      image: AssetImage("images/mojave_day_2.jpg"),
    ),
  );

  Decoration _imageDeco2 = BoxDecoration(
    image: DecorationImage(
      fit: BoxFit.fill,
      image: AssetImage("images/mojave_day_3.jpg"),
    ),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: DefaultTextStyle(
          style: TextStyle(fontSize: 20, height: 2),
          textAlign: TextAlign.center,
          child: ListView(
            children: <Widget>[
              Text("Left: AnimatedContainer, right: SmoothAnimatedContainer"),
              Text("Animate between two colors"),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  AnimatedContainer(
                    width: 200,
                    height: 200,
                    duration: Duration(seconds: 1),
                    decoration: toggleStyle ? _colorDeco1 : _colorDeco2,
                  ),
                  SmoothAnimatedContainer(
                    width: 200,
                    height: 200,
                    duration: Duration(seconds: 1),
                    decoration: toggleStyle ? _colorDeco1 : _colorDeco2,
                  ),
                ],
              ),
              Text("Animate between a color and a linear gradient"),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  AnimatedContainer(
                    width: 200,
                    height: 200,
                    duration: Duration(seconds: 1),
                    decoration: toggleStyle ? _colorDeco1 : _linearGradientDeco1,
                  ),
                  SmoothAnimatedContainer(
                    width: 200,
                    height: 200,
                    duration: Duration(seconds: 1),
                    decoration: toggleStyle ? _colorDeco1 : _linearGradientDeco1,
                  ),
                ],
              ),
              Text("Animate between two linear gradients"),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  AnimatedContainer(
                    width: 200,
                    height: 200,
                    duration: Duration(seconds: 1),
                    decoration: toggleStyle ? _linearGradientDeco1 : _linearGradientDeco2,
                  ),
                  SmoothAnimatedContainer(
                    width: 200,
                    height: 200,
                    duration: Duration(seconds: 1),
                    decoration: toggleStyle ? _linearGradientDeco1 : _linearGradientDeco2,
                  ),
                ],
              ),
              Text("Animate between a linear gradient and a sweep gradient"),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  AnimatedContainer(
                    width: 200,
                    height: 200,
                    duration: Duration(seconds: 1),
                    decoration: toggleStyle ? _linearGradientDeco1 : _sweepGradientDeco1,
                  ),
                  SmoothAnimatedContainer(
                    width: 200,
                    height: 200,
                    duration: Duration(seconds: 1),
                    decoration: toggleStyle ? _linearGradientDeco1 : _sweepGradientDeco1,
                  ),
                ],
              ),
              Text("Animate between a linear gradient and an image"),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  AnimatedContainer(
                    width: 200,
                    height: 200,
                    duration: Duration(seconds: 1),
                    decoration: toggleStyle ? _linearGradientDeco1 : _imageDeco1,
                  ),
                  SmoothAnimatedContainer(
                    width: 200,
                    height: 200,
                    duration: Duration(seconds: 1),
                    decoration: toggleStyle ? _linearGradientDeco1 : _imageDeco1,
                  ),
                ],
              ),
              Text("Animate between two images"),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  AnimatedContainer(
                    width: 400,
                    height: 400,
                    curve: Curves.easeInOut,
                    duration: Duration(seconds: 2),
                    decoration: toggleStyle ? _imageDeco1 : _imageDeco2,
                  ),
                  SmoothAnimatedContainer(
                    width: 400,
                    height: 400,
                    duration: Duration(seconds: 2),
                    curve: Curves.easeInOut,
                    decoration: toggleStyle ? _imageDeco1 : _imageDeco2,
                  ),
                ],
              ),
              SizedBox(height: 200),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            toggleStyle = !toggleStyle;
          });
        },
        child: const Icon(Icons.refresh),
      ),
    );
  }
}

注意事项

  • 确保你的项目中已经添加了 animated_box_decoration 依赖。
  • 如果需要使用图片，请确保将图片资源放在正确的路径下，并在 pubspec.yaml 文件中正确配置。

通过这个示例，你可以看到如何使用 animated_box_decoration 来实现各种背景动画效果。希望这对你有所帮助！


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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何使用Flutter的animated_box_decoration插件来进行动画装饰的示例代码。这个插件允许你为Container的装饰（如颜色、边框等）添加动画效果。

首先，确保你已经在pubspec.yaml文件中添加了animated_box_decoration依赖：

dependencies:
  flutter:
    sdk: flutter
  animated_box_decoration: ^x.y.z  # 替换为最新版本号

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

以下是一个简单的示例，展示了如何使用AnimatedBoxDecoration来为一个Container添加动画效果：

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

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

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

class AnimatedBoxDecorationDemo extends StatefulWidget {
  @override
  _AnimatedBoxDecorationDemoState createState() => _AnimatedBoxDecorationDemoState();
}

class _AnimatedBoxDecorationDemoState extends State<AnimatedBoxDecorationDemo> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Color> _colorAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);

    _colorAnimation = ColorTween(begin: Colors.red, end: Colors.blue).animate(_controller);
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBoxDecoration(
      decoration: BoxDecoration(
        color: _colorAnimation.value,
        borderRadius: BorderRadius.circular(20),
      ),
      curve: Curves.easeInOut,
      duration: const Duration(seconds: 2),
      child: Container(
        width: 200,
        height: 200,
        child: Center(
          child: Text(
            'Animated Box',
            style: TextStyle(color: Colors.white, fontSize: 24),
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个AnimatedBoxDecorationDemo组件，它包含了一个AnimatedBoxDecoration。AnimatedBoxDecoration接受一个BoxDecoration作为它的decoration属性，并且允许我们为这个装饰添加动画效果。

我们定义了一个AnimationController来控制动画的持续时间和循环行为，以及一个ColorTween来在红色和蓝色之间插值颜色。然后，我们将这个颜色动画赋值给BoxDecoration的color属性。

AnimatedBoxDecoration的curve属性定义了动画的插值曲线，而duration属性定义了动画的持续时间。

运行这个示例，你会看到一个在红色和蓝色之间平滑过渡的动画容器。

回到顶部