国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 系統 > Android > 正文

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,動畫效果

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VEVB武林網。


注:相關教程知識閱讀請移步到Android開發頻道。
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 萍乡市| 晴隆县| 榆林市| 宕昌县| 郓城县| 张掖市| 成安县| 邯郸市| 玉屏| 屏南县| 泗阳县| 西吉县| 津南区| 桦南县| 林芝县| 绥中县| 广丰县| 夹江县| 皋兰县| 鸡西市| 汉沽区| 黄梅县| 济阳县| 突泉县| 云龙县| 义马市| 伽师县| 武平县| 本溪市| 衡山县| 阳江市| 吐鲁番市| 咸宁市| 浮梁县| 上饶县| 凉山| 肇东市| 罗田县| 汉沽区| 庄河市| 潍坊市|