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

마지막 으로 우 리 는 다양한 레이아웃 과 상태 처리 컨트롤 을 포함 하 는 컨트롤 을 실현 했다.사용자 정의 애니메이션 감지 그래 픽 코드 를 사용 하여 하나의 Bar 컨트롤 을 그립 니 다.막대 그래프 높이 의 애니메이션 변 화 를 시작 하 는 데 사용 되 는 유동 단추 컨트롤 도 있 습 니 다.
지금부터 하나의 스 트 라 이 프 에 색상 을 추가 하고 Bar 류 의 height 필드 에 color 필드 를 추가 하 며 Bar.lerp 를 업데이트 하여 둘 을 호 환 시 킵 니 다.지난 글 에서'lerp'는'선형 삽입'또는'선형 삽입'의 짧 은 형식 이 라 고 소개 했다.

class Bar {
 Bar(this.height, this.color);
 final double height;
 final Color color;

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

우리 프로그램 에서 컬러 스 트 라 이 프 를 사용 하려 면 Bar 에서 스 트 라 이 프 색상 을 가 져 올 수 있 도록 BarChartPainter 를 업데이트 해 야 합 니 다.

class BarChartPainter extends CustomPainter {
 // ...
 @override
 void paint(Canvas canvas, Size size) {
  final bar = animation.value;
  final paint = new Paint()
   //  Bar      
   ..color = bar.color
   ..style = PaintingStyle.fill;
  // ...
 // ...
 }

main.dart 동급 디 렉 터 리 에 새로운 color팔레트.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 {
  // bool isNotEmpty：             ，   true
  assert(colors.isNotEmpty);
 }

 final List<Color> _colors;

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

 //           
 int get length => _colors.length;

 /*
 int nextInt(
  int max
 )
           ，   0 max（  max）
  */
 Color random(Random random) => this[random.nextInt(length)];
}

우 리 는 Bar.empty 와 Bar.random 공장 의 구조 함 수 를 Bar 위 에 놓 을 것 이다.

class Bar {
 Bar(this.height, this.color);
 final double height;
 final Color color;

 factory Bar.empty() => new Bar(0.0, Colors.transparent);
 factory Bar.random(Random random) {
  return new Bar(
   random.nextDouble() * 100.0,
   ColorPalette.primary.random(random)
  );
 }

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

main.dart 에서 우 리 는 빈 Bar 와 무 작위 Bar 를 만들어 야 합 니 다.우 리 는 전 자 를 위해 완전히 투명 한 색 을 사용 하고 후 자 는 무 작위 색 을 사용 할 것 이다.

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
 // ...
 @override
 void initState() {
  // ...
  tween = new BarTween(new Bar.empty(), new Bar.random(random));
  animation.forward();
 }
 // ...
 void changeData() {
  setState(() {
   tween = new BarTween(
    tween.evaluate(animation),
    new Bar.random(random),
   );
   animation.forward(from: 0.0);
  });
 }
 // ...
}

현재 프로그램의 효 과 는 다음 그림 과 같 습 니 다:

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