Flutter進階之實現動畫效果（三）

2019-10-21 21:40:56

字體：大中小

來源：轉載

供稿：網友

在上一篇文章：Flutter進階—實現動畫效果（二）的最后，我們實現了一個控件，其中包含各種布局和狀態處理控件。以及使用自定義的動畫感知繪圖代碼繪制單個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)  ); }}

要在我們的應用程序中使用彩色條形，需要更新BarChartPainter以從Bar獲取條形顏色。

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_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 {  // 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);  }); } // ...}

現在應用程序的效果如下圖：

Flutter,動畫效果