アニメーション
animationsは、アニメーション効果を作成するためのツールとコンポーネントのセットを提供する Flutter ライブラリです。このライブラリの主な焦点は、ルーティング遷移アニメーションまたはページ切り替えアニメーションです。
アドレス
https://pub-web.flutter-io.cn/packages/animations
インストール
flutter pub add animations
公式ドキュメントや公式例を読んで、少し混乱しました。間違ったライブラリを見つけたのかと思うほどでした。幸いなことに、flutter のライブラリは直接開いて (Ctrl + マウスの右ボタン)、ソース コードを表示できます。
をクリックすると、次のファイルは必要なく、その他のファイルは提供されている公式アニメーションであることimport 'package:animations/animations.dart';がわかります。
modal.dart以下を見てください。以下は使用されるデフォルト構成です。次のパッケージをインポートすることを忘れないでください。
`import 'package:animations/animations.dart';`
フェードスケールトランジション
Center(
child: ElevatedButton(
onPressed: () {
showModal(
context: context,
// 配置
configuration: const FadeScaleTransitionConfiguration(),
builder: (context) {
return const Center(
child: SizedBox(
width: 250,
height: 250,
child: Material(
child: Center(
child: FlutterLogo(size: 250),
),
),
),
);
});
},
child: const Text("打开弹窗"),
));
フェードスルートランジション
ルート切り替えアニメーションです
MaterialApp(
theme: ThemeData(
// 设置页面过渡主题
pageTransitionsTheme: const PageTransitionsTheme(builders: {
TargetPlatform.android: FadeThroughPageTransitionsBuilder(),
TargetPlatform.iOS: FadeThroughPageTransitionsBuilder(),
})),
// 路由
routes: {
'/': (BuildContext context) {
return Container(
color: Colors.red,
child: Center(
child: TextButton(
child: const Text('Push route'),
onPressed: () {
Navigator.of(context).pushNamed('/a');
},
),
),
);
},
'/a': (BuildContext context) {
return Container(
color: Colors.blue,
child: Center(
child: TextButton(
child: const Text('Pop route'),
onPressed: () {
Navigator.of(context).pop();
},
),
),
);
},
},
// home: YcHomePage(),
);
オープンコンテナ
これはまだ非常に良いです
Center(
child: OpenContainer(
transitionDuration: const Duration(milliseconds: 500),
// 打开状态
openBuilder: (BuildContext context, VoidCallback _) {
return const SecondPage();
},
// 闭合状态
closedBuilder: (BuildContext context, VoidCallback openContainer) {
return GestureDetector(
onTap: openContainer,
child: Container(
width: 200,
height: 200,
color: Colors.blue,
child: const Center(
child: Text(
'Tap to Open',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
),
),
);
},
));
class SecondPage extends StatelessWidget {
const SecondPage({
Key? key}) : super(key: key);
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Second Page'),
),
body: const Center(
child: Text(
'Second Page',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
);
}
}
ページ_トランジション_スイッチャー
異なるページ間のスムーズな遷移アニメーションを実現するために使用できます。ページを切り替えるときに、フェード、スライド、ズームなどのカスタム トランジション効果を適用できます。
// 创建一个PageTransitionSwitcher组件，并将需要切换的页面作为其子组件。
class SwitcherContainer extends StatefulWidget {
const SwitcherContainer({
Key? key}) : super(key: key);
_SwitcherContainerState createState() => _SwitcherContainerState();
}
class _SwitcherContainerState extends State<SwitcherContainer> {
int _pageIndex = -1;
Widget build(BuildContext context) {
return PageTransitionSwitcher(
// 过渡时间
duration: const Duration(milliseconds: 500),
// 过渡构建函数，还有其他的构建函数具体见源码
transitionBuilder: (child, animation, secondaryAnimation) {
return FadeThroughTransition(
animation: animation,
secondaryAnimation: secondaryAnimation,
child: child,
);
},
child: _getPage(_pageIndex),
);
}
Widget _getPage(int index) {
switch (index) {
case 0:
return const FirstPage();
default:
return Center(
child: ElevatedButton(
onPressed: () {
setState(() {
_pageIndex = 0;
});
},
child: const Text("跳转")),
);
}
}
}
class FirstPage extends StatelessWidget {
const FirstPage({
Key? key}) : super(key: key);
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: Text(
'Second Page',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
);
}
}
ここに書いた例は適当ではなく、通常はマーキーのように切り替える必要があります。
共有軸遷移
SharedAxisPageTransitionsBuilderanimationsライブラリ内のトランジション ビルダーで、軸を共有するページ間にトランジション アニメーションを適用します。SharedAxisTransitionType.scaled、 、SharedAxisTransitionType.horizontalの3 つの異なるトランジション タイプが用意されておりSharedAxisTransitionType.vertical、それぞれズーム、水平、垂直方向のトランジション効果を表します。
これもルーティング遷移アニメーションです
class MyApp extends StatelessWidget {
//创建widget的唯一标识
const MyApp({
Key? key}) : super(key: key);
//重写build方法
Widget build(BuildContext context) {
// ChangeNotifierProvider 会返回一个 ChangeNotifier 对象，它允许消费者在 CounterState 对象发生变化时收到通知。
return MaterialApp(
home: const YcHomePage(),
theme: ThemeData(
pageTransitionsTheme: const PageTransitionsTheme(builders: {
TargetPlatform.android: SharedAxisPageTransitionsBuilder(
transitionType: SharedAxisTransitionType.scaled,
),
TargetPlatform.iOS: SharedAxisPageTransitionsBuilder(
transitionType: SharedAxisTransitionType.scaled,
),
})),
);
}
}
