flutter_animation_set 0.0.4

  • Readme
  • Changelog
  • Example
  • Installing
  • 76

✨ 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.3

⚡ 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 Supported properties

PropertyMeanDefault
childThe component that performs the animationnot have
animatorSetCollection of animationnot have
animationTypeControls the type of animation executionAnimationType.repeat
debugThe output logfalse

The properties of the animationType

PropertyMean
repeatRepeat animation
reverseRewind animation
onceOne play animation
AnimatorSet(
    child: widget.child,
    animatorSet: [],
    animationType: AnimationType.reverse,
    debug: false,
)

3、use AnimatorSet api

about animation widget

WidgetMeanDescription
WwidthControl the change of width. If it is scaled up, SX is recommended instead
HheightControl the change of height. If it is scaled up, SY is recommended instead
PpaddingControl padding changes
OopacityControl opacity changes
SXscaleXScale the X-axis with the midpoint
SYscaleYScale the Y-axis with the midpoint
RXrotateXRotate the X-axis with the midpoint
RYrotateYRotate the Y-axis with the midpoint
RZrotateZRotate the Z-axis with the midpoint
TXtransitionXTranslate the Z-axis with the midpoint
TYtransitionYTranslate the Y-axis with the midpoint
CcolorControl background color changes
BborderControl background border changes

about support widget

WidgetMeanDescription
Delaydelay timeLineExtend the timeline to wait
Serialcombine animationThrough 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 #

  • QQ:510402535
  • QQ群:798874340
  • e-mail:xyj510402535@qq.com
  • g-mail:xyj51042535@gmail.com
  • Blog:http://blog.csdn.net/qq_30379689
  • Github:https://github.com/AndroidHensen

License #

Apache License 2.0

0.0.1 #

  • first release
  • welcome to submit bug

0.0.2 #

  • update pub read me

0.0.3 #

  • add curves learning

0.0.4 #

  • add once animation

example/README.md

flutter_animation_set_example #

Demonstrates how to use the flutter_animation_set plugin.

Getting Started #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_animation_set: ^0.0.4

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_animation_set/animation_set.dart';
import 'package:flutter_animation_set/animator.dart';
import 'package:flutter_animation_set/widget/behavior_animations.dart';
import 'package:flutter_animation_set/widget/transition_animations.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
64
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
70
Overall:
Weighted score of the above. [more]
76
Learn more about scoring.

We analyzed this package on Oct 21, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.1
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Fix lib/animation_set.dart. (-0.50 points)

Analysis of lib/animation_set.dart reported 1 hint:

line 100 col 7: This class (or a class which this class inherits from) is marked as '@immutable', but one or more of its instance fields are not final: AnimatedLogo.opacityNotify, AnimatedLogo.opacity, AnimatedLogo.opacityValue, AnimatedLogo.width, AnimatedLogo.height, AnimatedLogo.padding, AnimatedLogo.borderRadius, AnimatedLogo.color, AnimatedLogo.scaleX, AnimatedLogo.scaleY, AnimatedLogo.rotateX, AnimatedLogo.rotateY, AnimatedLogo.rotateZ, AnimatedLogo.transX, AnimatedLogo.transY

Maintenance suggestions

The package description is too short. (-20 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test