我怎样才能使铃声通知图标在颤动中动画化

Question

我想在通知铃图标上制作动画，使其像这些动画一样响起：https : //icons8.com/animated-icons/bell 或其中之一 https://csshint.com/css-notification-bell-图标/

如何使用颤振来实现这一点？

Answer 1

这会使颤动警报图标动起来，摇晃几次，您可以播放一些变量以获得您想要的效果。这就像您提供的第二个示例，对于第一个示例，您需要一个自定义图标，您可以在其中为图标的那部分设置动画。

 AnimationController _animationController;

  @override
  void initState() {
    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    super.initState();
  }

  void _runAnimation() async {
    for (int i = 0; i < 3; i++) {
      await _animationController.forward();
      await _animationController.reverse();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RotationTransition(
                turns: Tween(begin: 0.0, end: -.1)
                    .chain(CurveTween(curve: Curves.elasticIn))
                    .animate(_animationController),
                child: Icon(Icons.alarm)),
            RaisedButton(
              child: Text('Run Animation'),
              onPressed: () => _runAnimation(),
            )
          ],
        ),
      ),
    );

如果您需要进一步解释这是如何工作的，请告诉我。