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

앞의 글 을 배 워 서 우 리 는 이제 더 복잡 한 도 표를 위해 애니메이션 효 과 를 만 들 수 있 게 되 었 다.이 어 4.567915.글 은 회사 의 제품 이 전국 각지 로 팔 리 면 우리 의 도표 가 전시 하고 자 하 는 내용 에 지역 을 더 해 야 한다 고 말 했다.우 리 는 중첩 막대 그래프 를 사용 하여 효 과 를 시험 해 볼 수 있다.실제 효 과 는 다음 그림 과 같다.

중첩 바 는 데이터 세트 에 사용 되 는데 그 중에서 유형 은 2 차원 이 고 bar 높이 로 표 시 된 수 치 를 합 리 적 으로 합 리 적 입 니 다.그 중의 한 색 채 는 한 지역 을 나타 내 고 모든 선형 은 하나의 제품 을 나타 내 며 제품 의 선형 도 는 회사 로 하여 금 전국 시장 에서 각 제품 의 매출 을 비교 할 수 있 게 하 는 동시에 지역 별로 각 지역 의 매출 을 중첩 하여 나 타 낼 수 있다.
애니메이션 효 과 는 시각 화 된 데이터 세트 변경 에 사용 되 며 추가 차원(보통 시간)을 도입 하고 도 표를 혼 란 스 럽 게 하지 않 습 니 다.애니메이션 을 예 쁘 고 실 용적 으로 만 들 기 위해 서 는 의미 에 대응 하 는 구성 요소 사이 에서 만 작 동 하도록 확보 해 야 합 니 다.따라서 2016 년 특정 제품/지역/채널 의 수입 을 나타 내 는 선형 세분 화 는 2017 년 같은 제품/지역/채널(존재 할 경우)을 대표 하 는 수입 으로 바 뀌 었 다.
우 리 는 합병 알고리즘 을 사용 하여 이 점 을 확보 할 수 있다.합병 은 여러 차원 에서 작업 을 하고 유형의 차원 을 반영 할 것 이다.이 점 을 실현 하고 대량의 코드 가 중복 되 지 않 기 위해 서,우 리 는 합병 알고리즘 을 일반적인 알고리즘 으로 추상 화하 고,그것 을 새로 만 든 tween.dart 파일 에 넣 을 것 이다.

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

abstract class MergeTweenable<T> {
 T get empty;

 Tween<T> tweenTo(T other);

 bool operator <(T other);
}

class MergeTween<T extends MergeTweenable<T>> extends Tween<List<T>> {
 final _tweens = <Tween<T>>[];

 MergeTween(List<T> begin, List<T> end) : super(begin: begin, end: end) {
 final bMax = begin.length;
 final eMax = end.length;
 var b = 0;
 var e = 0;
 while (b + e < bMax + eMax) {
 if(b < bMax && (e == eMax || begin[b] < end[e])) {
 _tweens.add(begin[b].tweenTo(begin[b].empty));
 b++;
 } else if(e < eMax && (b == bMax || end[e] < begin[b])) {
 _tweens.add(end[e].empty.tweenTo(end[e]));
 e++;
 } else {
 _tweens.add(begin[b].tweenTo(end[e]));
 b++;
 e++;
 }
 }
 }

 @override
 List<T> lerp(double t) => new List.generate(
 _tweens.length,
  (i) => _tweens[i].lerp(t)
 );
}

인터페이스 MergeTweeenable 은 두 개의 정렬 목록 T 를 합 쳐 만 드 는 데 필요 한 내용 을 정확하게 캡 처 했 습 니 다.저 희 는 Bar,BarStack,BarGroup 을 사용 하여 유형 매개 변수 T 를 예화 하고 모든 유형 을 MergeTweeenable 로 만 들 것 입 니 다.
마지막 으로 우 리 는 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.stacks);

 final List<BarStack> stacks;

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

 factory BarChart.random(Size size, Random random) {
 const stackWidthFraction = 0.75;
 final stackRanks = _selectRanks(random, 10);
 final stackCount = stackRanks.length;
 final stackDistance = size.width / (1+stackCount);
 final stackWidth = stackDistance * stackWidthFraction;
 final startX = stackDistance - stackWidth/2;
 final stacks = new List.generate(
 stackCount,
 (i) {
 final barRanks = _selectRanks(random, ColorPalette.primary.length ~/ 2);
 final bars = new List.generate(
  barRanks.length,
  (j) => new Bar(
  barRanks[j],
  random.nextDouble() * size.height / 2,
  ColorPalette.primary[barRanks[j]],
  )
 );
 return new BarStack(
  stackRanks[i],
  startX + i * stackDistance,
  stackWidth,
  bars
 );
 }
 );
 return new BarChart(stacks);
 }

 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)
 : _stacksTween = new MergeTween<BarStack>(begin.stacks, end.stacks),
 super(begin: begin, end: end);

 final MergeTween<BarStack> _stacksTween;

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

class BarStack implements MergeTweenable<BarStack> {
 BarStack(this.rank, this.x, this.width, this.bars);

 final int rank;
 final double x;
 final double width;
 final List<Bar> bars;

 @override
 BarStack get empty => new BarStack(rank, 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,
 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
 /**
 * style   PaintingStyle.stroke        
                       
 */
 ..strokeWidth = 1.0;
 final linePath = new Path();
 final chart = animation.value;
 for(final stack in chart.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) {
  /*
  void moveTo(
  double x,
  double y
  )
                 。
  */
  linePath.moveTo(stack.x, y);
  /*
  void lineTo(
  double x,
  double y
  )
                。
  */
  linePath.lineTo(stack.x + stack.width, y);
 }
 y -= bar.height;
 }
 /*
 void drawPath(
 Path path,
 Paint paint
 )
     paint     path
 */
 canvas.drawPath(linePath, linePaint);
 linePath.reset();
 }
 }

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

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.