I want to make an animation on a notification bell icon to make it rings like these animations: https://icons8.com/animated-icons/bell or one of these https://csshint.com/css-notification-bell-icon/
how this can be achieved with flutter?
I want to make an animation on a notification bell icon to make it rings like these animations: https://icons8.com/animated-icons/bell or one of these https://csshint.com/css-notification-bell-icon/
how this can be achieved with flutter?
This animates the flutter alarm icon to shake a couple times you can play some of the variable to get the effect how you want it. This is like the second example you provided as for the first you would need a custom icon where you could animate just that part of the icon.
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(),
)
],
),
),
);
If you need further explanation on how this works let me know.
You can use this animated_widget flutter package: animated_widget flutter package
For Shake:
ShakeAnimatedWidget(
enabled: this._enabled,
duration: Duration(milliseconds: 1500),
shakeAngle: Rotation.deg(z: 40),
curve: Curves.linear,
child: FlutterLogo(
style: FlutterLogoStyle.stacked,
),
),