Adding content to 112-animations

pull/3389/head
syedmouaazfarrukh 2 years ago
parent 3013779c43
commit 66cac21034
  1. 13
      src/roadmaps/flutter/content/112-animations/100-curved-animations.md
  2. 16
      src/roadmaps/flutter/content/112-animations/101-animation-controller.md
  3. 9
      src/roadmaps/flutter/content/112-animations/102-animated-builder.md
  4. 9
      src/roadmaps/flutter/content/112-animations/103-animated-widget.md
  5. 4
      src/roadmaps/flutter/content/112-animations/104-hero.md
  6. 3
      src/roadmaps/flutter/content/112-animations/105-opacity.md
  7. 1
      src/roadmaps/flutter/content/112-animations/index.md

@ -1 +1,12 @@
# Curved animations
# CurvedAnimations
Curved animations in Flutter can be achieved using the "CurvedAnimation" class. This class takes in a "Curve" object that defines the rate of change of the animation over time. The most commonly used curve is the "Curves.easeInOut" curve, which starts slow, speeds up in the middle, and then slows down again towards the end. To create a curved animation in Flutter, use the following steps:
1. Create a "AnimationController" object that controls the animation.
2. Create a "CurvedAnimation" object, passing in the "AnimationController" and a "Curve" object.
3. Use the "CurvedAnimation" object in the animation.
Learn more from the following links:
- [Curved­Animation](https://docs.flutter.dev/development/ui/animations/tutorial)
- [CurvedAnimation Class](https://api.flutter.dev/flutter/animation/CurvedAnimation-class.html)

@ -1 +1,15 @@
# Animation controller
# AnimationController
This class lets you perform tasks such as:
- Play an animation forward or in reverse, or stop an animation.
- Set the animation to a specific value.
- Define the upperBound and lowerBound values of an animation.
- Create a fling animation effect using a physics simulation.
By default, an AnimationController linearly produces values that range from 0.0 to 1.0, during a given duration.
Learn more from the following links:
- [AnimationController - Flutter](https://docs.flutter.dev/development/ui/animations/tutorial#animationcontroller)
- [AnimationController class](https://api.flutter.dev/flutter/animation/AnimationController-class.html)

@ -1 +1,8 @@
# Animated builder
# AnimatedBuilder
AnimatedBuilder is a widget in Flutter that allows you to build animations. It takes an `Animation` object and a builder function as input, and it returns a widget that is rebuilt whenever the animation changes. The builder function is called with the BuildContext and the animation object and it should return the widget that should be animated. This can be used to create complex animations with ease, without having to manage animation state or listen to animation events in the widget tree.
Learn more from the following links:
- [AnimatedBuilder Class](https://api.flutter.dev/flutter/widgets/AnimatedBuilder-class.html)
- [Refactoring with AnimatedBuilders](https://docs.flutter.dev/development/ui/animations/tutorial#refactoring-with-animatedbuilder)

@ -1 +1,8 @@
# Animated widget
# AnimatedWidget
AnimatedWidget is a Flutter widget that takes an `Animation` object as an argument and automatically updates whenever the animation changes. This can be useful when you want to create animations that are tightly coupled to a widget, for example, to animate the size or color of a widget. With `AnimatedWidget`, you can encapsulate the animation logic into a single widget and reuse it throughout your app. This makes it easier to manage and maintain your animations, as the animation code is centralized and decoupled from the widget tree.
Learn more from the following links:
- [Simplifying with Animated­Widget](https://docs.flutter.dev/development/ui/animations/tutorial#simplifying-with-animatedwidgets)
- [AnimatedWidget Class](https://api.flutter.dev/flutter/widgets/AnimatedWidget-class.html)

@ -1,7 +1,9 @@
# Hero
Flying an image from one screen to another is called a hero animation in Flutter, though the same motion is sometimes referred to as a shared element transition.
Hero is a widget in Flutter that allows you to create smooth animations between screens or within a single screen, for widgets that are used in multiple places. It animates the transition of a widget from one screen to another or from one position to another within a screen. The widget that is being animated should have a unique tag property so that Flutter can match the source and destination widgets. Hero widgets are used for visual continuity between screens, so when the user navigates from one screen to another, the hero widget smoothly transitions to its new position instead of abruptly appearing or disappearing. This can make the navigation between screens feel more seamless and enjoyable for the user.
Visit the following resources to learn more:
- [Hero animations](https://docs.flutter.dev/development/ui/animations/hero-animations)
- [HeroAnimation class](https://docs.flutter.dev/development/ui/animations/hero-animations#heroanimation-class)
- [Hero class](https://api.flutter.dev/flutter/widgets/Hero-class.html)

@ -1,7 +1,8 @@
# Opacity
The AnimatedOpacity widget makes it easy to perform opacity animations.
Opacity is a Flutter widget that allows you to control the transparency of its child widget. It takes a single opacity argument, which is a value between 0.0 and 1.0, where 0.0 represents complete transparency and 1.0 represents complete opacity. The child widget is drawn with the specified opacity, making it appear translucent or transparent, depending on the value of the opacity argument. This can be useful for creating visual effects such as fading in or out, or to create partially transparent backgrounds or overlays. By using Opacity in combination with other widgets and animations, you can create sophisticated visual effects in your Flutter app.
Visit the following resources to learn more:
- [Fade a widget in and out](https://docs.flutter.dev/cookbook/animation/opacity-animation)
- [AnimatedOpacity widget](https://docs.flutter.dev/codelabs/implicit-animations#animate-opacity-with-animatedopacity-widgets)

@ -5,3 +5,4 @@ Flutter’s animation support makes it easy to implement a variety of animation
Visit the following resources to learn more:
- [Introduction to animations](https://docs.flutter.dev/development/ui/animations)
- [Animation library](https://api.flutter.dev/flutter/animation/animation-library.html)
Loading…
Cancel
Save