FadeTransition class
ウィジェットの不透明度(opacity)をアニメーション化します。
Flutter has a powerful animations engine
for adding motion and effects to your Flutter app.
Flutterには Flutterアプリに 動きと効果を与えるための強力なアニメーションエンジンがあります。
But sometimes, you just need to do something simple–
like fading in a widget.
でも シンプルなことだけが 必要なときもあります
例えばウィジェットの フェードインなどです。
And Flutter has you covered.
Flutter にお任せください。
Flutter has a bunch of transitions ready to drop into your Flutter app.
Flutter には すぐにFlutterアプリに 落とし込めるトランジションが沢山あります。
Let’s take a look at FadeTransition.
FadeTransitonを見てみましょう。
FadeTransition lets you fade a widget in and out.
FadeTransitonで ウィジェットの フェードイン/アウトができます。
FadeTransition(
opacity: animation,
child: Text(widget.text);
It takes a child and an animation.
FadeTransitionはchildと animation を引数に取ります。
But where does the animation come from?
このanimationは どこから来たのでしょう。
Well, first, we create an AnimationController
to set the duration,
まず AnimationControllerを作成し、durationを設定します。
final controller = AnimationController(
vsync : this,
duration : Duration(seconds: 2,),
);
and then we create an animation– giving the start and end opacity values
and animating via the controller.
次にanimationを作成します
透過度の開始値と終了値を与え、コントローラ経由でアニメートします。
final animation = Tween(
begin: 0.0,
end: 1.0,
).animate(controller);
Finally, we start the animation by calling forward on the controller.
最後にcontrollerのforwardメソッドを呼び出し、アニメーションを開始します。
controller.forward();
// lib/main.dart
import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() => runApp(MaterialApp(home: MyFadeIn(
child:LogoWidget(),
)));
class LogoWidget extends StatelessWidget {
// Leave out the height and width so it fills the animating parent
Widget build(BuildContext context) => Container(
margin: EdgeInsets.symmetric(vertical: 10),
child: FlutterLogo(
size:400,
),
);
}
class MyFadeIn extends StatefulWidget {
final Widget child;
const MyFadeIn({Key key, @required this.child}) : super(key: key);
@override
_MyFadeInState createState() => _MyFadeInState();
}
class _MyFadeInState extends State<MyFadeIn>
with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation _animation;
String currentState = '';
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration:Duration(seconds:2,),
);
_animation = Tween(
begin:0.0,
end:1.0,
).animate(_controller)
..addStatusListener((status) {
if (status == AnimationStatus.forward) {
setState((){
currentState = '開始';
});
} else if (status == AnimationStatus.completed) {
setState((){
currentState = '終了';
});
}
});;
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
_controller.forward();
return MaterialApp(
home: Scaffold(
appBar:AppBar(),
body: Center(
child: Column(
children: [
Text(currentState,
style:TextStyle(
fontSize:50,
),
),
FadeTransition(
opacity: _animation,
child: widget.child,
),
],
),
),
),
);
}
}
参考