タグ: animation

投稿日:

2021/3/18 : Flutter : animationsパッケージのOpenContainerウィジェットを使ってみる。

 

null safety article

https://pub.dev/packages/animations/example

pub.devのanimationsパッケージのページにサンプルコード(へのリンク)がありますが、少し複雑なので、もう少し簡単なもので使ってみて、利用方法を整理したいと思います。

スタート地点。

https://pub.dev/packages/animations/install

↑の通りanimationsパッケージの依存関係をpubspec.yamlで宣言しましょう。

//main.dart
import 'package:flutter/material.dart';
import 'package:animations/animations.dart';
//↑animationsパッケージが必要なのでインポートする。
void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions:
…
投稿日:

2021/3/15 : Flutter : Fade a widget in and outの訳

 

null safety article

Fade a widget in and out

UI開発者は、多くの場合、画面上の要素を表示および非表示にする必要があります。

ただし、要素を画面の内外にすばやくポップすると、エンドユーザーに違和感を与える可能性があります。

代わりに、不透明度(opacity)アニメーションを使用して要素をフェードインおよびフェードアウトして、スムーズなエクスペリエンスを作成します。

AnimatedOpacityウィジェットは、それが簡単に不透明度(opacity)アニメーションを行うことが可能となります。このレシピでは、次の手順で進めていきます。

1.フェードイン、フェードアウトさせる対象となるボックスを定義します。

2.StatefulWidgetを定義します。

3.フェードイン/アウトを切り替えるボタンを用意します。

4.ボックスをフェードイン/アウトさせます。

1. Create a box to fade in and out

まず、フェードインおよびフェードアウトするものを作成します。この例では、画面に緑色のボックスを描画します。

Container(
  width: 200.0,
  height: 200.0,
  color: Colors.
…
投稿日:

2021/3/12 Flutter : Staggered animationsのまとめ

Staggered animations

What you’ll learn

  • 千鳥アニメーションは、連続したアニメーションまたは重なり合うアニメーションで構成されます。

  • 千鳥アニメーションを作成するには、複数のAnimationオブジェクトを使用します。

  • 1つのAnimationControllerがすべてのAnimationを制御します。

  • Each Animation object specifies the animation during an Interval.工事中🏗

  • アニメーション化したいプロパティに対して、Tweenをつくります。

Terminology:Tweenについて知らない場合、Animations in Flutter tutorialをご覧ください。

 

 

 

 

参考

Staggered animations …

投稿日:

2021/3/11 : Flutter : TweenAnimationBuilderについて

TweenAnimationBuilderを使ってみる。

 

とりあえず動くサンプル

import 'package:flutter/material.dart';

void main() {
  return runApp(
    MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:TweenAnimationBuilder(
        curve:Curves.slowMiddle, //←curveを指定できる。
        duration:Duration(seconds:4),
        tween:ColorTween(begin:Colors.white,end:Colors.pinkAccent,),
        builder:(BuildContext _,Color value,Widget child){
          return ColorFiltered(
            child:Image.asset('assets/images/diamond.png'),
…
投稿日:

2021/2/9 Implicit animations codelab(コードラボ)の訳

implicit animations(暗黙的なアニメーション)コードラボへようこそ。ここでは、特定のプロパティセットのアニメーションを簡単に作成できるFlutterウィジェットの使用方法を学習します。

このコードラボを最大限に活用するには、次の基本的な知識が必要です。

  • Flutterアプリの作り方。
  • StatefulWidget(ステートフルウィジェット)の使用方法。

このコードラボは、次の資料をカバーしています。

  • AnimatedOpacityを使ったfade-in効果の実装方法
  • AnimatedContainerを使ってサイズ、色、マージンをアニメーション化する方法
  • implicit animationsのまとめと使用法、テクニック

このコードラボを完了するための推定時間：15〜30分。

What are implicit animations?

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

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

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

implicit animationsでは、ターゲット値を設定することでウィジェットプロパティをアニメーション化できます。

そのターゲット値が変更されるたびに、ウィジェットはプロパティを古い値から新しい値にアニメーション化します。 このように、暗黙的なアニメーションは、利便性のために制御を交換します。

つまり、implicit animationsがアニメーション効果を管理するため、開発者が管理用コードを記述する必要がありません。

Example: Fade-in text effect

次の例は、AnimatedOpacityと呼ばれる暗黙的にアニメーション化されたウィジェットを使用して既存のUIにフェードイン効果を追加する方法を示しています。 この例は、アニメーションコードなしで始まります。これは、以下を含むMaterialAppのホーム画面で構成されています。

  • フクロウの写真。
  • クリックしても何もしない1つの[詳細を表示]ボタン。
  • 写真のフクロウの説明文。

Fade-in (starter

…
投稿日:

2021/2/7 SizeTransition classの訳

SizeTransition class

独自のサイズをアニメーション化し、子をクリップして位置合わせします。

SizeTransitionは、axisの値に応じて、幅または高さのいずれかをアニメーション化するClipRectとして機能します。

軸に沿った子ウィジェットの配置は、axisAlignmentによって指定されます。

ほとんどのウィジェットと同様に、SizeTransitionは指定された制約に準拠するため、サイズを変更できるコンテキストに配置してください。

たとえば、固定サイズのコンテナに配置すると、SizeTransitionはサイズを変更できず、何もしないように見えます。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
…
投稿日:

2021/2/7 FadeTransition – Flutter 今週の Widgetの訳

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.
でも シンプルなことだけが 必要なときもあります
…
投稿日:

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

…
投稿日:

2020/10/25 Flutter : Animate the properties of a containerの訳

 

Containerクラスは、幅、高さ、背景色、パディング、境界線などの特定のプロパティを持つウィジェットを作成するための便利な方法を提供します。

単純なアニメーションでは、多くの場合、これらのプロパティを時間の経過とともに変更する必要があります。

たとえば、背景色を灰色から緑色にアニメーション化して、アイテムがユーザーによって選択されたことを示すことができます。

これらのプロパティをアニメーション化するために、FlutterにはAnimatedContainerウィジェットが用意されています。

コンテナウィジェットと同様に、AnimatedContainerを使用すると、幅、高さ、背景色などを定義できます。

ただし、AnimatedContainerが新しいプロパティで再構築されると、古い値と新しい値の間で自動的にアニメーション化されます。 Flutterでは、これらのタイプのアニメーションは「暗黙のアニメーション」と呼ばれます。

このページでは、AnimatedContainerを使用して、ユーザーがボタンをタップしたときに、サイズ、背景色、および境界線の半径をアニメーション化する方法について次の手順で説明していきます。

  1. デフォルトのプロパティの値でStatefulWidgetを生成する。
  2. (1)で用いたプロパティを使ってAnimatedContainerウィジェットを生成する
  3. 新しいプロパティの値を用いてアニメーションをスタートさせる。

1. Create a StatefulWidget with default properties

まず、StatefulWidgetクラスとStateクラスを作成します。

カスタムStateクラスを使用して、時間の経過とともに変化するプロパティを定義します。

この例では、幅、高さ、色、境界線の半径が含まれています。 各プロパティのデフォルト値を定義することもできます。

これらのプロパティはカスタムStateクラスに属しているため、ユーザーがボタンをタップしたときに更新できます。

class AnimatedContainerApp extends StatefulWidget {
  @override
  _AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}

class _AnimatedContainerAppState extends
…
投稿日:

2020/10/25 Flutter : アニメーションチュートリアルの訳

 

このチュートリアルでは、Flutter で明示的なアニメーションを作成する方法を示します。アニメーション ライブラリで重要な概念、クラス、メソッドをいくつか紹介した後、5 つのアニメーションの例を紹介します。この例は互いに構築され、アニメーション ライブラリのさまざまな側面を紹介します。

Flutter SDK には、フェードトランジション、サイズトランジション、スライドトランジションなどの暗黙的なトランジション アニメーションも用意されています。これらの単純なアニメーションは、開始点と終了点を設定することによってトリガーされます。ここで説明する明示的なアニメーションよりも実装が簡単です。

Essential animation concepts and classes

ポイントは?

  • AnimationクラスはFlutterのアニメーションライブラリのコアクラスであり、アニメーションを動かすために使われる値を補間します。
  • Animationオブジェクトはアニメーションの現在の状態(state)を把握しています。(例えば、スタートしているか、停止しているか、順方向の再生か、逆方向か?など。)しかし、スクリーン上でどのように表示されているかは把握していません。
  • AnimationControllerはAnimationクラスを管理します。
  • CurvedAnimationクラスは、非リニアカーブのアニメーション進行を定義します。
  • Tweenは、アニメーション化されているオブジェクトによって使用されるデータの範囲を補間します。 たとえば、Tweenは、赤から青、または0から255への補間を定義することができます。
  • リスナーとStatusListenerを使用して、アニメーションの状態の変化を監視します。
Flutterのアニメーションシステムは、Animationオブジェクトに基づいています。 ウィジェットは、現在の値を読み取って状態の変化を聞くことにより、これらのアニメーションをビルド関数に直接組み込むことができます。または、他のウィジェットに渡す、より複雑なアニメーションの基礎としてアニメーションを使用することもできます。

Animation<double>

Flutterでは、Animationオブジェクトはスクリーン上の表示は感知しません。Animatinクラスは、「現在値」と「ステート」(dismissed(開始時点)かcompleted(終了時点))を把握する抽象クラスです。

最もよく使われるanimationの型はAnimation<double>型です。

Animationオブジェクトは、特定の期間(duration)にわたって2つの値の間で補間された数値を順次生成します。

Animationオブジェクトの出力は、線形、曲線(非線形)、階段関数、またはその他の考案可能なマッピングである可能性があります。

線形、曲線など、予めFlutterで用意されている出力を使うこともできるし、独自に出力を定義することもできる、ということ。…