Previous posts:

Animated Series 1

Animated Series 2

Other animation

  1. Hero animation

Hero animations are animations that switch between pages

Push from page A to page B

@override Widget build(BuildContext context) {return Scaffold(appBar: appBar (title: Text(' other animation ')), body: Container( padding: EdgeInsets.all(10), child: Hero( tag: 'heroTag', child: FlutterLogo() ), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: (){ Navigator.of(context).push(CupertinoPageRoute(builder:(_){ return HeroPage(); })); },),); }Copy the code

B Page code:

@override Widget build(BuildContext context) {return Scaffold(appBar: appBar (title: Text('Hero '),), body: Center( child: Hero(tag: 'heroTag', child: FlutterLogo(size: 100)), ), ); }Copy the code

As you can see, the page switch animation is relatively easy to implement in Flutter, just using a Hero control. Note that the Hero control tag must be the same in both pages. In this case, THE child wrapped in Hero is the same in both pages. In fact, it is possible to change the control into a different one, but the effect may not be very good.

2. Other custom animations

There are also some animations that need to be combined with the pictures given by the artist to make beautiful animations. For example, the animation of JINGdong drop-down refresh at the beginning of the first article can be used Flare/Rive. There are also many online articles for your reference

3. Finally, I made a small animation

AnimatedBuilder with Canvas is used

AnimationController _controller; List <Snow> snowList = List.generate(100, (index) => Snow()); @override void initState() { super.initState(); _controller = AnimationController( duration: Duration(seconds: 1), vsync: this ).. repeat(); } @override void dispose() { super.dispose(); _controller.dispose(); } @override Widget build(BuildContext context) {return Scaffold(appBar: appBar (title: Text(' other animation ')), body: Container( width: double.infinity, height: double.infinity, color: Colors.blue, child: AnimatedBuilder( animation: _controller, builder: (_,__){ return CustomPaint( painter: MyPainter(snowList: snowList), ); },),),); }Copy the code
class MyPainter extends CustomPainter { final List <Snow> snowList; MyPainter({this.snowList}) : super (); @override void paint(Canvas canvas, Size size) { Paint paint = Paint().. color = Colors.white; canvas.drawCircle(size.center(Offset(0, 150)), 50, paint); canvas.drawOval(Rect.fromCenter(center: size.center(Offset(0, 300)), width: 200, height: 250), paint); snowList.forEach((snow) { snow.fail(); canvas.drawCircle(Offset(snow.x, snow.y), snow.circle, paint); }); } @override bool shouldRepaint(CustomPainter oldDelegate) => true; } class Snow {double x = Random().nextDouble() * 400; Y = Random().nextDouble() * 850; Double circle = Random().nextDouble() * 2 + 2; V = Random().nextDouble() * 4 + 2; // fail () {y = y + v; if (y > 850){ y = -50; x = Random().nextDouble() * 400; circle = Random().nextDouble() * 2 + 2; v = Random().nextDouble() * 4 + 2; }}}Copy the code