✨ Flutter Animation Set

[Lanuage ~~] English | 中文文档

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

Uses the existing Animation Widget of Flutter Animation Set
Use Flutter Animation Set to create a new Animation Widget
Contribute your Flutter Animation Set Widget
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

flutter_spinkit

⚡ 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

This figure shows that the core components of the animation are made according to the timeLine
In the process of execution, there are 6 animations simultaneously, and the total animation duration is 900ms
ScaleY components are used to scale up and down in order to make each rectangle have a wave effect
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

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

QQ：510402535
QQ群：798874340
e-mail：[email protected]
g-mail：[email protected]
Blog：http://blog.csdn.net/qq_30379689
Github：https://github.com/AndroidHensen

License

Apache License 2.0

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?

yyflutter / flutter-animation-set Goto Github PK