フラッタースプラッシュ画面のアニメーションケースAnimationController

しばしば美しいスタートページを参照してください、APPを開き、スタートページは、スプラッシュ画面のアニメーションとして知られています。それは、ゼロからアニメーションと透明性の勾配を持っています。その後、画像は完成を示し、それは、ユーザ操作可能なページにジャンプします。

AnimationController

AnimationControllerさAnimationサブクラス、それを制御することができAnimation、それは、例えば、アニメーションを制御するアニメーションの実行時間を制御することであることを意味します。

ここでは、2つのパラメータを持っています：

vsync:this ：垂直同期の設定、これは使用することができます。
duration ：アニメーションの持続時間は、この使用することができますseconds秒を、あなたも使用することができますmillisecondsミリ秒、作業は、多くの場合、ミリ秒、秒、またはすぎるためラフに使用されています。

コードのセクションを見て、コードは、典型的なアプリケーションのアニメーションを制御することです。

_controller = AnimationController（VSYNC：この、時間：時間（ミリ秒：3000））。// 3000毫秒 
_animation =ツイーン（開始：0.0、エンド：1.0）.animate（_controller）。

このコードは、コントローラは、このアニメーションコントローラは、アニメーションの実行時間が3000ミリ秒で制御し、アニメーションが設けられていることを意味します。その後、我々はアニメーションの規則アニメーションコントローラを使用して、アニメーションを設定します。

animation.addStatusListener

animation.addStatusListenerアニメーションのイベントリスナー、それはアニメーションの実行状態を監視することができ、我々は唯一のアニメーションを監視ページジャンプアクションの終了が行われた場合、終了しました。

_animation.addStatusListener（（ステータス）{
       IF（ステータス== AnimationStatus.completed）{ 
        Navigator.of（コンテキスト）.pushAndRemoveUntil（// 次のページへのジャンプ、及びアニメーションをオフ終了する 
          MaterialPageRoute（ビルダー：（コンテキスト）=> FIRSTPAGE （））、 
          （ルート） =>ルート== NULL 
        ）; 
      } 
}）。

AnimationStatus.completed：それアニメーションが完了しました。
pushAndRemoveUntil：ジャンプページ、および電流制御の破壊。

次のように完全なコードは次のとおりです。

インポート' パッケージ：フラッター/ material.dart ' ; 

ボイドメイン（）=> runApp（MyAppを（））。

クラスMyAppにはStatelessWidget {拡張
  @Overrideの
  ウィジェットのビルド（BuildContextコンテキストが）{ 
    返すMaterialApp（
      タイトル：' フラッターデモを' 、
      テーマ：ThemeData（
        primarySwatch：Colors.blue、 
      ）、
      ホーム：スプラッシュ（）
    ）; 
  } 
} 

クラススプラッシュ画面はStatefulWidget {延び
  _SplashScreenState createState（） => _SplashScreenState（）; 
} 

クラス状態_SplashScreenState <スプラッシュ>延びSingleTickerProviderStateMixin {と
  ; AnimationController _controllerを// コントローラ、及び一般的にアニメーション時間制御 
  アニメーション_animationを; // アニメーション
   // 初期化状態は
  @Override
   ボイドInitState（）{ 
    super.initStateを（）; 
    _controller = AnimationController（VSYNC ：この、時間：時間（ミリ秒：3000））; // 3000ミリ秒 
    _animation =ツイーン（開始：0.0、エンド：1.0 ）.animate（_controller）;
     //は、イベントを聞く
    _animation.addStatusListener（（ステータス）{
      IF（ステータス== AnimationStatus.completed）{ //は、動きが終了したと判断 
        Navigator.of（コンテキスト）.pushAndRemoveUntil（// 次のページへのジャンプを、アニメーションをオフ終了する 
          （文脈）=>：MaterialPageRoute（ビルダーFIRSTPAGE（ ））、 
          （ルート） =>ルート== NULL 
        ）; 
      } 
    }）; 
     _controller.forward（）; // アニメーションプレイ
  }
   // コントローラ破壊を
  @Override
   ボイド廃棄（）{ 
    _controller.dispose（）; 
    super.dispose （）; 
  } 
 
  @Override 
  ウィジェットビルド（BuildContextコンテキスト）{ 
    返す（FadeTransitionを// 透明オーバーアニメーション
      不透明度：_animation、
      子供：Image.asset（
        ' 画像/ lake.jpg ' 、
        スケール：2.0、// 画像スケーリング 
        フィット：BoxFit.cover // 充填フルスクリーン
      ）     
    ）; 
  } 
}

FirstPage.dartファイル

クラスFIRSTPAGEはStatelessWidget {拡張
  @Override 
  ウィジェットのビルド（BuildContextコンテキスト）{ 
    返す（足場を
       ：アプリケーションバー（タイトル：テキスト（アプリケーションバー' 闪屏动画' ）、）、
       ボディ：センター（
         子：テキスト（' 首页' ）、 
       ）、）
    ; 
  } 
}