Skip to content

F
Front-End
Unverified Commit ab9f17cb authored by Greg Spencer's avatar Greg Spencer Committed by GitHub
Browse files
Options

Adding curve animations to documentation. (#19681) 

Enables animated curve diagrams in the documentation, replacing the static images.
parent 35b55d51
Hide whitespace changes
Inline Side-by-side
Showing with 40 additions and 40 deletions
packages/flutter/lib/src/animation/curves.dart
View file @ ab9f17cb
...@@ -28,8 +28,8 @@ abstract class Curve { ...@@ -28,8 +28,8 @@ abstract class Curve {
/// Returns a new curve that is the reversed inversion of this one. /// Returns a new curve that is the reversed inversion of this one.
/// This is often useful as the reverseCurve of an [Animation]. /// This is often useful as the reverseCurve of an [Animation].
/// ///
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_in.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_in.mp4}
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_flipped.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_flipped.mp4}
/// ///
/// See also: /// See also:
/// ///
...@@ -57,7 +57,7 @@ class _Linear extends Curve { ...@@ -57,7 +57,7 @@ class _Linear extends Curve {
/// The curve rises linearly from 0.0 to 1.0 and then falls discontinuously back /// The curve rises linearly from 0.0 to 1.0 and then falls discontinuously back
/// to 0.0 each iteration. /// to 0.0 each iteration.
/// ///
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_sawtooth.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_sawtooth.mp4}
class SawTooth extends Curve { class SawTooth extends Curve {
/// Creates a sawtooth curve. /// Creates a sawtooth curve.
/// ///
...@@ -90,7 +90,7 @@ class SawTooth extends Curve { ...@@ -90,7 +90,7 @@ class SawTooth extends Curve {
/// set to 1.0 will essentially become a three-second animation that starts /// set to 1.0 will essentially become a three-second animation that starts
/// three seconds later. /// three seconds later.
/// ///
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_interval.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_interval.mp4}
class Interval extends Curve { class Interval extends Curve {
/// Creates an interval curve. /// Creates an interval curve.
/// ///
...@@ -139,7 +139,7 @@ class Interval extends Curve { ...@@ -139,7 +139,7 @@ class Interval extends Curve {
/// A curve that is 0.0 until it hits the threshold, then it jumps to 1.0. /// A curve that is 0.0 until it hits the threshold, then it jumps to 1.0.
/// ///
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_threshold.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_threshold.mp4}
class Threshold extends Curve { class Threshold extends Curve {
/// Creates a threshold curve. /// Creates a threshold curve.
/// ///
...@@ -171,10 +171,10 @@ class Threshold extends Curve { ...@@ -171,10 +171,10 @@ class Threshold extends Curve {
/// * [Curves.easeOut] /// * [Curves.easeOut]
/// * [Curves.easeInOut] /// * [Curves.easeInOut]
/// ///
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease.mp4}
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in.mp4}
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_out.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_out.mp4}
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out.mp4}
/// ///
/// The [Cubic] class implements third-order Bézier curves. /// The [Cubic] class implements third-order Bézier curves.
class Cubic extends Curve { class Cubic extends Curve {
...@@ -253,8 +253,8 @@ class Cubic extends Curve { ...@@ -253,8 +253,8 @@ class Cubic extends Curve {
/// ///
/// This is the class used to implement the [flipped] getter on curves. /// This is the class used to implement the [flipped] getter on curves.
/// ///
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_in.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_in.mp4}
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_flipped_curve.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_flipped_curve.mp4}
class FlippedCurve extends Curve { class FlippedCurve extends Curve {
/// Creates a flipped curve. /// Creates a flipped curve.
/// ///
...@@ -361,7 +361,7 @@ class _BounceInOutCurve extends Curve { ...@@ -361,7 +361,7 @@ class _BounceInOutCurve extends Curve {
/// An instance of this class using the default period of 0.4 is available as /// An instance of this class using the default period of 0.4 is available as
/// [Curves.elasticIn]. /// [Curves.elasticIn].
/// ///
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_in.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_in.mp4}
class ElasticInCurve extends Curve { class ElasticInCurve extends Curve {
/// Creates an elastic-in curve. /// Creates an elastic-in curve.
/// ///
...@@ -390,7 +390,7 @@ class ElasticInCurve extends Curve { ...@@ -390,7 +390,7 @@ class ElasticInCurve extends Curve {
/// An instance of this class using the default period of 0.4 is available as /// An instance of this class using the default period of 0.4 is available as
/// [Curves.elasticOut]. /// [Curves.elasticOut].
/// ///
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_out.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_out.mp4}
class ElasticOutCurve extends Curve { class ElasticOutCurve extends Curve {
/// Creates an elastic-out curve. /// Creates an elastic-out curve.
/// ///
...@@ -419,7 +419,7 @@ class ElasticOutCurve extends Curve { ...@@ -419,7 +419,7 @@ class ElasticOutCurve extends Curve {
/// An instance of this class using the default period of 0.4 is available as /// An instance of this class using the default period of 0.4 is available as
/// [Curves.elasticInOut]. /// [Curves.elasticInOut].
/// ///
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_in_out.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_in_out.mp4}
class ElasticInOutCurve extends Curve { class ElasticInOutCurve extends Curve {
/// Creates an elastic-in-out curve. /// Creates an elastic-in-out curve.
/// ///
...@@ -451,19 +451,19 @@ class ElasticInOutCurve extends Curve { ...@@ -451,19 +451,19 @@ class ElasticInOutCurve extends Curve {
/// A collection of common animation curves. /// A collection of common animation curves.
/// ///
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_in.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_in.mp4}
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_in_out.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_in_out.mp4}
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_out.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_out.mp4}
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_decelerate.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_decelerate.mp4}
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease.mp4}
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in.mp4}
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out.mp4}
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_out.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_out.mp4}
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_in.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_in.mp4}
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_in_out.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_in_out.mp4}
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_out.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_out.mp4}
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_fast_out_slow_in.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_fast_out_slow_in.mp4}
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_linear.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_linear.mp4}
/// ///
/// See also: /// See also:
/// ///
...@@ -478,7 +478,7 @@ class Curves { ...@@ -478,7 +478,7 @@ class Curves {
/// method returns its input unmodified. This is useful as a default curve for /// method returns its input unmodified. This is useful as a default curve for
/// cases where a [Curve] is required but no actual curve is desired. /// cases where a [Curve] is required but no actual curve is desired.
/// ///
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_linear.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_linear.mp4}
static const Curve linear = const _Linear._(); static const Curve linear = const _Linear._();
/// A curve where the rate of change starts out quickly and then decelerates; an /// A curve where the rate of change starts out quickly and then decelerates; an
...@@ -487,27 +487,27 @@ class Curves { ...@@ -487,27 +487,27 @@ class Curves {
/// This is equivalent to the Android `DecelerateInterpolator` class with a unit /// This is equivalent to the Android `DecelerateInterpolator` class with a unit
/// factor (the default factor). /// factor (the default factor).
/// ///
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_decelerate.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_decelerate.mp4}
static const Curve decelerate = const _DecelerateCurve._(); static const Curve decelerate = const _DecelerateCurve._();
/// A cubic animation curve that speeds up quickly and ends slowly. /// A cubic animation curve that speeds up quickly and ends slowly.
/// ///
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease.mp4}
static const Cubic ease = const Cubic(0.25, 0.1, 0.25, 1.0); static const Cubic ease = const Cubic(0.25, 0.1, 0.25, 1.0);
/// A cubic animation curve that starts slowly and ends quickly. /// A cubic animation curve that starts slowly and ends quickly.
/// ///
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in.mp4}
static const Cubic easeIn = const Cubic(0.42, 0.0, 1.0, 1.0); static const Cubic easeIn = const Cubic(0.42, 0.0, 1.0, 1.0);
/// A cubic animation curve that starts quickly and ends slowly. /// A cubic animation curve that starts quickly and ends slowly.
/// ///
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_out.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_out.mp4}
static const Cubic easeOut = const Cubic(0.0, 0.0, 0.58, 1.0); static const Cubic easeOut = const Cubic(0.0, 0.0, 0.58, 1.0);
/// A cubic animation curve that starts slowly, speeds up, and then and ends slowly. /// A cubic animation curve that starts slowly, speeds up, and then and ends slowly.
/// ///
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out.mp4}
static const Cubic easeInOut = const Cubic(0.42, 0.0, 0.58, 1.0); static const Cubic easeInOut = const Cubic(0.42, 0.0, 0.58, 1.0);
/// A curve that starts quickly and eases into its final position. /// A curve that starts quickly and eases into its final position.
...@@ -516,36 +516,36 @@ class Curves { ...@@ -516,36 +516,36 @@ class Curves {
/// final destination. As a result, the user isn’t left waiting for the /// final destination. As a result, the user isn’t left waiting for the
/// animation to finish, and the negative effects of motion are minimized. /// animation to finish, and the negative effects of motion are minimized.
/// ///
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_fast_out_slow_in.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_fast_out_slow_in.mp4}
static const Cubic fastOutSlowIn = const Cubic(0.4, 0.0, 0.2, 1.0); static const Cubic fastOutSlowIn = const Cubic(0.4, 0.0, 0.2, 1.0);
/// An oscillating curve that grows in magnitude. /// An oscillating curve that grows in magnitude.
/// ///
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_in.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_in.mp4}
static const Curve bounceIn = const _BounceInCurve._(); static const Curve bounceIn = const _BounceInCurve._();
/// An oscillating curve that first grows and then shrink in magnitude. /// An oscillating curve that first grows and then shrink in magnitude.
/// ///
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_out.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_out.mp4}
static const Curve bounceOut = const _BounceOutCurve._(); static const Curve bounceOut = const _BounceOutCurve._();
/// An oscillating curve that first grows and then shrink in magnitude. /// An oscillating curve that first grows and then shrink in magnitude.
/// ///
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_in_out.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_in_out.mp4}
static const Curve bounceInOut = const _BounceInOutCurve._(); static const Curve bounceInOut = const _BounceInOutCurve._();
/// An oscillating curve that grows in magnitude while overshooting its bounds. /// An oscillating curve that grows in magnitude while overshooting its bounds.
/// ///
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_in.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_in.mp4}
static const ElasticInCurve elasticIn = const ElasticInCurve(); static const ElasticInCurve elasticIn = const ElasticInCurve();
/// An oscillating curve that shrinks in magnitude while overshooting its bounds. /// An oscillating curve that shrinks in magnitude while overshooting its bounds.
/// ///
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_out.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_out.mp4}
static const ElasticOutCurve elasticOut = const ElasticOutCurve(); static const ElasticOutCurve elasticOut = const ElasticOutCurve();
/// An oscillating curve that grows and then shrinks in magnitude while overshooting its bounds. /// An oscillating curve that grows and then shrinks in magnitude while overshooting its bounds.
/// ///
/// ![](https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_in_out.png) /// {@animation 464 192 https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_in_out.mp4}
static const ElasticInOutCurve elasticInOut = const ElasticInOutCurve(); static const ElasticInOutCurve elasticInOut = const ElasticInOutCurve();
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab