颤振芯片头像半径增加 - Dart

简介

本文将介绍如何在使用 Dart 编写 Flutter 应用程序时，使用动画来实现一个颤振芯片头像半径增加的效果。这个效果是在用户点击头像时发生的，头像会从原来的大小逐渐扩大，形成一个颤振的效果，然后再恢复原来的大小。

步骤

步骤1：创建一个 Flutter 应用程序

首先，我们需要创建一个 Flutter 应用程序，可以在命令行中运行以下代码：

$ flutter create shake_chip

步骤2：添加一个颤振芯片头像

我们需要添加一个颤振芯片头像，并将其添加到主屏幕上。在 lib/main.dart 中，采用以下代码实现：

import 'package:flutter/material.dart';

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

在 MyApp 类中，添加一个 _AvatarWidget 类，并添加一个 onTap 方法，用于处理用户点击头像的事件。头像的大小可以使用 _avatarRadius 成员变量控制，初始时为 60：

class _AvatarWidget extends StatefulWidget {
  _AvatarWidget({Key? key}) : super(key: key);

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

class __AvatarWidgetState extends State<_AvatarWidget> {
  double _avatarRadius = 60;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _avatarRadius = 80;
        });
      },
      child: AnimatedContainer(
        duration: Duration(milliseconds: 500),
        curve: Curves.easeInOutBack,
        height: _avatarRadius,
        width: _avatarRadius,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          image: DecorationImage(
            image: AssetImage('assets/images/avatar.jpg'),
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shake Chip',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Shake Chip'),
        ),
        body: Center(
          child: _AvatarWidget(),
        ),
      ),
    );
  }
}

步骤3：添加动画效果

我们可以使用 AnimatedContainer 和 Curves 来实现一个颤振的效果。在 onTap 方法中，将 _avatarRadius 从 60 改变到 80，然后再恢复到 60。AnimatedContainer 会自动处理这个变化过程。Curves.easeInOutBack 提供一个颤振的效果。

class __AvatarWidgetState extends State<_AvatarWidget> {
  double _avatarRadius = 60;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _avatarRadius = 80;
        });
        Future.delayed(Duration(milliseconds: 100), () {
          setState(() {
            _avatarRadius = 60;
          });
        });
      },
      child: AnimatedContainer(
        duration: Duration(milliseconds: 500),
        curve: Curves.easeInOutBack,
        height: _avatarRadius,
        width: _avatarRadius,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          image: DecorationImage(
            image: AssetImage('assets/images/avatar.jpg'),
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

结语

在本文中，我们使用 Dart 和 Flutter 实现了一个颤振芯片头像半径增加的效果，希望能对大家有所帮助。完整代码可以在 GitHub 上找到。