- 博客(11)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 Flutter进阶—实现动画效果（八）
通过学习前面的文章，我们现在终于能为更复杂的图表制作动画效果了【手动斜眼笑】。接着上一篇文章讲，如果公司的产品销往全国各地，那么我们的图表要展示的内容就需要加上地区。我们可以使用堆叠条形图来试试效果，实际效果如下图所示：堆叠条用于数据集，其中类别是二维的，并且将由bar高度表示的数值加起来是合理的。其中一个颜色表示一个地区，每个条形表示一个产品，产品条形图使公司可以对比全国市场上各个产品的销售额，同
2017-05-31 18:22:55
4648
原创 Flutter进阶—实现动画效果（七）
我们假设一种情况，如果应用程序使用条形图显示给定年份的产品类别的销售额，用户可以选择另一年，然后该应用程序将动画到该年的条形图。如果产品类别在两年内是相同的，或者恰好是相同的，除了在其中一个图表中右侧显示的其他类别，我们可以使用我们现有的代码。但如果公司在2016年有A，B，C和X类产品，但是在2017年中断了B并推出了D？动画效果可以做得非常好看，但仍然会让用户感到困惑。为什么？因为它不保留语义。
2017-05-27 16:08:40
6245
1
原创 Flutter进阶—实现动画效果（六）
在上一篇文章中，我们之前对BarChart.lerp的定义并不是高效的，我们正在创建的Bar实例，仅作为Bar.lerp的参数给出，并且针对动画参数t的每个值重复出现。每秒60帧，这意味着可能很多Bar实例被送到垃圾收集器，即使是相对较短的动画。我们可以采用以下三种解决方案：Bar实例可以通过在Bar类中仅创建一次而不是每次调用collapsed来重复使用，但这种方法不适合我们的应用程序。重用可
2017-05-26 12:17:54
2103
原创 Flutter进阶—实现动画效果（五）
在本篇文章开始前，我们先来总结一下之前我们都做了哪些事情。在第一篇文章中，我们在动画值更改时调用double lerpDouble(num a, num b, double t)重新绘制条形。在第二篇文章中，我们首先用Tween类帮助我们管理动画值，并重新绘制条形，然后把绘制条形动画相关的类提取到bar.dart文件。在第三篇文章中，我们首先在Bar类中增加颜色的字段，再新建color_palett
2017-05-24 19:19:36
2425
原创 Flutter进阶—实现动画效果（四）
在上一篇文章：Flutter进阶—实现动画效果（三）中，实现了一个随机高度、颜色的条形。这一篇文章我们会实现多个条形，同样是随机高度、颜色。首先在bar.dart中创建BarChart类，并使用固定长度的Bar实例列表。我们将使用5个条形，表示一周的5个工作日。然后，我们需要将创建空白和随机实例的责任从Bar转移到BarChart。import 'package:flutter/material.d
2017-05-22 13:05:56
3258
原创 Flutter进阶—实现动画效果（三）
在上一篇文章：Flutter进阶—实现动画效果（二）的最后，我们实现了一个控件，其中包含各种布局和状态处理控件。以及使用自定义的动画感知绘图代码绘制单个Bar的控件。还有一个浮动按钮控件，用于启动条形图高度的动画变化。现在开始向我们的单个条形添加颜色，在Bar类的height字段下添加一个color字段，并且更新Bar.lerp以使其两者兼容。在上一篇文章中，介绍过“lerp”是“线性内插”或“线性
2017-05-20 11:01:23
3717
3
原创 Flutter进阶—实现动画效果（二）
在上一篇文章：Flutter进阶—实现动画效果（一）的最后，我们说到需要一个处理程序混乱的概念。在这一篇文章中，我们会引入补间，它是构建动画代码的一个非常简单的概念，主要作用是用面向对象的方法替代之前面向过程的方法。tween是一个值，它描述了其他值的空间中的两个点之间的路径，比如条形图的动画值从0运行到1。补间在Dart中表示类型为Tween的对象abstract class Tween<T> {
2017-05-18 00:34:42
7628
2
原创 Flutter进阶—实现动画效果（一）
上一篇文章我们了解了Flutter的动画基础：Flutter进阶—解析动画，这一篇文章我们就来实现一个图表的动画效果。首先，我们需要创建一个新项目myapp，然后把main.dart的内容替换成下面的代码import 'package:flutter/material.dart';import 'dart:math';void main() { runApp(new MyApp());}cl
2017-05-16 18:29:09
7373
3
原创 Flutter进阶—解析动画
浅解动画Flutter中的动画系统基于Animation对象的类型。控件可以直接通过读取其当前的值并监听其状态变化来将这些动画添加到其构建函数中，或者可以使用动画作为更精细的动画的基础，并将它们传递给其他控件。Animation动画系统的主要构建块是Animation类。动画表示可以在动画生命周期内改变的特定类型的值。执行动画的大多数控件都会接收一个Animation对象作为参数，从中读取动画的当前
2017-05-15 18:31:02
5817
原创 Flutter进阶—点击、拖动和其他手势
Flutter中的手势系统有两个层次。第一层具有原始指针事件，其描述了穿过屏幕的指针（例如触摸、鼠标和触控笔）的位置和移动。第二层具有手势，其描述由一个或多个指针移动组成的语义动作。指针指针代表用户与设备屏幕交互的原始数据。有四种类型的指针事件：PointerDownEvent：指针已经在特定位置联系了屏幕。PointerMoveEvent：指针已经从屏幕上的一个位置移动到另一个位置。Poin
2017-05-15 11:45:40
10526
2
原创 Flutter进阶—创建有状态控件
Flutter进阶—构建布局实例展示了如何创建以下布局。当应用程序首次启动时，这颗实心星标是红色的，表明这个景点曾经被收藏过。实心星标旁边的人数表明，有66人喜欢这个景点。现在需要完成一个任务，点击该实心星标删除其收藏的状态，用空心星标取代实心星标并减少收藏人数。点击再次收藏景点，画一颗实心星标，增加收藏人数。要完成此操作，需要创建一个包含Icon（图标）和Text（文本）的自定义控件，Icon（图
2017-05-12 14:30:24
12797
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人