徽章颤动 - Dart

介绍

徽章颤动（Badge Animation）是一种常用于增强UI效果的动画效果。它常常用于标记未读消息、提醒用户进行某些操作等场景。本文将介绍如何在 Dart 中实现徽章颤动效果。

实现过程

实现徽章颤动效果的关键在于使用动画控制器（AnimationController）和动画生成器（Tween）。我们将动画控制器的值作为动画生成器的输入，生成不同的动画值，从而实现徽章的颤动效果。

为了方便展示，我们在 Flutter 中实现徽章颤动效果。具体实现过程如下：

1. 引入必要的依赖库

import 'package:flutter/material.dart';
import 'dart:math' as math;

2. 定义动画控制器、动画生成器和动画

AnimationController _controller;
Animation<double> _animation;

@override
void initState(){
  super.initState();
  _controller = AnimationController(
    vsync: this, // vsync 为当前页面，防止页面销毁时动画仍在运行，造成资源浪费
    duration: Duration(milliseconds: 500),
  )..addListener(() { // 注册动画监听器
    setState(() {}); // setState 触发重绘
  });

  _animation = Tween<double>(
    begin: 0.0,
    end: math.pi*2, // 让动画执行一个整圈
  ).animate(_controller);

  _controller.repeat(); // 执行动画
}

@override
void dispose() { // 页面销毁时停止动画
  _controller.dispose();
  super.dispose();
}

3. 在页面中使用徽章，并调用动画

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Container(
              width: 50,
              height: 50,
              decoration: BoxDecoration(
                color: Colors.red,
                shape: BoxShape.circle,
              ),
            ),
            Positioned(
              top: 0, right: 0,
              child: Container(
                width: 20,
                height: 20,
                decoration: BoxDecoration(
                  color: Colors.white,
                  shape: BoxShape.circle,
                ),
                child: Center(
                  child: Text(
                    "3",
                    style: TextStyle(
                      color: Colors.red,
                    ),
                  ),
                ),
              ),
            ),
            Transform.rotate(
              angle: _animation.value,
              child: Icon(
                Icons.brightness_1,
                color: Colors.white,
                size: 10,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

效果展示

参考资料

1. Flutter 中文网，动画基础 - 徽章颤动动画
2. Flutter 官方网站，Animations tutorial