Flutter页面转换动画插件sing_transformer_page_view的使用
Flutter页面转换动画插件sing_transformer_page_view的使用
安装
在项目的 pubspec.yaml 文件中添加以下依赖：
dependencies:
sing_transformer_page_view: ^0.0.2
transformer_page_view
transformer_page_view 是一个用于实现页面转换动画的 Flutter 插件。它支持多种动画效果，例如缩放、淡入淡出、3D 翻转等。以下是一个完整的示例，展示如何使用该插件。
示例代码
import 'package:flutter/material.dart';
import 'package:sing_transformer_page_view/export.dart';
void main() => runApp(const MyApp());
// 颜色列表
List<Color> list = [Colors.yellow, Colors.green, Colors.blue];
// 图片路径列表
List<String> images = [
"assets/Hepburn2.jpg",
"assets/Hepburn5.jpg",
"assets/Hepburn4.jpg",
];
List<String> images1 = ["assets/1.jpg", "assets/2.jpg", "assets/3.jpg"];
List<String> text0 = ["春归何处。寂寞无行路", "春无踪迹谁知。除非问取黄鹂", "山色江声相与清，卷帘待得月华生"];
List<String> text1 = ["若有人知春去处。唤取归来同住", "百啭无人能解，因风飞过蔷薇", "可怜一曲并船笛，说尽故人离别情。"];
final List<String> images2 = [
"assets/home.png",
"assets/good.png",
"assets/image.png",
"assets/edit.png"
];
final List<String> titles = [
"Welcome",
"Simple to use",
"Easy parallax",
"Customizable"
];
final List<String> subtitles = [
"Flutter TransformerPageView, for welcome screen, banner, image catalog and more",
"Simple api,easy to understand,powerful adn strong",
"Create parallax by a few lines of code",
"Highly customizable, the only boundary is our mind. :)"
];
final List<Color> backgroundColors = [
const Color(0xffF67904),
const Color(0xffD12D2E),
const Color(0xff7A1EA1),
const Color(0xff1773CF)
];
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final IndexController _controller = IndexController();
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Flutter Demo Home Page')),
body: SingleChildScrollView(
child: Column(
children: [
// 引导页
SizedBox(
height: 500,
child: TransformerPageView(
loop: false,
transformer: PageTransformerBuilder(
builder: (Widget child, TransformInfo info) {
return ParallaxColor(
colors: backgroundColors,
info: info,
child: Column(
children: <Widget>[
Expanded(
child: ParallaxContainer(
position: info.position,
opacityFactor: 1.0,
translationFactor: 400.0,
child: Image.asset(images2[info.index]),
)
),
ParallaxContainer(
position: info.position,
translationFactor: 100.0,
child: Text(
titles[info.index],
style: const TextStyle(fontSize: 30.0, color: Colors.white),
textAlign: TextAlign.center,
),
),
ParallaxContainer(
position: info.position,
translationFactor: 50.0,
child: Padding(
padding: const EdgeInsets.fromLTRB(40.0, 30.0, 40.0, 50.0),
child: Text(subtitles[info.index],
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 13.0, color: Colors.white))),
),
],
),
);
}),
itemCount: 4),
),
const SizedBox(height: 10),
SizedBox(
height: 500,
child: TransformerPageView(
loop: true,
viewportFraction: 0.8,
transformer: PageTransformerBuilder(builder: (Widget child, TransformInfo info) {
return Material(
elevation: 4.0,
textStyle: const TextStyle(color: Colors.white),
borderRadius: BorderRadius.circular(10.0),
child: Stack(
fit: StackFit.expand,
children: <Widget>[
ParallaxImage.asset(images1[info.index], position: info.position,),
const DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: FractionalOffset.bottomCenter,
end: FractionalOffset.topCenter,
colors: [Color(0xFF000000), Color(0x33FFC0CB),],
),
),
),
Positioned(
left: 10.0,
right: 10.0,
bottom: 10.0,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ParallaxContainer(
position: info.position,
translationFactor: 300.0,
child: Text(text0[info.index], style: const TextStyle(fontSize: 15.0),),
),
const SizedBox(height: 8.0),
ParallaxContainer(
position: info.position,
translationFactor: 200.0,
child: Text(text1[info.index], style: const TextStyle(fontSize: 18.0)),
),
],
),
)
],
),
);
}),
itemCount: 3),
),
const SizedBox(height: 10),
SizedBox(
height: 500,
child: TransformerPageView(
loop: true,
index: _index0,
viewportFraction: 1.0,
controller: _controller,
transformer: PageTransformerBuilder(builder: (w, i) => w),
onPageChanged: (int index) {
setState(() {
_index0 = index;
});
},
itemBuilder: (BuildContext context, int index) => Image.asset(images[index], fit: BoxFit.fill),
itemCount: 3)),
const SizedBox(height: 10),
SizedBox(
height: 500,
child: TransformerPageView(
loop: true,
index: _index1,
viewportFraction: 1.0,
controller: _controller,
transformer: AccordionTransformer(),
onPageChanged: (int index) {
setState(() {
_index1 = index;
});
},
itemBuilder: (BuildContext context, int index) => Image.asset(images[index], fit: BoxFit.fill),
itemCount: 3)),
const SizedBox(height: 10),
SizedBox(
height: 500,
child: TransformerPageView(
loop: true,
index: _index2,
viewportFraction: 1.0,
controller: _controller,
transformer: ThreeDTransformer(),
onPageChanged: (int index) {
setState(() {
_index2 = index;
});
},
itemBuilder: (BuildContext context, int index) => Image.asset(images[index], fit: BoxFit.fill),
itemCount: 3)),
const SizedBox(height: 10),
SizedBox(
height: 500,
child: TransformerPageView(
loop: true,
index: _index3,
viewportFraction: 0.8,
controller: _controller,
transformer: ScaleAndFadeTransformer(),
onPageChanged: (int index) {
setState(() {
_index3 = index;
});
},
itemBuilder: (BuildContext context, int index) => Image.asset(images[index], fit: BoxFit.fill),
itemCount: 3)),
const SizedBox(height: 10),
SizedBox(
height: 500,
child: TransformerPageView(
loop: true,
index: _index4,
viewportFraction: 1.0,
controller: _controller,
transformer: ZoomInPageTransformer(),
onPageChanged: (int index) {
setState(() {
_index4 = index;
});
},
itemBuilder: (BuildContext context, int index) => Image.asset(images[index], fit: BoxFit.fill),
itemCount: 3)),
const SizedBox(height: 10),
SizedBox(
height: 500,
child: TransformerPageView(
loop: true,
index: _index5,
viewportFraction: 1.0,
controller: _controller,
transformer: ZoomOutPageTransformer(),
onPageChanged: (int index) {
setState(() {
_index5 = index;
});
},
itemBuilder: (BuildContext context, int index) => Image.asset(images[index], fit: BoxFit.fill),
itemCount: 3)),
const SizedBox(height: 10),
SizedBox(
height: 500,
child: TransformerPageView(
loop: true,
index: _index6,
viewportFraction: 1.0,
controller: _controller,
transformer: DeepthPageTransformer(),
onPageChanged: (int index) {
setState(() {
_index6 = index;
});
},
itemBuilder: (BuildContext context, int index) => Image.asset(images[index], fit: BoxFit.fill),
itemCount: 3))
],
),
),
);
}
}
更多关于Flutter页面转换动画插件sing_transformer_page_view的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter页面转换动画插件sing_transformer_page_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
sing_transformer_page_view 是一个 Flutter 插件，用于在页面之间实现平滑的转换动画。它允许你自定义页面切换时的动画效果，类似于 PageView，但提供了更多的动画选项。
安装
首先，你需要在 pubspec.yaml 文件中添加 sing_transformer_page_view 依赖：
dependencies:
flutter:
sdk: flutter
sing_transformer_page_view: ^latest_version
然后运行 flutter pub get 来安装依赖。
基本用法
-
导入包：
import 'package:sing_transformer_page_view/sing_transformer_page_view.dart'; -
创建页面列表：
你可以创建一个包含多个页面的列表，这些页面将在
SingTransformerPageView中显示。final List<Widget> pages = [ Container(color: Colors.red), Container(color: Colors.green), Container(color: Colors.blue), ]; -
使用
SingTransformerPageView：你可以在
SingTransformerPageView中指定页面列表和动画效果。SingTransformerPageView( itemCount: pages.length, itemBuilder: (context, index) { return pages[index]; }, transformer: PageTransformer( transform: (page) { return Transform.scale( scale: 1 - page.abs() * 0.5, child: Opacity( opacity: 1 - page.abs(), child: page >= -1 && page <= 1 ? pages[page.abs().round()] : Container(), ), ); }, ), );
自定义动画
SingTransformerPageView 的核心是 PageTransformer，它允许你自定义页面切换时的动画效果。PageTransformer 中的 transform 方法接收一个 page 参数，表示当前页面的偏移量。你可以根据 page 的值来定义不同的动画效果。
例如，你可以实现一个缩放和淡入淡出的效果：
transformer: PageTransformer(
transform: (page) {
return Transform.scale(
scale: 1 - page.abs() * 0.5,
child: Opacity(
opacity: 1 - page.abs(),
child: page >= -1 && page <= 1 ? pages[page.abs().round()] : Container(),
),
);
},
),
其他配置
SingTransformerPageView 还提供了其他一些配置选项，例如：
controller: 用于控制页面切换的PageController。physics: 定义页面滚动的物理效果。scrollDirection: 定义页面滚动的方向（水平或垂直）。
SingTransformerPageView(
controller: PageController(initialPage: 1),
scrollDirection: Axis.vertical,
physics: BouncingScrollPhysics(),
itemCount: pages.length,
itemBuilder: (context, index) {
return pages[index];
},
transformer: PageTransformer(
transform: (page) {
return Transform.scale(
scale: 1 - page.abs() * 0.5,
child: Opacity(
opacity: 1 - page.abs(),
child: page >= -1 && page <= 1 ? pages[page.abs().round()] : Container(),
),
);
},
),
);
完整示例
以下是一个完整的示例，展示了如何使用 SingTransformerPageView 实现页面切换动画：
import 'package:flutter/material.dart';
import 'package:sing_transformer_page_view/sing_transformer_page_view.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'SingTransformerPageView Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
final List<Widget> pages = [
Container(color: Colors.red),
Container(color: Colors.green),
Container(color: Colors.blue),
];
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('SingTransformerPageView Demo'),
),
body: SingTransformerPageView(
itemCount: pages.length,
itemBuilder: (context, index) {
return pages[index];
},
transformer: PageTransformer(
transform: (page) {
return Transform.scale(
scale: 1 - page.abs() * 0.5,
child: Opacity(
opacity: 1 - page.abs(),
child: page >= -1 && page <= 1 ? pages[page.abs().round()] : Container(),
),
);
},
),
),
);
}
}