2020/10/25 Flutter : Implicit animations、サンプルなど

Implicit animations

Flutterのアニメーションライブラリを使えば、UIでウィジェットのモーションを追加し、視覚効果を作成できます。

アニメーションライブラリの一部は、アニメーションを管理するウィジェットの品揃えです。

これらのウィジェットは、まとめてimplicit animationsまたはimplicitly animated widgetsと呼ばれ、実装するImplicitlyAnimatedWidgetクラスから名前が付けられます。

次の一連のリソースは、Flutterのimplicit animationsについて学ぶための多くの方法を提供します。



Documentation

Implicit animations codelab

コードに飛び込んでください! このコードラボでは、インタラクティブな例と段階的な手順を使用して、暗黙的なアニメーションの使用方法を説明します。


AnimatedContainer sample

Flutter cookbookのコンテンツです。implicitly animated widgetであるAnimatedContainerの使い方を学ぶためのステップバイステップレシピです。


ImplicitlyAnimatedWidget API 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

それぞれが1つの特定のウィジェットの重要な機能を示す短いアニメーションビデオの毎週のシリーズ。
約60秒で、ウィジェットがどのように機能するかについてのデモとともに、各ウィジェットの実際のコードが表示されます。 次のWidgetof the Weekビデオは、implicit animations化されたウィジェットをカバーしています。

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

を変更する。

これで状態が変わるたびに自動的にアニメーション化してくれる。


 

 

コメントを残す

メールアドレスが公開されることはありません。