Skip to content

Commit

Permalink
v.3.2.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@Klerith
Klerith committed Jan 25, 2024
1 parent 628b20f commit 0f91fbe
Show file tree
Hide file tree
Showing 19 changed files with 1,143 additions and 863 deletions.
10 changes: 10 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
#### [3.2.0] - New Docs
* onFinish added
* fix delay bug
* reformat code
* AnimateDoState Mixing added
* AnimateDoDirection type added




#### [3.1.2] - New Docs
* Dart format .

Expand Down
118 changes: 75 additions & 43 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,37 @@
# animate_do
# animate_do

## Null-Safety, Dart 3, with zero external dependencies

### IOS, Android, Linux, Mac, Web, Windows ready

An animation package inspired in [Animate.css](https://daneden.github.io/animate.css/), built using only Flutter animations, with zero dependencies.

![Animate_do demo animation](https://raw.githubusercontent.com/Klerith/animate_do_package/master/screenshots/demo-01.gif "Animate_do")


## Getting Started

This package is simple to use. Every single animation contains default values that look beautiful, but you can change properties to accomplish your needs.

## Properties in almost every animated widget:

| Property | Type | Description |
| ------------- |-------------| -----|
| key | __Key__ | (optional) Widget key |
| child | __Widget__ | Child Widget to animate |
| duration | __Duration__ | Animation duration |
| delay | __Duration__ | Delay before the animation |
| from | __double__ | Initial or final destination, if you want a slide or fade more striking |
| animate | __boolean__ | Change this property from false to true to start the animation (useful if you use setState, Bloc, Provider, Redux or any other state management system) |
| infinite | __boolean__ | Attention seekers can be run infinitely with this property |
| spins | __double__ | The number of spins that you want (some animations have this, ex: Spin, Roulette, PerfectSpin ) |
| manualTrigger | __boolean__ | if you're going to trigger the animation manually (required the controller property) |
| controller | __Function__ | Function that exposes the controller (for more control of the animation |

| Property | Type | Description |
| ------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| key | **Key** | (optional) Widget key |
| child | **Widget** | Child Widget to animate |
| duration | **Duration** | Animation duration |
| delay | **Duration** | Delay before the animation |
| from | **double** | Initial or final destination, if you want a slide or fade more striking |
| animate | **boolean** | Change this property from false to true to start the animation (useful if you use setState, Bloc, Provider, Redux or any other state management system) |
| infinite | **boolean** | Attention seekers can be run infinitely with this property |
| spins | **double** | The number of spins that you want (some animations have this, ex: Spin, Roulette, PerfectSpin ) |
| manualTrigger | **boolean** | if you're going to trigger the animation manually (required the controller property) |
| controller | **Function** | Function that exposes the controller (advanced use cases the majority don't need this) |
| onFinish | **Function** | Function that is called when the animation finished (With argument: forward or backward ) |

# Available **Animations**

## FadeIn Animations

- FadeIn
- FadeInDown
- FadeInDownBig
Expand All @@ -41,6 +43,7 @@ This package is simple to use. Every single animation contains default values th
- FadeInRightBig

## FadeOut Animations

- FadeOut
- FadeOutDown
- FadeOutDownBig
Expand All @@ -52,37 +55,45 @@ This package is simple to use. Every single animation contains default values th
- FadeOutRightBig

## BounceIn Animations

- BounceInDown
- BounceInUp
- BounceInLeft
- BounceInRight

## ElasticIn Animations

- ElasticIn
- ElasticInDown
- ElasticInUp
- ElasticInLeft
- ElasticInRight

## SlideIns Animations

- SlideInDown
- SlideInUp
- SlideInLeft
- SlideInRight

## FlipIn Animations

- FlipInX
- FlipInY

## Zooms

- ZoomIn
- ZoomOut

## SpecialIn Animations

- JelloIn

## Attention Seeker
All of the following animations could be infinite with a property called ```infinite``` (type Bool)

All of the following animations could be infinite with a property called `infinite` (type Bool)

- Bounce
- Dance
- Flash
Expand All @@ -94,7 +105,7 @@ All of the following animations could be infinite with a property called ```infi
- SpinPerfect
- Swing

## Example: 01-Basic
## Example: 01-Basic

```
home: Scaffold(
Expand All @@ -108,38 +119,35 @@ home: Scaffold(
FadeInUp(child: Square() ),
FadeInDown(child: Square() ),
FadeInRight(child: Square() ),
],
),
),
),
```


# Demos
For complete examples, check the ```example``` folder inside the repository

![Animate_do demo animation](https://raw.githubusercontent.com/Klerith/animate_do_package/master/screenshots/demo-00.gif "Animate_do demo-00")
For complete examples, check the `example` folder inside the repository

![Animate_do demo animation](https://raw.githubusercontent.com/Klerith/animate_do_package/master/screenshots/demo-00.gif "Animate_do demo-00")

![Animate_do demo animation](https://raw.githubusercontent.com/Klerith/animate_do_package/master/screenshots/demo-02.gif "Animate_do demo-02")

![Animate_do demo animation](https://raw.githubusercontent.com/Klerith/animate_do_package/master/screenshots/demo-04.gif "Animate_do demo-04")

![Animate_do demo animation](https://raw.githubusercontent.com/Klerith/animate_do_package/master/screenshots/demo-05.gif "Animate_do demo-05")


## Trigger animation manually (The easy way)

Just add the property animate to **true** to trigger the animation, and to **false** to revert the animation.

![Animate_do demo animation](https://raw.githubusercontent.com/Klerith/animate_do_package/master/screenshots/demo-03.gif "animate property")

## Example: 02-Basic - Now with toggle



## Example: 02-Basic - Now with Toggle
Just toggle the __animate__ property to animate in or out easily.
Just toggle the **animate** property to animate in or out easily.
Check the full code inside the example folder

```
Expand All @@ -151,7 +159,7 @@ class MyApp extends StatefulWidget {
}
class _MyAppState extends State<MyApp> {
bool animate = true;
late AnimationController controller;
Expand All @@ -164,7 +172,7 @@ class _MyAppState extends State<MyApp> {
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
Expand All @@ -176,7 +184,7 @@ class _MyAppState extends State<MyApp> {
FadeInDown(animate: animate,child: const Square(),),
FadeInLeft(animate: animate,child: const Square(),),
FadeInRight(animate: animate,child: const Square(),),
],
),
Expand All @@ -189,10 +197,8 @@ class _MyAppState extends State<MyApp> {
}
```




### Note: Square, is just a Square blue container

```
class Square extends StatelessWidget {
const Square({Key? key}) : super(key: key);
Expand All @@ -208,32 +214,58 @@ class Square extends StatelessWidget {
```

## Events

There is a new property called `onFinish` that is called when the animation finished, and it returns a value of type `AnimateDoDirection` with the direction of the animation (forward or backward)

### Example:
```
FadeIn(
animate: animate,
delay: const Duration(milliseconds: 100),
onFinish: (direction) => print('$direction'),
child: const Square(),
),
```



## Manual Trigger

Since version ```1.2.0```, there is a way to get the AnimationController easily, so you can restart it, change the duration, do the animation again.
There is a way to get the AnimationController used inside the animation, that let you control the animation like restart it, change the duration, repeat it, etc.

However, with all the new features added, this is not needed for the majority of users, but if you need it, here is how to do it.

**Important** if you decided to go for the manual trigger, you have to control the animation entirely, that means running the controller.forward() and controller.reverse() manually.

Usually its easier now to use the animate property, and just toggle it to true or false to trigger the animation.

#### Example


```
class FadeOutDownBig extends StatelessWidget/StatefulWidget {
AnimationController animateController;
...
...
...
child: FadeInUp(
class FadeOutDownBig extends StatelessWidget/StatefulWidget {
AnimationController animateController;
...
...
...
child: FadeInUp(
// (optional) if true, will not fire the animation on load
manualTrigger: true,
manualTrigger: true,
//(optional, but mandatory if you use manualTrigger:true) This callback exposes the AnimationController used for the selected animation. Then you can call animationController.forward() to trigger the animation wherever you like manually.
controller: ( controller ) => animateController = controller,
child: YourWidget(),
```


### More examples
Check the [**repository for more examples**](https://github.com/Klerith/animate_do_package), or the example folder inside the package.


Don't forget to like the package if you find it useful, and if you have any suggestion, please let me know.
24 changes: 9 additions & 15 deletions example/basic-example.dart
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import 'package:flutter/material.dart';
import 'package:animate_do/animate_do.dart';


void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
Expand All @@ -13,27 +12,22 @@ class MyApp extends StatelessWidget {
title: 'Material App',
theme: ThemeData.light(useMaterial3: true),
home: Scaffold(
body: Center(

body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[

FadeInLeft(child: const Square() ),
FadeInUp(child: const Square() ),
FadeInDown(child: const Square() ),
FadeInRight(child: const Square() ),

],
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
FadeInLeft(child: const Square()),
FadeInUp(child: const Square()),
FadeInDown(child: const Square()),
FadeInRight(child: const Square()),
],
),

),
),
),
);
}
}


class Square extends StatelessWidget {
const Square({Key? key}) : super(key: key);
@override
Expand Down
Loading

0 comments on commit 0f91fbe

Please sign in to comment.