Flutter 진급 의 애니메이션 효과 구현(10)

앞의 두 편의 글[애니메이션 효과(8),애니메이션 효과(9)]에서 우 리 는 제품 과 지역 만 통계 해 야 한다.만약 에 지금 통계 항목 인 판매 경 로 를 추가 하면 이전의 중첩 막대 그래프 와 조별 막대 그래프 를 사용 하 는 것 은 모두 적합 하지 않다.우 리 는 두 가 지 를 결합 시 켜 그룹+중첩 막대 그래프 를 사용 할 수 있 습 니 다.실제 효 과 는 다음 그림 과 같 습 니 다.

위의 그림 과 같이 우 리 는 같은 색깔 의 서로 다른 투명 도 를 사용 하여 서로 다른 판매 경 로 를 표시 합 니 다.서로 다른 투명 도 를 실현 하기 위해 서 는 먼저 color 를 업데이트 해 야 합 니 다.palette.dart 파일 의 코드:

import 'package:flutter/material.dart';
import 'dart:math';

class ColorPalette {
 static final ColorPalette primary = new ColorPalette(<Color>[
 Colors.blue[400],
 Colors.red[400],
 Colors.green[400],
 Colors.yellow[400],
 Colors.purple[400],
 Colors.orange[400],
 Colors.teal[400],
 ]);

 ColorPalette(List<Color> colors) : _colors = colors {
 assert(colors.isNotEmpty);
 }

 factory ColorPalette.monochrome(Color base, int length) {
 return new ColorPalette(
  new List.generate(
  length,
  (i) => _brighterColor(base, i, length)
  )
 );
 }

 static Color _brighterColor(Color base, int i, int n) {
 /*
 const Color.fromARGB(
  int a,
  int r,
  int g,
  int b
 )
        8       
  a：a alpha ，0    ，255       
  r：r   ， 0 255
  g：g   ， 0 255
  b：b   ， 0 255
  */
 return new Color.fromARGB(
  /*
  int alpha
       alpha   8  
    0         。  255          
  */
  base.alpha,
  _brighterComponent(base.red, i, n),
  _brighterComponent(base.green, i, n),
  _brighterComponent(base.blue, i, n)
 );
 }

 static int _brighterComponent(int base, int i, int n) {
 return (base + i * (255 - base) / n).floor();
 }

 final List<Color> _colors;

 Color operator [](int index) => _colors[index % length];

 int get length => _colors.length;

 Color random(Random random) => this[random.nextInt(length)];
}

마지막 으로 bar.dart 파일 의 코드 를 다시 업데이트 합 니 다.

import 'package:flutter/material.dart';
import 'package:flutter/animation.dart';
import 'dart:ui' show lerpDouble;
import 'dart:math';
import 'color_palette.dart';
import 'tween.dart';

class BarChart {
 BarChart(this.groups);

 final List<BarGroup> groups;

 factory BarChart.empty(Size size) {
 return new BarChart(<BarGroup>[]);
 }

 factory BarChart.random(Size size, Random random) {
 const groupWidthFraction = 0.75;
 const stackWidthFraction = 0.9;
 final groupRanks = _selectRanks(random, 5);
 final groupCount = groupRanks.length;
 final groupDistance = size.width / (1+groupCount);
 final groupWidth = groupDistance * groupWidthFraction;
 final startX = groupDistance - groupWidth/2;
 final stackRanks = _selectRanks(random, ColorPalette.primary.length ~/ 2);
 final stackCount = stackRanks.length;
 final stackDistance = groupWidth / stackCount;
 final stackWidth = stackDistance * stackWidthFraction;
 final groups = new List.generate(
  groupCount,
  (i) {
  final stacks = new List.generate(
   stackCount,
   (j) {
   final baseColor = ColorPalette.primary[stackRanks[j]];
   final barRanks = _selectRanks(random, 4);
   final monochrome = new ColorPalette.monochrome(baseColor, 4);
   final bars = new List.generate(
    barRanks.length,
    (k) => new Bar(
    barRanks[k],
    random.nextDouble() * size.height / 2,
    monochrome[barRanks[k]],
    )
   );
   return new BarStack(
    stackRanks[j],
    baseColor,
    startX + i * groupDistance + j * stackDistance,
    stackWidth,
    bars,
   );
   }
  );
  return new BarGroup(
   groupRanks[i],
   stacks
  );
  }
 );
 return new BarChart(groups);
 }

 static List<int> _selectRanks(Random random, int cap) {
 final ranks = <int>[];
 var rank = 0;
 while(true) {
  rank += random.nextInt(2);
  if(cap <= rank) break;
  ranks.add(rank);
  rank++;
 }
 return ranks;
 }

}

class BarChartTween extends Tween<BarChart> {
 BarChartTween(BarChart begin, BarChart end)
 : _groupsTween = new MergeTween<BarGroup>(begin.groups, end.groups),
 super(begin: begin, end: end);

 final MergeTween<BarGroup> _groupsTween;

 @override
 BarChart lerp(double t) => new BarChart(_groupsTween.lerp(t));
}

class BarGroup implements MergeTweenable<BarGroup> {
 BarGroup(this.rank, this.stacks);

 final int rank;
 final List<BarStack> stacks;

 @override
 BarGroup get empty => new BarGroup(rank, <BarStack>[]);

 @override
 bool operator <(BarGroup other) => rank < other.rank;

 @override
 Tween<BarGroup> tweenTo(BarGroup other) => new BarGroupTween(this, other);
}

class BarGroupTween extends Tween<BarGroup> {
 BarGroupTween(BarGroup begin, BarGroup end)
 : _stacksTween = new MergeTween<BarStack>(begin.stacks, end.stacks),
 super(begin: begin, end: end) {
  assert(begin.rank == end.rank);
 }

 final MergeTween<BarStack> _stacksTween;

 @override
 BarGroup lerp(double t) => new BarGroup(
 begin.rank,
 _stacksTween.lerp(t)
 );
}

class BarStack implements MergeTweenable<BarStack> {
 BarStack(this.rank, this.baseColor, this.x, this.width, this.bars);
 final int rank;
 final Color baseColor;
 final double x;
 final double width;
 final List<Bar> bars;

 @override
 BarStack get empty => new BarStack(rank, baseColor, x, 0.0, <Bar>[]);

 @override
 bool operator <(BarStack other) => rank < other.rank;

 @override
 Tween<BarStack> tweenTo(BarStack other) => new BarStackTween(this, other);
}

class BarStackTween extends Tween<BarStack> {
 BarStackTween(BarStack begin, BarStack end)
 : _barsTween = new MergeTween<Bar>(begin.bars, end.bars),
 super(begin: begin, end: end) {
 assert(begin.rank == end.rank);
 }

 final MergeTween<Bar> _barsTween;

 @override
 BarStack lerp(double t) => new BarStack(
 begin.rank,
 Color.lerp(begin.baseColor, end.baseColor, t),
 lerpDouble(begin.x, end.x, t),
 lerpDouble(begin.width, end.width, t),
 _barsTween.lerp(t)
 );
}

class Bar extends MergeTweenable<Bar> {
 Bar(this.rank, this.height, this.color);
 final int rank;
 final double height;
 final Color color;

 @override
 Bar get empty => new Bar(rank, 0.0, color);

 @override
 bool operator <(Bar other) => rank < other.rank;

 @override
 Tween<Bar> tweenTo(Bar other) => new BarTween(this, other);

 static Bar lerp(Bar begin, Bar end, double t) {
 assert(begin.rank == end.rank);
 return new Bar(
  begin.rank,
  lerpDouble(begin.height, end.height, t),
  Color.lerp(begin.color, end.color, t)
 );
 }
}

class BarTween extends Tween<Bar> {
 BarTween(Bar begin, Bar end) : super(begin: begin, end: end) {
 assert(begin.rank == end.rank);
 }

 @override
 Bar lerp(double t) => Bar.lerp(begin, end, t);
}

class BarChartPainter extends CustomPainter {
 BarChartPainter(Animation<BarChart> animation)
  : animation = animation,
  super(repaint: animation);

 final Animation<BarChart> animation;

 @override
 void paint(Canvas canvas, Size size) {
 final barPaint = new Paint()..style = PaintingStyle.fill;
 final linePaint = new Paint()
  ..style = PaintingStyle.stroke
  ..color = Colors.white
  ..strokeWidth = 1.0;
 final linePath = new Path();
 final chart = animation.value;
 for(final group in chart.groups) {
  for(final stack in group.stacks) {
  var y = size.height;
  for(final bar in stack.bars) {
   barPaint.color = bar.color;
   canvas.drawRect(
   new Rect.fromLTWH(
    stack.x,
    y - bar.height,
    stack.width,
    bar.height
   ),
   barPaint
   );
   if(y < size.height) {
   linePath.moveTo(stack.x, y);
   linePath.lineTo(stack.x + stack.width, y);
   }
   y -= bar.height;
  }
  canvas.drawPath(
   linePath,
   linePaint
  );
  linePath.reset();
  }
 }
 }

 @override
 bool shouldRepaint(BarChartPainter old) => false;
}

애니메이션 효 과 를 어떻게 실현 하 는 지 에 대한 강 좌 는 여기 서 잠시 일 단락 되 었 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.