как я могу сделать значок уведомления колокольчика анимированным во флаттере

Question

Я хочу сделать анимацию на значке уведомления, чтобы он звучал, как эти анимации: https://icons8.com/animated-icons/bell или одна из них https://csshint.com/css-notification-bell-icon/

Как этого можно достичь с помощью флаттера?

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(),
            )
          ],
        ),
      ),
    );

Если вам нужны дополнительные пояснения о том, как это работает, дайте мне знать .