时间:2021-05-20
在上一篇文章: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; 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); }); } // ...}现在应用程序的效果如下图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在上一篇文章:Flutter进阶—实现动画效果(三)中,实现了一个随机高度、颜色的条形。这一篇文章我们会实现多个条形,同样是随机高度、颜色。首先在bar.dar
在上一篇文章:Flutter进阶—实现动画效果(一)的最后,我们说到需要一个处理程序混乱的概念。在这一篇文章中,我们会引入补间,它是构建动画代码的一个非常简单的
前言此动画效果是我在浏览文章时发现的一个非常酷炫的效果,于是就使用Flutter实现了。更多动画效果及Flutter资源:https://github.com/
本文介绍了css3进阶之less实现星空动画的示例代码,分享给大家,具体如下:效果动图如下:预览链接和代码在我的codepen:https://codepen.
一、效果展示普通的三个div鼠标拖动选中效果选中所有的div这样貌似看不出效果,没关系,我们有神奇的gif动画,来一个整体的动画效果感受下。二、代码实现整个代码