🔥🔥🔥 Easy to build an animation set

Overview

Flutter Animation Set

pub package

[Lanuage ~~] English | 中文文档

Simplified Flutter stagger animation.To drive the Flutter stagger animation through a timeline in the form of an animation configuration.You can

  1. Uses the existing Animation Widget of Flutter Animation Set
  2. Use Flutter Animation Set to create a new Animation Widget
  3. Contribute your Flutter Animation Set Widget
  4. Watch All of the Curves of Flutter in example

🎖 Installing

dependencies:
  flutter_animation_set: ^0.0.4

Use Animation Set Widget

1、import

import 'package:flutter_animation_set/widget/transition_animations.dart';
import 'package:flutter_animation_set/widget/behavior_animations.dart';

2、use

child: YYRotatingPlane(),

3、road map

transition_animations


YYRotatingPlane

YYDoubleBounce

YYWave

YYWanderingCubes

YYFadingFour

YYFadingCube

YYPulse

YYThreeBounce

YYThreeLine

YYCubeGrid

YYRotatingCircle

YYPumpingHeart

YYRipple

YYRotateLine

YYCubeFadeIn

YYBlinkGrid

behavior_animations


YYFadeButton

YYSingleLike

YYLove

YYSpringMenu

YYFoldMenu

4、thanks

Create Animation Set Widget By YourSelf

1、import

import 'package:flutter_animation_set/animation_set.dart';
import 'package:flutter_animation_set/animator.dart';

2、use widget

AnimatorSet(
    child: widget.child,
    animatorSet: [],
    animationType: AnimationType.reverse,
    debug: false,
)

AnimatorSet Supported properties

Property Mean Default
child The component that performs the animation not have
animatorSet Collection of animation not have
animationType Controls the type of animation execution AnimationType.repeat
debug The output log false

The properties of the animationType

Property Mean
repeat Repeat animation
reverse Rewind animation
once One play animation

3、use AnimatorSet api

about animation widget

Widget Mean Description
W width Control the change of width. If it is scaled up, SX is recommended instead
H height Control the change of height. If it is scaled up, SY is recommended instead
P padding Control padding changes
O opacity Control opacity changes
SX scaleX Scale the X-axis with the midpoint
SY scaleY Scale the Y-axis with the midpoint
RX rotateX Rotate the X-axis with the midpoint
RY rotateY Rotate the Y-axis with the midpoint
RZ rotateZ Rotate the Z-axis with the midpoint
TX transitionX Translate the Z-axis with the midpoint
TY transitionY Translate the Y-axis with the midpoint
C color Control background color changes
B border Control background border changes

about support widget

Widget Mean Description
Delay delay timeLine Extend the timeline to wait
Serial combine animation Through the combination of animation, to achieve the effect of playing together

For Example

1、create timeLine


  1. This figure shows that the core components of the animation are made according to the timeLine
  2. In the process of execution, there are 6 animations simultaneously, and the total animation duration is 900ms
  3. ScaleY components are used to scale up and down in order to make each rectangle have a wave effect
  4. Drag the timeline with the Delay component to reach the animation duration of 900ms

2、build animatorSet

Assemble our animation component using the diagram above, which has the following properties

  • from:Animation initial value
  • to:End of animation value
  • duration:Animation time
  • delay:The delay in actually executing the animation
  • curve:Animation interpolator
animatorSet: [
  Delay(duration: before),
  SY(from: 0.8, to: 1.6, duration: 200, delay: 0, curve: Curves.linear),
  SY(from: 1.6, to: 0.8, duration: 200, delay: 0, curve: Curves.linear),
  Delay(duration: after),
],

The object that the animation executes is Container rectangle

Widget makeWave(int before, int after) {
  return AnimatorSet(
    child: Container(
      color: Colors.white,
      width: 5,
      height: 15,
    ),
    animatorSet: [
      Delay(duration: before),
      SY(from: 0.8, to: 1.6, duration: 200, delay: 0, curve: Curves.linear),
      SY(from: 1.6, to: 0.8, duration: 200, delay: 0, curve: Curves.linear),
      Delay(duration: after),
    ],
  );
}

3、convert to code

class YYWave extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 40,
      height: 40,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          makeWave(0, 500),
          makeWave(100, 400),
          makeWave(200, 300),
          makeWave(300, 200),
          makeWave(400, 100),
          makeWave(500, 0),
        ],
      ),
    );
  }
}

4、done

More

1、Combination of animation

The scaling effect requires scaling both the X and Y axes, uses the Serial Widget

animatorSet: [
  Serial(
    duration: 2000,
    serialList: [
      SX(from: 0.0, to: 1.0, curve: Curves.easeInOut),
      SY(from: 0.0, to: 1.0, curve: Curves.easeInOut),
      O(from: 0.5, to: 0.0, delay: 1000, curve: Curves.easeInOut),
    ],
  ),
],

done

2、Time-lapse animations

Deal with the delay attribute when you actually do the animation

class YYThreeLine extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 40,
      height: 40,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          makeLine(0),
          makeLine(50),
          makeLine(100),
        ],
      ),
    );
  }
}

Widget makeLine(int delay) {
  return AnimatorSet(
    child: Container(
      color: Colors.white,
      width: 10,
      height: 5,
    ),
    animatorSet: [
      TY(from: 0.0, to: 5.0, duration: 400, delay: delay, curve: Curves.fastOutSlowIn,),
      TY(from: 5.0, to: 0.0, duration: 400, curve: Curves.fastOutSlowIn,),
    ],
  );
}

done

3、Reverse animation

After the animation can be played, set animationtype.reverse through the animationType property, making the animation play back

class YYFoldMenu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 40,
      height: 40,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          makeFoldMenu(0, 40),
          makeFoldMenu(100, 26.0),
          makeFoldMenu(200, 12.0),
        ],
      ),
    );
  }
}

Widget makeFoldMenu(int delay, double toY) {
  return AnimatorSet(
    animationType: AnimationType.reverse,
    child: Container(
      decoration: BoxDecoration(
        color: Colors.white,
      ),
      width: 30,
      height: 10,
    ),
    animatorSet: [
      Serial(
        duration: 2000,
        delay: delay,
        serialList: [
          TY(from: 0.0, to: toY, curve: Curves.elasticInOut),
          SX(from: 1.0, to: 0.1, curve: Curves.elasticInOut),
          SY(from: 1.0, to: 0.1, curve: Curves.elasticInOut),
        ],
      ),
    ],
  );
}

done

Bugs/Requests

  • If your application has problems, please submit your code and effect to Issue.
  • Pull request are also welcome.

Contribution

  • Contribute your component, and we'll add it to the animation set
  • Or post your animation, if interested, we will help you to achieve

About

License

Apache License 2.0

You might also like...

An animation Framework for Flutter. It is state-based, declarative, extensible, composable and easy to use.

⚠️ This package is in an early state of development. If you find any bugs or have any suggestions, please open an issue. Fleet is an animation framewo

Sep 29, 2022

A Flutter package with a selection of simple yet very customizable set of loading animations.

A Flutter package with a selection of simple yet very customizable set of loading animations.

Flutter Loading Animations A simple yet very customizable set of loading animations for Flutter projects. Installation Add the following to your pubsp

Sep 23, 2022

A simple widget for animating a set of images with full custom controls as an alternative to using a GIF file.

image_sequence_animator A simple widget for animating a set of images with full custom controls as an alternative to using a GIF file. If you have a G

Jan 5, 2023

A set of transition patterns within the animations package using flutter.

A set of transition patterns within the animations package using flutter.

Flutter Motion Transitions A fultter app to demonstrate Material motion system. Material Motion System The four main Material transition patterns are

Oct 13, 2022

Set of basic geometric animations using Flutter available as Android App gallery

 Set of basic geometric animations using Flutter available as Android App gallery

#ui, #animations, #geometry, #flutter aria Set of basic geometric animations usi

Nov 27, 2022

A Flutter library for gradually painting SVG path objects on canvas (drawing line animation).

A Flutter library for gradually painting SVG path objects on canvas (drawing line animation).

drawing_animation From static SVG assets See more examples in the showcasing app. Dynamically created from Path objects which are animated over time m

Dec 27, 2022

A library for handling animation warmup generically

This solution is not very scalable for applications with many animations to warm up and is meant mostly as an example of an approach applications could take to warmup their animations until a more permanent solution is available.

Nov 19, 2022

3Rein Parallax animation

3Rein Parallax animation

A Parallax behavior for any Flutter Scrollable This plugin enable a parallax effect in any Scrollable, simply wrap your Scrollable in a ParallaxArea a

Oct 21, 2022

A Flutter app with flip animation to view profiles of friends. 🌟

A Flutter app with flip animation to view profiles of friends. 🌟

Flip View Made with 🔥 in India This flutter app is based on the design made Dmytro Prudnikov for Yalantis on Dribble.He describes the design as: Just

Sep 23, 2022
Comments
  • Http error 403: Forbidden

    Http error 403: Forbidden

    I have tried to add the dependency to my flutter project but it keeps showing me that error when I run flutter pub get

    HTTP error 403: Forbidden

    package:pub/src/http.dart 218:5 _ThrowingClient.send ===== asynchronous gap =========================== package:http_throttle/http_throttle.dart 33:31 ThrottleClient.send ===== asynchronous gap ===========================

    package:pub/src/source/hosted.dart 322:37 BoundHostedSource._download package:pub/src/source/hosted.dart 217:13 BoundHostedSource.downloadToSystemCache

    package:pub/src/entrypoint.dart 388:48 Entrypoint._get.

    dart:async runZoned package:pub/src/http.dart 272:10 withDependencyType

    package:pub/src/entrypoint.dart 384:12 Entrypoint._get dart:async Future.wait

    package:pub/src/entrypoint.dart 245:18 Entrypoint.acquireDependencies dart:async _completeOnAsyncReturn

    package:pub/src/solver/version_solver.dart VersionSolver.solve dart:async _completeOnAsyncReturn

    package:pub/src/solver/version_solver.dart VersionSolver._result

    This is an unexpected error. Please run

    pub --trace '--verbosity=warning' get --no-precompile
    

    and include the logs in an issue on https://github.com/dart-lang/pub/issues/new

    pub get failed (server unavailable) -- attempting retry 9 in 64 seconds...

    HTTP error 403: Forbidden

    package:pub/src/http.dart 218:5 _ThrowingClient.send

    ===== asynchronous gap =========================== package:http_throttle/http_throttle.dart 33:31 ThrottleClient.send

    ===== asynchronous gap =========================== package:pub/src/source/hosted.dart 322:37 BoundHostedSource._download

    package:pub/src/source/hosted.dart 217:13 BoundHostedSource.downloadToSystemCache package:pub/src/entrypoint.dart 388:48 Entrypoint._get.

    dart:async runZoned package:pub/src/http.dart 272:10 withDependencyType package:pub/src/entrypoint.dart 384:12 Entrypoint._get

    dart:async Future.wait

    package:pub/src/entrypoint.dart 245:18 Entrypoint.acquireDependencies dart:async _completeOnAsyncReturn

    package:pub/src/solver/version_solver.dart VersionSolver.solve dart:async _completeOnAsyncReturn

    package:pub/src/solver/version_solver.dart VersionSolver._result

    This is an unexpected error. Please run

    pub --trace '--verbosity=warning' get --no-precompile
    

    and include the logs in an issue on https://github.com/dart-lang/pub/issues/new

    pub get failed (server unavailable) -- attempting retry 10 in 64 seconds...

    I'm using a proxy and I don't have this problem with other dependencies

    What is the problem?

    opened by NidalShater 0
Releases(v0.0.3)
Owner
YYDev
yy.inc
YYDev
Flutter animation tutorials, such common animation, flare animation.

❤️ Star ❤️ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Facebook Group QQ Group Developer Flutter Open Flutter Open 963828159

Flutter开源社区 123 Sep 3, 2022
Flutter animation tutorials, such common animation, flare animation.

❤️ Star ❤️ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Facebook Group QQ Group Developer Flutter Open Flutter Open 963828159

Flutter开源社区 123 Sep 3, 2022
A Flutter library that makes animation easer. It allows for separation of animation setup from the User Interface.

animator This library is an animation library for Flutter that: makes animation as simple as the simplest widget in Flutter with the help of Animator

MELLATI Fatah 225 Dec 22, 2022
A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration.

A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration. pub package Getting Started

Hasan Mohammed 91 Dec 20, 2022
Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's heart when you like something and animation effects to increase like count.

like_button Language: English | 中文简体 Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's h

FlutterCandies 357 Dec 27, 2022
BKash-Ballance-Animation - BKash Ballance Animation For Flutter

BKash-Ballance-Animation before clone the GitHub repository please give a star o

Blackshadow Software Ltd 11 Sep 1, 2022
Fisherman-Fishing-Animation - Fisherman Fishing Animation With Flutter

Fisherman Fishing Animation before clone the GitHub repository please give a sta

Blackshadow Software Ltd 9 Oct 27, 2022
Nubank card animation - Nubank card animation built with flutter

Nubank card animation Project | Technologies | How to run | How to contribute ??

Lucas da Silva Barbosa 8 Nov 6, 2022
Fade animation - Add fade animation to your app easily

fade_animation Add fade animation to your app easily using simple_animations pac

Mazouzi Aymene 3 Oct 6, 2022
IntroAnimationSlider - A simple Flutte Animation Introduction for Mobile app easy to implement Using intro Views flutter

introappanimation simple Flutte Animation Introduction for Mobile app easy to im

null 3 Sep 22, 2022