Flutter Widget组件库：AnimatedPhysicalModel

来自Flutter组件库

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

什么是 AnimatedPhysicalModel？

AnimatedPhysicalModel 是 PhysicalModel 小部件的动画版本。它继承了 PhysicalModel 的所有特性，但增加了对 borderRadius、elevation 、shadowColor和 color 的动画支持。这意味着当这些属性变化时，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'),
        ),
      ),
    );
  }
}

注意事项

AnimatedPhysicalModel涉及到阴影和形状的计算，可能会对性能产生一定影响。因此，避免在动画中使用过于复杂的图形和阴影。
使用const构造函数创建不会改变的小部件，以提高性能。

总结

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

Flutter中文网