来自Flutter组件库

在 Flutter 中,AnimatedPhysicalModel 是一个非常有趣且功能强大的小部件,它允许你创建具有物理效果的动画形状变换。它特别适合那些需要展示平滑过渡和动态交互的场景,比如按钮按下效果、卡片翻转或任何需要物理反馈的元素。让我们一起深入了解 AnimatedPhysicalModel 并通过一些示例来学习如何使用它。

什么是 AnimatedPhysicalModel?

AnimatedPhysicalModelPhysicalModel 小部件的动画版本。它继承了 PhysicalModel 的所有特性,但增加了对 borderRadiuselevationshadowColorcolor 的动画支持。这意味着当这些属性变化时,AnimatedPhysicalModel 会自动创建一个平滑的过渡效果,使得 UI 元素看起来像是在真实世界中受到物理定律的影响一样。

AnimatedPhysicalModel 的基本属性

AnimatedPhysicalModel 提供了一系列可配置的属性,包括但不限于:

  • child: 被包装的子小部件。

  • color: 背景颜色。

  • shadowColor: 阴影颜色。

  • animateColor: 是否动画化颜色。

  • borderRadius:圆角

  • elevation: 阴影深度。

  • duration:动画持续时长

  • clipBehavior: 如何裁剪溢出的内容。

  • onTap: 可选的回调函数,当小部件被点击时触发。

示例代码

下面是一个使用 AnimatedPhysicalModel 创建一个响应式按钮的示例。在这个例子中,当按钮被点击时,它的颜色、阴影和圆角都会产生动画效果。

import 'dart:ui';

import 'package:flutter/material.dart';

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

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

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

  @override
  _AnimatedPhysicalModelExampleState createState() =>
      _AnimatedPhysicalModelExampleState();
}

class _AnimatedPhysicalModelExampleState
    extends State<AnimatedPhysicalModelExample>
    with SingleTickerProviderStateMixin {
  double _elevation = 1;
  Color _color = Colors.blue;
  Color _shadowColor = Colors.white;
  BorderRadius _borderRadius = BorderRadius.circular(0);

  void _onTapDown() {
    setState(() {
      _elevation = 8;
      _color = Colors.pink;
      _shadowColor = Colors.grey;
      _borderRadius = BorderRadius.circular(16);
    });
  }

  void _onTapCancel(){
    setState(() {
      _elevation = 1;
      _color = Colors.blue;
      _shadowColor = Colors.white;
      _borderRadius = BorderRadius.circular(0);
    });
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedPhysicalModel(
      color: _color,
      shadowColor: _shadowColor,
      elevation: _elevation,
      borderRadius: _borderRadius,
      animateColor: true,
      clipBehavior: Clip.antiAlias,
      shape: BoxShape.rectangle,
      duration: const Duration(milliseconds: 500),
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTapDown: (_)=>_onTapDown(),
        onTapUp: (_)=>_onTapCancel(),
        onTapCancel: _onTapCancel,
        child: Container(
          width: 200,
          height: 100,
          alignment: Alignment.center,
          child: const Text('Click Me'),
        ),
      ),
    );
  }
}

1720667118988.gif

注意事项

  • AnimatedPhysicalModel涉及到阴影和形状的计算,可能会对性能产生一定影响。因此,避免在动画中使用过于复杂的图形和阴影。

  • 使用const构造函数创建不会改变的小部件,以提高性能。

总结

AnimatedPhysicalModel 是 Flutter 提供的一个强大工具,用于创建带有物理效果的动画。通过控制其属性的变化,你可以轻松地为应用程序添加生动的交互体验。希望本文能够帮助你理解和掌握如何使用 AnimatedPhysicalModel,并在你的项目中实现更丰富的动画效果。