问题描述
如何在Flutter中制作这种类型的动画?
我附上了一个 YouTube video。我制作了很多动画,但没有一个能解决我现在面临的这个问题。
请导入:awesome_slider: ^0.1.0
这是我试过的代码:
class Submits extends StatefulWidget {
Submits({Key key}) : super(key: key);
@override
_Submitsstate createState() => _Submitsstate();
}
class _Submitsstate extends State<Submits> {
int valuess = 0;
List itemWidget = [
AnimatedContainer(
transform:Matrix4.translationValues(0,0),// Use the properties stored in the State class.
key: UniqueKey(),child: Center(
child: Padding(
padding: const EdgeInsets.fromLTRB(10,240,),width: 400,height: 300,decoration: Boxdecoration(
gradient: LinearGradient(colors: [Colors.red,Colors.red]),color: Colors.blue,// Define how long the animation should take.
duration: Duration(seconds: 0),// Provide an optional curve to make the animation feel smoother.
curve: Curves.elasticInOut,AnimatedContainer(
transform:Matrix4.translationValues(10,child: Center(
child: Padding(
padding: const EdgeInsets.fromLTRB(10,child: Text("To a very little extent"),Colors.orange]),image: decorationImage(image: Assetimage("assets/images/Artboard 1.png")),AnimatedContainer(
transform:Matrix4.translationValues(10,child: Text("To a little extent"),decoration: Boxdecoration(
gradient: LinearGradient(colors: [Colors.orange,Colors.yellow]),image: decorationImage(image: Assetimage("assets/images/Artboard 2.png")),AnimatedContainer(
transform:Matrix4.translationValues(0,child: Text("To some extent"),Colors.green]),image: decorationImage(image: Assetimage("assets/images/Artboard 3.png")),AnimatedContainer(
transform:Matrix4.translationValues(0,child: Text("To a great extent"),decoration: Boxdecoration(
gradient: LinearGradient(colors: [Colors.yellow,image: decorationImage(image: Assetimage("assets/images/Artboard 4.png")),AnimatedContainer(
// Use the properties stored in the State class.
key: UniqueKey(),child: Text("To a very great extent"),decoration: Boxdecoration(
gradient: LinearGradient(colors: [Colors.green,image: decorationImage(image: Assetimage("assets/images/Artboard 5.png")),];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: Column(children: [
Container(
height:300,child: AnimatedSwitcher(
switchInCurve: Curves.linear,child: itemWidget[valuess],duration: Duration(seconds: 1),AwesomeSlide(
value: valuess.todouble(),min: 0,max: 5,thumbSize: 80.0,inactiveLineColor: Colors.grey,activeLineColor:Color(0xffe64a19),child: Material(
type: MaterialType.card,color: Colors.transparent,child: Image.asset( "assets/images/SliderTop.png"),onChanged: (value) {
valuess = value.toInt();
setState(() {
}); },],);
}
}
解决方法
这可以通过 PageView
、ListVeiw
或 Stack
来完成。
这是完整的代码:
使用 PageView
使其也可滚动
class ViwerWidget extends HookWidget {
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
ValueNotifier<double> page = ValueNotifier(0.0);
final viewportFraction = 0.5;
final pageWidth = size.width * 0.5;
final pageController = usePageController(
viewportFraction: viewportFraction,);
pageController.addListener(() {
page.value = pageController.page!;
});
final pages = [
Icon(
Icons.ac_unit,size: 100,),Icon(
Icons.access_alarm_rounded,Icon(
Icons.accessibility_new,Icon(
Icons.account_box_rounded,];
return Scaffold(
body: Column(
children: [
SizedBox(height: 100),Container(
color: Colors.red,width: pageWidth,height: 300,child: PageView.builder(
controller: pageController,itemCount: pages.length,pageSnapping: false,itemBuilder: (context,index) => ValueListenableBuilder(
valueListenable: page,builder: (context,double value,child) {
final scale = (value - index + 1).abs() * 2;
final opacity = (1 - ((value - index).abs())).clamp(0.0,1.0);
return Opacity(
opacity: opacity,child: Transform.scale(
scale: scale,child: pages[index],);
},Spacer(),ValueListenableBuilder(
valueListenable: page,child) => Slider(
value: value,max: pages.length - 1,min: 0.0,onChanged: (value) {
page.value = value;
pageController.jumpTo(value * pageWidth * viewportFraction);
},)
],);
}
}
当然,您可以更多地使用这些值来达到预期的结果。