アルバム
Flutter Dojo Design Way - ユニバーサルな遊び場の作り方
この記事は、Flutterアニメーションの実装アイデアを、簡単なアニメーションで解剖し、アニメーションを作成するためのFlutterの一般的な手順を分析します。
スプラッシュ・スクリーンには2つの役割があります。
- パブリシティ。ロゴや広告などで、プロモーションする広告などのコンテンツを発売時に表示します。
- バックエンドの初期化。この時間は、バックグラウンドでの操作やSDKやコードの初期化に使用します。
アニメーションは、両側から中央に向かって動くだけのシンプルなものです。
一般的に、Flutterでアニメーションを作るにはいくつかのステップがあります。
- 静的レイアウトの作成
- アニメーションの開始を示すトゥイーンを作成します。
- AnimatedBuilderを静的コードに追加してアニメーションを駆動
静的レイアウト
FlutterTextとDojoTextを行の中央に配置するCenter-Rowという方法もあります。あるいは、Stack-Positioned 方式を使うこともできます。
それに比べれば、センター・ロウ・アプローチの方が直感的でしょうから、ここではスタック・ポジション・アプローチを使ってデモを行います。
FlutterTextはDojoTextより長いので、画面の中央線に沿わせるのは不自然だからです。
外側のレイアウトは、わずかにDojoTextの実装について言及する必要があり、実際には、BoxDecorationを介して達成され、コードは以下のとおりです。
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Color.fromARGB(, 152, 39),
),
アニメーションの定義
ここでのアニメーションは左右の2つのパートに分かれています。Centre-Rowの方法を使うと、2つのTextsが画面の正中線に揃わないため、実際にはオフセットが発生し、Transform.translateでオフセットされます。もう1つの方法、Stack-Positionedも実際には同じことをしますが、Positionedで左右にアニメーションさせることができます。
そこで最初のステップは、FlutterTextとDojoTextの幅の違いを得ることで、ここでもWidgetのSizeを得るための複数の方法があります。
- LayoutBuilder。事前にアニメーションを作成する必要があるため、この解決策はあまり良くありません。
- TextPainter。 テキストの場合は、TextPainterを使ってテキストを測定できます。
- Keyを使用して、RenderBoxを取得し、WidgetのSizeを取得します。
ここでは、TextPainter の方法を使います。次の関数は、特定の TextStyle で Text の幅を計算する方法を示しています。
double getTextWidth(String text) {
final textPainter = TextPainter(
text: TextSpan(
text: text,
style: TextStyle(
fontSize: 60,
fontWeight: FontWeight.w600,
),
),
textDirection: TextDirection.ltr,
);
textPainter.layout(minWidth: 0, maxWidth: double.infinity);
return textPainter.width;
}
簡単な計算の結果、FlutterTextとDojoTextのオフセットの値は、実際には2つのテキストの幅の差の半分になります。
先ほど使用したレイアウトはStack-Positionedだったので、アニメーションも静的レイアウトに従って定義する必要があります。
まずFlutterTextのアニメーションを見てみましょう。FlutterTextは画面の左側から中央に向かって、オフセットをつけて動作するので、アニメーションの値には幅があります：
begin: screenWidth, end: screenWidth / 2 - offset
したがって、DojoTextのアニメーションも同様です：
begin: screenWidth, end: screenWidth / 2 + offset
アニメーション管理
アニメーションの値の範囲を決定した後、実際にTweenが決定されましたが、ここでアニメーションの管理技術を導入するために、異なるTweenによって必要とされるWidgetをカプセル化するクラスを通して、アニメーションとWidgetのロジックを切り離すことができるように、コードを以下に示します。
import 'package:flutter/material.dart';
class SplashAnimManager {
final AnimationController controller;
final Animation<double> animLeft;
final Animation<double> animRight;
final double screenWidth;
final double offset;
SplashAnimManager(this.controller, this.screenWidth, this.offset)
: animLeft = Tween(begin: screenWidth, end: screenWidth / 2 - offset).animate(
CurvedAnimation(
parent: controller,
curve: Curves.easeIn,
),
),
animRight = Tween(begin: screenWidth, end: screenWidth / 2 + offset).animate(
CurvedAnimation(
parent: controller,
curve: Curves.easeIn,
),
);
}
このアニメーション・マネージメントの考え方を示すために、ここではマネージメント・クラスに2つのアニメーションだけを書いています。
実際、Flutter Dojoにはアプリからだけでなく、Dojoのソースコードを読むことでFlutterについて学べる場所がたくさんあります。
アニメーション組み立て
最後に、それはAnimatedBuilderによって組み立てられ、アニメーションの本質は、実際には常にアニメーションの効果を生成するように、プロパティの値を変更することです、FlutterTextとDojoTextは同じですが、例としてFlutterTextに、実際には、変更の終わりにトゥイーンの先頭から右の属性です！だから、セットのAnimatedBuilderの静的レイアウトに、その後、対応するプロパティにトゥイーンの値を設定することができ、コードは次のとおりです。
@override
Widget build(BuildContext context) {
final double screenWidth = MediaQuery.of(context).size.width;
_splashAnimManager = SplashAnimManager(
_animationController,
screenWidth,
(getTextWidth('Flutter') - getTextWidth('Dojo') - 4) / 2,
);
return Container(
alignment: Alignment.center,
color: Colors.black,
child: Stack(
fit: StackFit.expand,
alignment: Alignment.center,
children: <Widget>[
AnimatedBuilder(
animation: _animationController,
builder: (context, widget) {
return Positioned(
right: _splashAnimManager.animLeft.value,
child: Text(
'Flutter',
style: TextStyle(
fontSize: 60,
color: Colors.white,
fontWeight: FontWeight.w600,
),
),
);
},
),
AnimatedBuilder(
animation: _animationController,
builder: (context, widget) {
return Positioned(
left: _splashAnimManager.animRight.value,
child: Container(
padding: EdgeInsets.symmetric(
horizontal: 4,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Color.fromARGB(, 152, 39),
),
child: Text(
'Dojo',
style: TextStyle(
fontSize: 60,
fontWeight: FontWeight.w600,
color: Colors.black,
),
),
),
);
},
),
],
),
);
}
上では、軽快なスプラッシュ・スクリーン・アニメーションが完成。
コードアドレス
::
