— Coding —
Given their ease of implementation, Hero animations are a good place to begin for those new to Flutter:
Hero Animation & Collapsible AppBar
The hero animation in this example, written by Mo Hamdan, is integrated into the appearance of a popup dialog, which shows a larger view of an image upon being tapped.
Deep Dive Into Hero Widgets
Deven Joshi does a thorough treatment of Hero animations, including adding custom animations and changing the Hero widget.
Anthony Robledo of Google demonstrates several easy to digest examples of working with AnimatedWidget, AnimationController, Tween, and Curve.
Raouf Rahiche offers a thorough introduction to animating between widgets using AnimatedSwitcher. You can also find another good example in the Flutter docs.
Tensor walks through an introduction on using a Tween object to interpolate across a range of values. You'll also see how to decouple the animation objects from within a widget.
If you've wondered how easeOut differs from elasticInOut, differs from bounceIn, Nhan Cao shows common curves along with a simulation of each curve based on changes to time and value. Another good resource is the Flutter docs which animates examples for translation, rotation, scale and opacity.
Kartik Sharma demonstrates all sorts of interesting things in this example: position and size animations, show and hide widgets, as well as animating a visual splash of sparkles.
Google developer advocate Wm Leler shows how to use the Transform widget to implement 3D perspectives. A nice addition is a GestureDetector to enable rotating about the X and Y axis as you drag your finger around the screen.
With widespread use of the Transform widget, Deven Joshi shows how to create a unique and colorful animated navigation bar.
Romain Rastel offer an excellent introduction to staggered animations. Make sure you read this post as well that describes in more detail the animations used to create the sliding row.
Remember the retro clock with the flip numbers? Hung HD shows how to cut a panel (image) into two halves and rotate each around the X axis to mimic the old-school visual.
In this video, Pawan Kumar shows how to animate multiple "bricks" rotating around the Z axis, where upon completion of one brick rotating, another begins.
Another excellent post by Tensor, this time exploring ballistic pendulums and Flutter's simulation class, tying everything together using a LayoutBuilder widget.
Didier Boelens explains in great detail how to implement a Facebook-like Reaction button. Concepts include Overlay widgets, streams and integration of gestures to facilitate the various animations.