转载一个看到的浅尝flutter中的动画(淡入淡出) https://www.jianshu.com/p/f5ee8382bb73
main.dart
import 'package:flutter/material.dart';
void main() => runApp( MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Navigation',
initialRoute: '/',
routes: <String, WidgetBuilder>{
'/': (BuildContext context) => FadeDemo(),
},
);
}
}
class FadeDemo extends StatefulWidget {
@override
createState() => new LogoFadeState();
}
class LogoFadeState extends State<FadeDemo> {
// 初始opacityLevel为1.0为可见状态,为0.0时不可见
double opacityLevel = 1.0;
_changeOpacity() {
//调用setState() 根据opacityLevel当前的值重绘ui
// 当用户点击按钮时opacityLevel的值会(1.0=>0.0=>1.0=>0.0 ...)切换
// 所以AnimatedOpacity 会根据opacity传入的值(opacityLevel)进行重绘 Widget
setState(
() => opacityLevel = opacityLevel == 0 ? 1.0 : 0.0
);
}
@override
Widget build(BuildContext context) {
return new Column(//一个Column布局,主轴为垂直方向,起点在上沿。
mainAxisAlignment: MainAxisAlignment.spaceAround,//子组件在主轴上均匀分布在容器内,两边留有一半的间隔空间。
children: [
new AnimatedOpacity(// 使用一个AnimatedOpacity Widget
opacity: opacityLevel,
duration: new Duration(seconds: 1),//过渡时间:1
child:new Container(
padding:const EdgeInsets.only(right:20.0,bottom:15.0,left:20.0),//内边距
child:new Text("和React Native一样,Flutter也提供响应式的视图,Flutter采用不同的方法避免由JavaScript桥接器引起的性能问题,即用名为Dart的程序语言来编译。Dart是用预编译的方式编译多个平台的原生代码,这允许Flutter直接与平台通信,而不需要通过执行上下文切换的JavaScript桥接器。编译为原生代码也可以加快应用程序的启动时间。实际上,Flutter是唯一提供响应式视图而不需要JavaScript桥接器的移动SDK,这就足以让Fluttter变得有趣而值得一试,但Flutter还有一些革命性的东西,即它是如何实现UI组件的?",
style: new TextStyle(
fontSize: 12.0,
decoration: TextDecoration.none,
),) ,)
),
new RaisedButton(
child:new Container(
child: new Text("点我试试"),
) ,
onPressed: _changeOpacity,//添加点击事件
),
],
);
}
}
flutter 淡出
main.dart
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:english_words/english_words.dart';
import 'home.dart';
void main() => runApp( MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Navigation',
initialRoute: '/fadeApp',
routes: <String, WidgetBuilder>{
'/': (BuildContext context) => Home(),
'/fadeApp': (BuildContext context) => FadeAppTexst(),
},
);
}
}
class FadeAppTexst extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "fade demo",
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: new MyFadeTest(title: "fade demo"),
);
}
}
class MyFadeTest extends StatefulWidget {
MyFadeTest({Key key, this.title}) : super (key: key);
final String title;
@override
_MyFadeTest createState() => _MyFadeTest();
}
class _MyFadeTest extends State<MyFadeTest> with TickerProviderStateMixin{
AnimationController controller;
CurvedAnimation curve;
@override
void initState() {
controller = new AnimationController(duration: const Duration(milliseconds: 1000), vsync: this);
curve = new CurvedAnimation(parent: controller, curve: Curves.easeIn);
}
@override
Widget build (BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: Center(
child: Container(
child: FadeTransition(
opacity: curve,
child: new Text(
"乌拉乌拉"
),
),
),
),
floatingActionButton: FloatingActionButton(
tooltip: "fade",
child: new Icon(Icons.brush),
onPressed: () {
controller.forward();
},
),
);
}
}