✨ ✨✨強大的flutter動畫組件來了

時間 2019-11-05

標籤強大 flutter 動畫組件简体版

原文原文鏈接

✨ Flutter Animation Set

簡化Flutter交錯動畫。用動畫配置的形式，經過時間線去驅動Flutter的交錯動畫。你能夠git

使用Flutter Animation Set現有的動畫組件
使用Flutter Animation Set去建立新的動畫組件
貢獻你的Flutter Animation Set動畫組件
在項目的example中觀看全部的Curves動畫效果

🎖 Installing

dependencies:
 flutter_animation_set: ^0.0.3
複製代碼

⚡ Use Animation Set Widget

一、importgithub

import 'package:flutter_animation_set/widget/transition_animations.dart';
import 'package:flutter_animation_set/widget/behavior_animations.dart';
複製代碼

二、useapi

child: YYRotatingPlane(),
複製代碼

三、road mapapp

transition_animations 過渡動畫less

YYRotatingPlane ✅	YYDoubleBounce ✅	YYWave ✅	YYWanderingCubes ✅	YYFadingFour ✅	YYFadingCube ✅
YYPulse ✅	YYThreeBounce ✅	YYThreeLine ✅	YYCubeGrid ✅	YYRotatingCircle ✅	YYPumpingHeart ✅
YYRipple ✅	YYRotateLine ✅	YYCubeFadeIn ✅	YYBlinkGrid ✅

behavior_animations 行爲動畫ide

YYFadeButton
✅

YYSingleLike
✅

YYLove
✅

YYSpringMenu
✅

YYFoldMenu
✅

四、thankssvg

flutter_spinkit

⚡ Create Animation Set Widget By YourSelf

一、importpost

import 'package:flutter_animation_set/animation_set.dart';
import 'package:flutter_animation_set/animator.dart';
複製代碼

二、use widget動畫

經過使用AnimatorSet組裝動畫ui

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

此圖代表動畫的核心組成是根據時間線(timeLine)去製做的
在執行的過程當中有6次動畫同時進行，且總動畫時長都爲900ms
經過ScaleY組件有序的進行放大和縮小的操做，讓每一個矩形都有波浪的效果
經過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

一、組合動畫

縮放效果須要同時縮放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),
        ],
      ),
    ],
  );
}
複製代碼