一緒に書く習慣をつけましょう!「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加した初日です。クリックしてイベントの詳細をご覧ください。
より良いユーザーエクスペリエンスを追求するために、ユーザーの注意を引くためにハートビートのようにビートするコントロールが必要になる場合があります。これは小さな最適化要件ですが、Flutterでは、ツーピースアニメーションはフットラップのように臭いです。したがって、生産性を解放するためにAnimatedWidgetをカプセル化する必要があります。
アニメーションを実装する
兼シングルTickerProviderStateMixin
vsync
AnimationControllerを作成するときは、パラメータを渡す必要があります。このパラメータが存在する場合vsync
、アニメーションUIが現在の画面にないときに不要なリソースを消費するのを防ぎます。SingleTickerProviderStateMixinを混合する。
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{}
复制代码
アニメーションを作成する
ほぼ1秒の間隔でアニメーションコントローラーを作成します。
late final AnimationController animController;
@override
void initState() {
super.initState();
animController = AnimationController(
duration: const Duration(milliseconds: 800),
vsync: this,
);
}
复制代码
ハートビートアニメーションは小さいものから大きいもの、そして小さいものへと変化するため、値のサイズを変更するアニメーションが必要です。
late final Animation<double> animation;
@override
void initState() {
super.initState();
animController = AnimationController(
duration: const Duration(milliseconds: 800),
vsync: this,
);
animation = Tween<double>(
begin: 0.9,
end: 1.05,
);
}
复制代码
ハートビートは中断されないため、アニメーションを監視して、終了時にアニメーションを再開してから、アニメーションを開始し続ける必要があります。
animation = Tween<double>(
begin: 0.9,
end: 1.05,
).animate(animController)
..addListener(() {
setState(() {});
})
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
animController.reverse();
} else if (status == AnimationStatus.dismissed) {
animController.forward();
}
});
复制代码
ズームコントロールを使用します。
Transform.scale(
scale: animation.value,
child: const FlutterLogo(
size: 80,
),
),
复制代码
ジャンプ効果については、ジャンプアニメーションを強調表示し、撤回時間を短縮します。
animController = AnimationController(
reverseDuration: const Duration(milliseconds: 700),
duration: const Duration(milliseconds: 800),
vsync: this,
);
复制代码
最後に、リソースを解放することを忘れないでください。
@override
void dispose() {
animController.dispose();
super.dispose();
}
复制代码
小さなコンポーネントに抽出する
インポートするだけで同じようなアニメーションを使用するには、アニメーションと表示コンポーネントを分離する必要があります。新しいコンポーネントを作成し、BounceWidget
アニメーションを含めてから、UIコンポーネントを渡します。
class BounceWidget extends StatefulWidget {
final Widget child;
const BounceWidget({
Key? key,
required this.child,
}) : super(key: key);
@override
State<BounceWidget> createState() => _BounceWidgetState();
}
复制代码
アニメーションの実装を続行します。
class _BounceWidgetState extends State<BounceWidget>
with SingleTickerProviderStateMixin {
late Animation<double> animation;
late AnimationController animController;
@override
void initState() {
super.initState();
animController = AnimationController(
reverseDuration: const Duration(milliseconds: 700),
duration: const Duration(milliseconds: 800),
vsync: this,
);
animation = Tween<double>(
begin: 0.9,
end: 1.05,
).animate(animController)
..addListener(() {
setState(() {});
})
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
animController.reverse();
} else if (status == AnimationStatus.dismissed) {
animController.forward();
}
});
animController.forward();
}
@override
Widget build(BuildContext context) {
return Transform.scale(
scale: animation.value,
child: widget.child,
);
}
@override
void dispose() {
animController.dispose();
super.dispose();
}
}
复制代码
アニメーションをインポートするには:
Center(
child: BounceWidget(
child: FlutterLogo(
size: 80,
),
),
复制代码
完全なコード:
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.only(top: 80, left: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const <Widget>[
Text(
"心动的",
style: TextStyle(
fontSize: 28,
color: Colors.black,
),
),
Text(
"感觉",
style: TextStyle(
fontSize: 48,
color: Colors.black,
),
),
Center(
child: BounceWidget(
child: FlutterLogo(
size: 80,
),
),
),
],
),
),
);
}
}
复制代码