本篇文章為大家展示了如何使用Flutter實現(xiàn)動畫效果，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)建站自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目網(wǎng)站設(shè)計制作、成都網(wǎng)站設(shè)計網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元綏德做網(wǎng)站,已為上家服務(wù),為綏德各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792

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)
  );
 }
}

要在我們的應(yīng)用程序中使用彩色條形，需要更新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([
  Colors.blue[400],
  Colors.red[400],
  Colors.green[400],
  Colors.yellow[400],
  Colors.purple[400],
  Colors.orange[400],
  Colors.teal[400],
 ]);

 ColorPalette(List colors) : _colors = colors {
  // bool isNotEmpty：如果此集合中至少有一個元素，則返回true
  assert(colors.isNotEmpty);
 }

 final List _colors;

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

 // 返回集合中的元素數(shù)量
 int get length => _colors.length;

 /*
 int nextInt(
  int max
 )
 生成一個非負(fù)隨機(jī)整數(shù)，范圍從0到max（包括max）
  */
 Color random(Random random) => this[random.nextInt(length)];
}

我們將把Bar.empty和Bar.random工廠構(gòu)造函數(shù)放在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中，我們需要創(chuàng)建一個空的Bar和一個隨機(jī)的Bar。我們將為前者使用完全透明的顏色，后者將使用隨機(jī)顏色。

class _MyHomePageState extends State 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);
  });
 }
 // ...
}

現(xiàn)在應(yīng)用程序的效果如下圖：

上述內(nèi)容就是如何使用Flutter實現(xiàn)動畫效果，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。