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

如果您需要进一步了解其工作原理，请告诉我。

Answer 2

您可以使用以下animation_widget flutter软件包：animated_widget flutter package

摇动：

ShakeAnimatedWidget(
  enabled: this._enabled,
  duration: Duration(milliseconds: 1500),
  shakeAngle: Rotation.deg(z: 40),
  curve: Curves.linear,
  child: FlutterLogo(
    style: FlutterLogoStyle.stacked,
  ),
),

我怎样才能使铃声通知图标变得扑朔迷离

2 个答案: