小菜一直对动画不太熟悉,最近学习了一些关于动画的皮毛知识,网上资料很多,小菜按自己的理解整理一下. Animation Animation 可以生成动画过程中的值,生成的值并非单一的 double 也可以是 Size/Color 等:Animation 可以获取状态但无法获取屏幕显示内容. AnimationController AnimationController 小菜理解为 Animation 控制器,实际也是一个特殊的 Animation,在屏幕刷新时会生成一个新的值:使用时需要传递 v…
小菜前两天学习了以下 Animation 的基本动画,接下来小菜学习以下稍微进阶版的 Animation 动画. 复合动画 小菜前两天学习的主要是基本的单一动画,当然多个动画效果集一身也是毫无问题的,小菜接下来尝试一个图片显隐性和缩放同时循环使用的 Demo: addStatusListener 用来监听当前动画状态,即开始或结束: addListener 用来坚挺动画过程,可获取实时 value 值: AnimationController controller; Animation<doub…
老孟导读:Flutter 动画系列文章分为三部分:基础原理和核心概念.系统动画组件.8篇自定义动画案例,共17篇. 动画核心概念 在开发App的过程中,自定义动画必不可少,Flutter 中想要自定义动画,首先要理解 Flutter 动画实现的基本原理及相关概念. 第1-4篇介绍了 Flutter 动画中最重要的三个概念以及三者之间的关系: AnimationController:动画控制器,控制动画的播放.停止等.继承自Animation< double >,是一个特殊的Animation对…
前两天网友在群里说起了Flutter,就了解了一下,在手机上跑了它的demo,直接就被打动了. 虽然网上有很多教程,但真正开始的时候,还是会碰到很多坑.下面详细的讲解Flutter + Android Studio开发环境搭建. Flutter社区和资源传送门 字体图标生成 http://fluttericon.com/ Flutter中文网  https://flutterchina.club Flutter中文开发者论坛 http://flutter-dev.cn/ Flutter|Dart…
1.创建 Flutter 工程 flutter create <output directory> D:\notebook\flutter\projects\ui_tutorial\layout>flutter create layout_app Creating project layout_app... layout_app\.gitignore (created) layout_app\.idea\libraries\Dart_SDK.xml (created) layout_ap…
原文地址: Flutter学习(9)--Flutter插件实现(Flutter调用Android原生) | Stars-One的杂货小窝 最近需要给一个Flutter项目加个apk完整性检测,需要去拿到当前安装apk的md5数值,由于Flutter中无法实现,需要调用原生Android代码才能实现,于是花了些时间研究了下插件的实现,特此记录 步骤说明 1.打开android文件夹 flutter中有个ios和android的文件夹,分别对应的Android和Ios的原生代码 我们想要实现FLut…
现在Flutter的路由效果已经非常不错了,能满足大部分App的需求,但是谁不希望自己的App更酷更炫那,下面介绍几个酷炫的路由动画. 其实路由动画的原理很简单,就是重写并继承PageRouterBuilder这个类里的transitionsBuilder方法. 不过这个方法还是有很多写法的,通过写法的不同,产生的动画效果也有所不同. 1.渐隐渐现的动画效果 先编写一个主入口方法,还是最简单的格式,只不过home属性,使用的RouterFirst的组件是我们自定义的,需要我们再次编写.入口文件的…
作者 | 弗拉德 来源 | 弗拉德(公众号:fulade_me) Lottie动画 在移动开发中总是需要展示一些动画特效,作为程序员的我们并不是很擅长用代码做动画,即便是有些动画可以实现,在跨平台的过程中也会因为API的差异性导致动画在各个平台中展示的有差异. 所以为了释放程序员的双手,不再陷入写动画调参数的苦恼,Airbnb开源了一款专门用于跨平台的动画解决方案:Lottie. Lottie可以解析使用Bodymovin导出为json的Adobe After Effects动画,并在移动端和W…
小菜前几天整理了以下 Canvas 的部分方法,今天小菜继续学习 Canvas 第二部分. drawXXX drawShadow 绘制阴影 drawShadow 用于绘制阴影,第一个参数时绘制一个图形 Path,第二个是设置阴影颜色,第三个为阴影范围,最后一个阴影范围是否填充满: canvas.drawShadow( Path() ..moveTo(30.0, 30.0)..lineTo(120.0, 30.0) ..lineTo(120.0, 60.0)..lineTo(30.0, 60.0)…
小菜最近在学习自定义 View,刚了解了一下 Paint 画笔的神奇之处,现在学习一下 Canvas 画布的神秘之处.Flutter 提供了众多的绘制方法,小菜接触不深,尽量都尝试一下. Canvas 画布 drawColor 绘制背景色 drawColor 需要传入两个参数,第一个为色值,第二个为混合模式,有众多混合模式供选择,但注意使用混合模式后会与绘制其上的其他 View 颜色混合像素. canvas.drawColor(Colors.pinkAccent, BlendMode.srcIn…