✨ ✨✨强大的flutter动画组件来了

✨ Flutter Animation Set

简化Flutter交错动画。用动画配置的形式，经过时间线去驱动Flutter的交错动画。你能够

1. 使用Flutter Animation Set现有的动画组件
2. 使用Flutter Animation Set去建立新的动画组件
3. 贡献你的Flutter Animation Set动画组件
4. 在项目的example中观看全部的Curves动画效果

🎖 Installing

dependencies:
 flutter_animation_set: ^0.0.3
复制代码

⚡ Use Animation Set Widget

一、import

import 'package:flutter_animation_set/widget/transition_animations.dart';
import 'package:flutter_animation_set/widget/behavior_animations.dart';
复制代码

二、use

child: YYRotatingPlane(),
复制代码

三、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 ✅

四、thanks

• flutter_spinkit

⚡ Create Animation Set Widget By YourSelf

一、import

import 'package:flutter_animation_set/animation_set.dart';
import 'package:flutter_animation_set/animator.dart';
复制代码

二、use widget

经过使用AnimatorSet组装动画

• child:执行动画的组件
• animatorSet:动画集合

AnimatorSet(
    child: widget.child,
    animatorSet: [],
)
复制代码

三、use api

about animation widget

Widget	Mean	Description
W	width	控制宽度的变化，若是是按比例拉升，建议用SX替代
H	height	控制高度的变化，若是是按比例拉升，建议用SY替代
P	padding	控制边距的变化
O	opacity	控制透明度的变化
SX	scaleX	以中点进行X轴的缩放
SY	scaleY	以中点进行Y轴的缩放
RX	rotateX	以中点进行X轴的旋转
RY	rotateY	以中点进行Y轴的旋转
RZ	rotateZ	以中点进行Z轴的旋转
TX	transitionX	进行X轴的平移
TY	transitionY	进行Y轴的平移
C	color	控制背景颜色变化
B	border	控制背景边框变化

about support widget

Widget	Mean	Description
Delay	delay timeLine	延长时间线，进入等待阶段
Serial	combine animation	经过组合动画，达到一块儿播放的效果

⚡ For Example

一、create timeLine

1. 此图代表动画的核心组成是根据时间线(timeLine)去制做的
2. 在执行的过程当中有6次动画同时进行，且总动画时长都为900ms
3. 经过ScaleY组件有序的进行放大和缩小的操做，让每一个矩形都有波浪的效果
4. 经过Delay组件去拖长时间线，达到动画时长统一为900ms

二、build animatorSet

经过上面的图示组装咱们的动画组件，动画组件带有如下属性

• from:动画初始值
• to:动画结束值
• duration:动画时间
• delay:真正执行动画的延时
• curve:动画插值器

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),
],
复制代码

动画执行的对象是Container长方形

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),
    ],
  );
}
复制代码

三、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),
        ],
      ),
    );
  }
}
复制代码

四、done

More

一、组合动画

缩放效果须要同时缩放X、Y轴，用到Serial组件

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

二、延时动画

对真正作动画的时候处理delay属性

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

三、倒退动画

动画能够播放完成后，经过animationType属性设置AnimationType.reverse，让动画接着倒退播放

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：blog.csdn.net/qq_30379689
• Github：github.com/AndroidHens…

License

Apache License 2.0