flutter 动画
AnimatedCrossFade
AnimatedCrossFade让俩个子widget 交替淡入淡出。
class AnimatedCrossFade1 extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return new AnimatedCrossFade2();
}
} class AnimatedCrossFade2 extends State<AnimatedCrossFade1> {
var _first = false; @override
Widget build(BuildContext context) {
new Timer(new Duration(seconds: 3), () {
setState(() {
_first = !_first;
});
});
return AnimatedCrossFade(
duration: const Duration(seconds: 3),
firstChild:
const FlutterLogo(style: FlutterLogoStyle.horizontal, size: 100.0),
secondChild:
const FlutterLogo(style: FlutterLogoStyle.stacked, size: 100.0),
crossFadeState:
_first ? CrossFadeState.showFirst : CrossFadeState.showSecond,
);
}
}
AnimatedBuilder
AnimatedBuilder构建动画最常用的控件。AnimatedBuilder 由 animation,child,builder 三个参数。
class AnimatedBuilder1 extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new AnimatedBuilder2();
}
}
class AnimatedBuilder2 extends State<AnimatedBuilder1>
with SingleTickerProviderStateMixin {
@override
Widget build(BuildContext context) {
var controller =
AnimationController(duration: Duration(seconds: 3), vsync: this)
..forward(); return new AnimatedBuilder(
animation: controller,
child: Container(width: 200.0, height: 200.0, color: Colors.green),
builder: (BuildContext context, Widget child) {
print(controller.value);
return Transform.scale(
scale: controller.value,
child: child,
);
});
}
}
当创建一个AnimationController时,需要传递一个vsync
参数,存在vsync
时会防止屏幕外动画(译者语:动画的UI不在当前屏幕时)消耗不必要的资源。 通过将SingleTickerProviderStateMixin添加到类定义中,可以将stateful对象作为vsync
的值。你可以在GitHub的animate1中看到这个例子 。
2.3 DecoratedBoxTransition
DecoratedBoxTransition 装饰widget边界的动画。核心是Animation<Decoration>对象和Child。Animation<Decoration>通过DecorationTween.animate(controller) 得到。
属性:position 代表绘制边框是在widget前还是后。
demo如下:
class DecoratedBoxTransition1 extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new DecoratedBoxTransition2();
}
} class DecoratedBoxTransition2 extends State<DecoratedBoxTransition1>
with SingleTickerProviderStateMixin {
@override
Widget build(BuildContext context) {
DecorationTween decorationTween = DecorationTween(
begin: BoxDecoration(
color: Colors.blue,//子widget背景颜色
border: Border.all(
color: Colors.blue,//边界颜色
style: BorderStyle.solid,
width: 1.0,
),
borderRadius: BorderRadius.all(Radius.circular(20)),
shape: BoxShape.rectangle,
boxShadow: const <BoxShadow>[
BoxShadow(
color: Colors.amberAccent,
blurRadius: 5.0,
spreadRadius: 5.0,
)
],
),
end: BoxDecoration(
color: Colors.green,
border: Border.all(
color: Colors.green,
style: BorderStyle.solid,
width: 1.0,
),
shape: BoxShape.rectangle,
boxShadow: const <BoxShadow>[
BoxShadow(
color: Colors.blueGrey,
blurRadius: 5.0,
spreadRadius: 5.0,
)
],
borderRadius: BorderRadius.all(Radius.circular(30)),
),
);
var controller =
AnimationController(duration: Duration(seconds: 3), vsync: this)
..forward();
Animation<Decoration> d = decorationTween.animate(controller);
return new DecoratedBoxTransition(
decoration: d,
position: DecorationPosition.background,
child: new Container(
width: 200,
height: 200,
));
}
}
ps: DecoratedBoxTransition 的child 背景色最好是无色的。不然会影响效果
2.3 FadeTransition 淡入淡出动画
FadeTransition 淡入淡出动画。opacity 属性需要指定一个Animation<double>,child属性指定widget。
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: new FadeTransition(
opacity: new AnimationController(
duration: Duration(seconds: 3),
vsync: this,
)..repeat(),
child: FlutterLogo(style: FlutterLogoStyle.horizontal, size: 100.0),
alwaysIncludeSemantics: true,
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
2.4 PositionedTransition 定位动画
PositionedTransition动画很麻烦,主要由俩个重要的属性:
- rect
规定子widget 离 Stack边距的值。由RelativeRectTween.animate(AnimationController)获得。 - child
顾名思义将被施加动画的widget
ps:PositionedTransition 必须作为Stack 控件的子View,否则就会报错。
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key); final String title; @override
_MyHomePageState createState() => _MyHomePageState();
} class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{
@override
Widget build(BuildContext context) { Animatable animatable= RelativeRectTween(begin: new RelativeRect.fromLTRB(75.0, 75, 75, 75.0),
end: new RelativeRect.fromLTRB(100.0, 100.0, 100.0, 100.0),
);
Animation frontRelativeRect = animatable.animate(new AnimationController(
duration: Duration(seconds: 3),
vsync: this,
)..repeat()); return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Stack(
alignment: Alignment.center,
fit: StackFit.loose,
children: <Widget>[ Container(
width: 200,
height: 200,
color: Colors.blue),
Container(
width: 100,
height: 100,
color: Colors.red,
), PositionedTransition(
rect: frontRelativeRect,
child: Container(
width: 50,
height: 50,
color: Colors.orange,
) ,
)
],
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
Stack 控件
Stack层叠控件。其childWidget 可以层叠到一起,层叠顺序:Widget越后创建,层级越靠上
可以控制没有定位的childWidget的布局策略。
可以控制没有定位的childWidget的布局策略
Stack({
this.alignment = AlignmentDirectional.topStart,
this.textDirection,
this.fit = StackFit.loose,
this.overflow = Overflow.clip,
List<Widget> children = const <Widget>[],
})
alignment
决定如何去对齐没有定位(没有使用Positioned)或部分定位的子widget。所谓部分定位,在这里特指没有在某一个轴上定位:left、right为横轴,top、bottom为纵轴,只要包含某个轴上的一个定位属性就算在该轴上有定位textDirection
和Row、Wrap的textDirection功能一样,都用于决定alignment对齐的参考系即:textDirection的值为TextDirection.ltr,则alignment的start代表左,end代表右;textDirection的值为TextDirection.rtl,则alignment的start代表右,end代表左。fit
此参数用于决定没有定位的子widget如何去适应Stack的大小。StackFit.loose表示使用子widget的大小,StackFit.expand表示扩伸到Stack的大小。overflow
此属性决定如何显示超出Stack显示空间的子widget,值为Overflow.clip时,超出部分会被剪裁(隐藏),值为Overflow.visible 时则不会。
2.5 RotationTransition 旋转动画
旋转动画RotationTransition。核心属性child和turns。
class RotationTransitionState extends State<RotationTransition1> with SingleTickerProviderStateMixin {
@override
Widget build(BuildContext context) {
return new RotationTransition(
child: Container(
width: 100,
height: 100,
color: Colors.orange,
),
turns: AnimationController(
duration: Duration(seconds: 1),
vsync: this,
lowerBound: 0,
upperBound: 0.1,
)..forward(),
);
}
}
2.6 ScaleTransition缩放动画
ScaleTransition 核心属性child 和scale。scale类型是Animation<double>。Animation<double>可以根据Tween.animate 生成。
demo:是由1缩小到0
class ScaleTransitionState extends State<ScaleTransition1>
with SingleTickerProviderStateMixin {
@override
Widget build(BuildContext context) {
Animation<double> t =
Tween(begin: 1.0, end: 0.0).animate(AnimationController(
duration: Duration(seconds: 3),
vsync: this,
)..forward()); return new ScaleTransition(
child: Container(
width: 100,
height: 100,
color: Colors.orange,
),
scale: t,
);
}
}
2.6 SlideTransition移动动画
SlideTransition 动画最重要的属性是position和child。position是Animation<Offset>。可以通过Tween.animate 生成。
class SlideTransition1State extends State<SlideTransition1>
with SingleTickerProviderStateMixin {
@override
Widget build(BuildContext context) {
var t = Tween<Offset>(
begin: const Offset(0.0, 2.0),
end: const Offset(0.0, 1.0),
).animate(AnimationController(
duration: Duration(seconds: 3),
vsync: this,
)..forward()); return new SlideTransition(
child: Container(
width: 100,
height: 100,
color: Colors.orange,
),
position: t,
);
}
}
end: const Offset(0.0, 1.0) 表示的意思是:动画结束后,x轴坐标不变,y轴坐标是(1+1)* y
flutter 动画的更多相关文章
- 转:Flutter动画二
1. 介绍 本文会从代码层面去介绍Flutter动画,因此不会涉及到Flutter动画的具体使用. 1.1 Animation库 Flutter的animation库只依赖两个库,Dart库以及phy ...
- 转:Flutter动画一
1. 动画介绍 动画对于App来说,非常的重要.很多App,正是因为有了动画,所以才会觉得炫酷.移动端的动画库有非常的多,例如iOS上的Pop.web端的animate.css.Android端的An ...
- Flutter 动画详解(一)
本文主要介绍了动画的原理相关概念,对其他平台的动画做了一个简要的梳理,并简要的介绍了Flutter动画的一些知识. 1. 动画介绍 动画对于App来说,非常的重要.很多App,正是因为有了动画,所以才 ...
- 《Flutter 动画系列一》25种动画组件超全总结
动画运行的原理 任何程序的动画原理都是一样的,即:视觉暂留,视觉暂留又叫视觉暂停,人眼在观察景物时,光信号传入大脑神经,需经过一段短暂的时间,光的作用结束后,视觉形象并不立即消失,这种残留的视觉称&q ...
- 《Flutter 动画系列》组合动画
老孟导读:在前面的文章中介绍了 <Flutter 动画系列>25种动画组件超全总结 http://laomengit.com/flutter/module/animated_1/ < ...
- Flutter 动画使用
旋转动画 透明度变换动画 在Android中,可以通过View.animate()对视图进行动画处理,那在Flutter中怎样才能对Widget进行处理 在Flutter中,可以通过动画库给wid ...
- Flutter 动画鼻祖之CustomPaint
老孟导读:CustomPaint可以称之为动画鼻祖,它可以实现任何酷炫的动画和效果.CustomPaint本身没有动画属性,仅仅是绘制属性,一般情况下,CustomPaint会和动画控制配合使用,达到 ...
- flutter 动画双指放大图片
class GridAnimation extends StatefulWidget { @override State<StatefulWidget> createState() { r ...
- flutter 动画 practice
import 'package:flutter/material.dart'; import 'dart:io'; import 'dart:async'; main() => runApp(M ...
随机推荐
- tomcat启动报错java.lang.OutOfMemoryError:PermGen space解决办法
tomcat启动错误提示: 严重: Error waiting for multi-thread deployment of WAR files to completejava.util.concur ...
- 2019_软工实践_Beta(1/5)
队名:955 组长博客:点这里! 作业博客:点这里! 组员情况 组员1(组长):庄锡荣 过去两天完成了哪些任务 文字/口头描述 检测网站不合理的地方,给组员定下相应时间进度的安排 展示GitHub当 ...
- RUN vs CMD vs ENTRYPOINT
参考:https://www.ibm.com/developerworks/community/blogs/132cfa78-44b0-4376-85d0-d3096cd30d3f/entry/RUN ...
- DELPHI7 ADO二层升三层新增LINUX服务器方案
DELPHI7 ADO二层升三层新增LINUX服务器方案 引子:笔者曾经无数次在用户的LINUX服务器上创建一个WINDOWS虚拟机,用于运行自己DELPHI开发中间件. 现在再不需要如此麻烦了. 咏 ...
- js - 总结一下条件语句优化
[笔记] // 简单的语句用三目运算符也可以的(除了需要return的) 1 == 1 ? console.log('执行了...1') : console.log(); 1 == 2 ? conso ...
- HIDL概述【转】
本文转载自:https://blog.csdn.net/u013357557/article/details/84561457 HIDL背景Treble 是 Google Android 团队的一项重 ...
- Single Cell Genomics Day: A Practical Workshop
干货满满! Single Cell Genomics Day: A Practical Workshop
- activiti 术语 国际化文件
activiti-explorer editor-app 国际化文件 - 大强的博客 - CSDN博客https://blog.csdn.net/daqiang012/article/details/ ...
- linux命令(11)环境变量:查看和添加环境变量
linux 环境变量系统: 系统级别:/etc/profile./etc/bashrc/ ./etc/environment 用户级别:~/.profile.~/.bashrc. ~/.bash_pr ...
- Nginx - 代理后端通过域名访问
目录- 前言- Nginx 根据域名反向代理- Nginx proxy_pass 关于 '/' 的作用 1. 前言 接到一个需求,通过nginx 代理互联网上某一个页面,刚开始的时候觉得很简单的,直接 ...