{"id":13380330,"url":"https://github.com/YYFlutter/flutter-animation-set","last_synced_at":"2025-03-13T07:32:57.133Z","repository":{"id":51322806,"uuid":"202278395","full_name":"YYFlutter/flutter-animation-set","owner":"YYFlutter","description":"🔥🔥🔥 Easy to build an animation set","archived":false,"fork":false,"pushed_at":"2021-05-15T12:03:02.000Z","size":1272,"stargazers_count":281,"open_issues_count":5,"forks_count":26,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-05-20T22:49:36.152Z","etag":null,"topics":["animation","animation-set","curves","flutter"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/YYFlutter.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-14T05:06:49.000Z","updated_at":"2024-04-23T02:07:15.000Z","dependencies_parsed_at":"2022-08-29T00:20:30.352Z","dependency_job_id":null,"html_url":"https://github.com/YYFlutter/flutter-animation-set","commit_stats":null,"previous_names":["efoxteam/flutter-animation-set"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YYFlutter%2Fflutter-animation-set","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YYFlutter%2Fflutter-animation-set/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YYFlutter%2Fflutter-animation-set/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YYFlutter%2Fflutter-animation-set/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/YYFlutter","download_url":"https://codeload.github.com/YYFlutter/flutter-animation-set/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243361439,"owners_count":20278574,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","animation-set","curves","flutter"],"created_at":"2024-07-30T09:00:31.150Z","updated_at":"2025-03-13T07:32:56.799Z","avatar_url":"https://github.com/YYFlutter.png","language":"Dart","readme":"# ✨ Flutter Animation Set\n\n[![pub package](https://img.shields.io/pub/v/flutter_animation_set.svg)](https://pub.dev/packages/flutter_animation_set)\n\n**[Lanuage ~~]** [English](README.md) | [中文文档](README_CN.md)\n\nSimplified Flutter stagger animation.To drive the Flutter stagger animation through a timeline in the form of an animation configuration.You can\n\n1. Uses the existing Animation Widget of `Flutter Animation Set`\n2. Use `Flutter Animation Set` to create a new Animation Widget\n3. Contribute your Flutter Animation Set Widget\n4. Watch All of the `Curves` of Flutter in example\n\n## 🎖 Installing\n\n```yaml\ndependencies:\n  flutter_animation_set: ^0.0.4\n```\n\n## ⚡ Use Animation Set Widget\n\n**1、import**\n\n```dart\nimport 'package:flutter_animation_set/widget/transition_animations.dart';\nimport 'package:flutter_animation_set/widget/behavior_animations.dart';\n```\n\n**2、use**\n\n```dart\nchild: YYRotatingPlane(),\n```\n\n**3、road map**\n\n\u003e transition_animations\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/1.gif\" width=\"90px\"\u003e\n      \u003cbr /\u003e\n      YYRotatingPlane\n      \u003cbr /\u003e\n      ✅\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/2.gif\" width=\"90px\"\u003e\n      \u003cbr /\u003e\n      YYDoubleBounce\n      \u003cbr /\u003e\n      ✅\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/3.gif\" width=\"90px\"\u003e\n      \u003cbr /\u003e\n      YYWave\n      \u003cbr /\u003e\n      ✅\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/4.gif\" width=\"90px\"\u003e\n      \u003cbr /\u003e\n      YYWanderingCubes\n      \u003cbr /\u003e\n      ✅\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/5.gif\" width=\"90px\"\u003e\n      \u003cbr /\u003e\n      YYFadingFour\n      \u003cbr /\u003e\n      ✅\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/6.gif\" width=\"90px\"\u003e\n      \u003cbr /\u003e\n      YYFadingCube\n      \u003cbr /\u003e\n      ✅\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/7.gif\" width=\"90px\"\u003e\n      \u003cbr /\u003e\n      YYPulse\n      \u003cbr /\u003e\n      ✅\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/8.gif\" width=\"90px\"\u003e\n      \u003cbr /\u003e\n      YYThreeBounce\n      \u003cbr /\u003e\n      ✅\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/9.gif\" width=\"90px\"\u003e\n      \u003cbr /\u003e\n      YYThreeLine\n      \u003cbr /\u003e\n      ✅\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/10.gif\" width=\"90px\"\u003e\n      \u003cbr /\u003e\n      YYCubeGrid\n      \u003cbr /\u003e\n      ✅\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/11.gif\" width=\"90px\"\u003e\n      \u003cbr /\u003e\n      YYRotatingCircle\n      \u003cbr /\u003e\n      ✅\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/12.gif\" width=\"90px\"\u003e\n      \u003cbr /\u003e\n      YYPumpingHeart\n      \u003cbr /\u003e\n      ✅\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/13.gif\" width=\"90px\"\u003e\n      \u003cbr /\u003e\n      YYRipple\n      \u003cbr /\u003e\n      ✅\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/14.gif\" width=\"90px\"\u003e\n      \u003cbr /\u003e\n      YYRotateLine\n      \u003cbr /\u003e\n      ✅\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/15.gif\" width=\"90px\"\u003e\n      \u003cbr /\u003e\n      YYCubeFadeIn\n      \u003cbr /\u003e\n      ✅\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/16.gif\" width=\"90px\"\u003e\n      \u003cbr /\u003e\n      YYBlinkGrid\n      \u003cbr /\u003e\n      ✅\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003e behavior_animations\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/17.gif\" width=\"90px\"\u003e\n      \u003cbr /\u003e\n      YYFadeButton\n      \u003cbr /\u003e\n      ✅\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/18.gif\" width=\"90px\"\u003e\n      \u003cbr /\u003e\n      YYSingleLike\n      \u003cbr /\u003e\n      ✅\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/19.gif\" width=\"90px\"\u003e\n      \u003cbr /\u003e\n      YYLove\n      \u003cbr /\u003e\n      ✅\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/20.gif\" width=\"90px\"\u003e\n      \u003cbr /\u003e\n      YYSpringMenu\n      \u003cbr /\u003e\n      ✅\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/21.gif\" width=\"90px\"\u003e\n      \u003cbr /\u003e\n      YYFoldMenu\n      \u003cbr /\u003e\n      ✅\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n**4、thanks**\n\n* [flutter_spinkit](https://github.com/jogboms/flutter_spinkit)\n\n## ⚡ Create Animation Set Widget By YourSelf\n\n**1、import**\n\n```dart\nimport 'package:flutter_animation_set/animation_set.dart';\nimport 'package:flutter_animation_set/animator.dart';\n```\n\n**2、use widget**\n\n```dart\nAnimatorSet(\n    child: widget.child,\n    animatorSet: [],\n    animationType: AnimationType.reverse,\n    debug: false,\n)\n```\n\nAnimatorSet Supported properties\n\nProperty|Mean|Default\n:--|:--|:--:|\nchild|The component that performs the animation|not have\nanimatorSet|Collection of animation|not have\nanimationType|Controls the type of animation execution|AnimationType.repeat\ndebug|The output log|false\n\nThe properties of the animationType\n\nProperty|Mean\n:--|:--|\nrepeat|Repeat animation\nreverse|Rewind animation\nonce|One play animation\n\n**3、use AnimatorSet api**\n\nabout animation widget\n\nWidget|Mean|Description\n:--|:--|:--:|\n**W**|width|Control the change of width. If it is scaled up, SX is recommended instead\n**H**|height|Control the change of height. If it is scaled up, SY is recommended instead\n**P**|padding|Control padding changes\n**O**|opacity|Control opacity changes\n**SX**|scaleX|Scale the X-axis with the midpoint\n**SY**|scaleY|Scale the Y-axis with the midpoint\n**RX**|rotateX|Rotate the X-axis with the midpoint\n**RY**|rotateY|Rotate the Y-axis with the midpoint\n**RZ**|rotateZ|Rotate the Z-axis with the midpoint\n**TX**|transitionX|Translate the Z-axis with the midpoint\n**TY**|transitionY|Translate the Y-axis with the midpoint\n**C**|color|Control background color changes\n**B**|border|Control background border changes\n\nabout support widget\n\nWidget|Mean|Description\n:--|:--|:--:|\n**Delay**|delay timeLine|Extend the timeline to wait\n**Serial**|combine animation|Through the combination of animation, to achieve the effect of playing together\n\n## ⚡ For Example\n\n**1、create timeLine**\n\n\u003cimg src=\"https://github.com/efoxTeam/flutter-animation-set/raw/master/image/readme/YYWave.png\" width=\"800px\"\u003e\n\u003cbr /\u003e\n\n1. This figure shows that the core components of the animation are made according to the timeLine\n2. In the process of execution, there are 6 animations simultaneously, and the total animation duration is 900ms\n3. ScaleY components are used to scale up and down in order to make each rectangle have a wave effect\n4. Drag the timeline with the Delay component to reach the animation duration of 900ms\n\n**2、build animatorSet**\n\nAssemble our animation component using the diagram above, which has the following properties\n\n* from:Animation initial value\n* to:End of animation value\n* duration:Animation time\n* delay:The delay in actually executing the animation\n* curve:Animation interpolator\n\n```dart\nanimatorSet: [\n  Delay(duration: before),\n  SY(from: 0.8, to: 1.6, duration: 200, delay: 0, curve: Curves.linear),\n  SY(from: 1.6, to: 0.8, duration: 200, delay: 0, curve: Curves.linear),\n  Delay(duration: after),\n],\n```\n\nThe object that the animation executes is `Container` rectangle\n\n```dart\nWidget makeWave(int before, int after) {\n  return AnimatorSet(\n    child: Container(\n      color: Colors.white,\n      width: 5,\n      height: 15,\n    ),\n    animatorSet: [\n      Delay(duration: before),\n      SY(from: 0.8, to: 1.6, duration: 200, delay: 0, curve: Curves.linear),\n      SY(from: 1.6, to: 0.8, duration: 200, delay: 0, curve: Curves.linear),\n      Delay(duration: after),\n    ],\n  );\n}\n```\n\n**3、convert to code**\n\n```dart\nclass YYWave extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return Container(\n      width: 40,\n      height: 40,\n      child: Row(\n        mainAxisAlignment: MainAxisAlignment.spaceBetween,\n        children: \u003cWidget\u003e[\n          makeWave(0, 500),\n          makeWave(100, 400),\n          makeWave(200, 300),\n          makeWave(300, 200),\n          makeWave(400, 100),\n          makeWave(500, 0),\n        ],\n      ),\n    );\n  }\n}\n```\n\n**4、done**\n\n\u003cimg src=\"https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/3.gif\" width=\"90px\"\u003e\n\n## More\n\n**1、Combination of animation**\n\n\u003e The scaling effect requires scaling both the X and Y axes, uses the Serial Widget\n\n```dart\nanimatorSet: [\n  Serial(\n    duration: 2000,\n    serialList: [\n      SX(from: 0.0, to: 1.0, curve: Curves.easeInOut),\n      SY(from: 0.0, to: 1.0, curve: Curves.easeInOut),\n      O(from: 0.5, to: 0.0, delay: 1000, curve: Curves.easeInOut),\n    ],\n  ),\n],\n```\n\ndone\n\n\u003cimg src=\"https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/7.gif\" width=\"90px\"\u003e\n\n**2、Time-lapse animations**\n\nDeal with the delay attribute when you actually do the animation\n\n```dart\nclass YYThreeLine extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return Container(\n      width: 40,\n      height: 40,\n      child: Row(\n        mainAxisAlignment: MainAxisAlignment.spaceBetween,\n        children: \u003cWidget\u003e[\n          makeLine(0),\n          makeLine(50),\n          makeLine(100),\n        ],\n      ),\n    );\n  }\n}\n\nWidget makeLine(int delay) {\n  return AnimatorSet(\n    child: Container(\n      color: Colors.white,\n      width: 10,\n      height: 5,\n    ),\n    animatorSet: [\n      TY(from: 0.0, to: 5.0, duration: 400, delay: delay, curve: Curves.fastOutSlowIn,),\n      TY(from: 5.0, to: 0.0, duration: 400, curve: Curves.fastOutSlowIn,),\n    ],\n  );\n}\n```\n\ndone\n\n\u003cimg src=\"https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/9.gif\" width=\"90px\"\u003e\n\n**3、Reverse animation**\n\nAfter the animation can be played, set `animationtype.reverse` through the animationType property, making the animation play back\n\n```dart\nclass YYFoldMenu extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return Container(\n      width: 40,\n      height: 40,\n      child: Column(\n        mainAxisAlignment: MainAxisAlignment.spaceBetween,\n        children: \u003cWidget\u003e[\n          makeFoldMenu(0, 40),\n          makeFoldMenu(100, 26.0),\n          makeFoldMenu(200, 12.0),\n        ],\n      ),\n    );\n  }\n}\n\nWidget makeFoldMenu(int delay, double toY) {\n  return AnimatorSet(\n    animationType: AnimationType.reverse,\n    child: Container(\n      decoration: BoxDecoration(\n        color: Colors.white,\n      ),\n      width: 30,\n      height: 10,\n    ),\n    animatorSet: [\n      Serial(\n        duration: 2000,\n        delay: delay,\n        serialList: [\n          TY(from: 0.0, to: toY, curve: Curves.elasticInOut),\n          SX(from: 1.0, to: 0.1, curve: Curves.elasticInOut),\n          SY(from: 1.0, to: 0.1, curve: Curves.elasticInOut),\n        ],\n      ),\n    ],\n  );\n}\n```\n\ndone\n\n\u003cimg src=\"https://github.com/efoxTeam/flutter-animation-set/raw/master/image/gif/21.gif\" width=\"90px\"\u003e\n\n## Bugs/Requests\n\n* If your application has problems, please submit your code and effect to Issue.\n* Pull request are also welcome.\n\n## Contribution\n\n* Contribute your component, and we'll add it to the animation set\n* Or post your animation, if interested, we will help you to achieve\n\n## About\n\n* QQ：510402535\n* QQ群：798874340\n* e-mail：xyj510402535@qq.com\n* g-mail：xyj51042535@gmail.com\n* Blog：http://blog.csdn.net/qq_30379689\n* Github：https://github.com/AndroidHensen\n\n## License\n\nApache License 2.0\n","funding_links":[],"categories":["Frameworks"],"sub_categories":["Animation"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FYYFlutter%2Fflutter-animation-set","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FYYFlutter%2Fflutter-animation-set","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FYYFlutter%2Fflutter-animation-set/lists"}