Contents
Implicit animations
Flutterのアニメーションライブラリを使えば、UIでウィジェットのモーションを追加し、視覚効果を作成できます。
アニメーションライブラリの一部は、アニメーションを管理するウィジェットの品揃えです。
これらのウィジェットは、まとめてimplicit animationsまたはimplicitly animated widgetsと呼ばれ、実装するImplicitlyAnimatedWidgetクラスから名前が付けられます。
次の一連のリソースは、Flutterのimplicit animationsについて学ぶための多くの方法を提供します。
Documentation
コードに飛び込んでください！ このコードラボでは、インタラクティブな例と段階的な手順を使用して、暗黙的なアニメーションの使用方法を説明します。
Flutter cookbookのコンテンツです。implicitly animated widgetであるAnimatedContainerの使い方を学ぶためのステップバイステップレシピです。
ImplicitlyAnimatedWidgetAPI page
ImplicitlyAnimatedWidgetクラスを継承した全てのクラスについて。
Flutter in Focus videos
Flutter in Focusビデオは、すべてのFlutter開発者が上から下まで知る必要のあるテクニックをカバーする実際のコードを含む5〜10分のチュートリアルを特徴としています。
次のビデオは、implicit animationsに関連するトピックをカバーしています。
The Boring Show
Boring showを見て、GoogleエンジニアがFlutterでアプリを最初から作成するのをフォローしてください。
次のエピソードでは、ニュースアグリゲーターアプリでのimplicit animationsの使用について説明します。
Widget of the Week videos
AnimatedOpacity
AnimatedPadding
sample1-1(AnimatedPaddingのサンプル)
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'わかりやすい'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
double padValue=5.0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SomeCont(color:Colors.greenAccent,pad:padValue),
SomeCont(color:Colors.red,pad:padValue),
SomeCont(color:Colors.blueAccent,pad:padValue),
SomeCont(color:Colors.yellowAccent,pad:padValue),
SizedBox(height:30,),
RaisedButton(
child:Text('Push'),
onPressed:(){
setState((){
padValue=30.0;
});
},
),
],
),
);
}
}
class SomeCont extends StatelessWidget {
SomeCont({this.color,this.pad});
final Color color;
double pad;
@override
Widget build(BuildContext context) {
return AnimatedPadding(
padding: EdgeInsets.all(pad),
duration:Duration(seconds:1),
child: Container(
color:color,
width:200,
height:50,
//padding:EdgeInsets.all(10.0),
),
);
}
}
AnimatedPositioned
AnimatedSwitcher
参考
https://flutter.dev/docs/development/ui/animations/implicit-animations
公式ドキュメントにあるImplicit animationsサンプルのリンクをまとめる。
(1)Fade a widget in and out(AnimatedOpacity)
Implicit animationの作り方
(1)StatefulWidgetのstateとして、アニメーションの値を保持する状態変数
_visibleを用意する。
(2)AnimatedOpacityのopacityプロパティの値を_visibleによって決定するように設定する。
(3)ボタンのonPressedコールバックで_visibleを切り替える(変更する)。
これでopacityが変わるたびに自動的にアニメーション化してくれる。
(2)AnimatedSwitcher
Implicit animationの作り方
(1)StatefulWidgetのstateとして、アニメーションの値を保持する状態変数container( & keyCount)を用意する。
(2)AnimatedSwitcherのchildプロパティに(1)で用意した状態変数containerを設定する。
(3)ボタンのonPressedコールバックでcontainerを切り替える(変更する)。
これでcontainerが変わるたびに自動的にアニメーション化してくれる。
(3)AnimatedPositioned
まずただのPositionedウィジェットについてはこちら。
PositionedもAnimatedPositionedもStackの子ウィジェットとして使うもの。
this.left, this.top, this.right, this.bottom, this.width, this.height,
などのプロパティを指定することでStackの中の位置、サイズを決定できる。
AnimatedPositionedの場合プロパティの変化時にアニメーションで変化させてくれる、ということ。
Implicit animationの作り方
(1)StatefulWidgetのstateとして、アニメーションの値を保持する状態変数
topPosition,
leftPostion
を用意する。
(2)AnimatedPositionedのtop,leftプロパティに、(1)で用意した状態変数
topPosition,
leftPostion
を設定する。
(3)子ウィジェット(Container)がタップされた時のコールバックで
topPosition,
leftPostion
を変更する。
これで状態が変わるたびに自動的にアニメーション化してくれる。