在颤动中提升和翻转卡片动画
lift and flip card animation in flutter
我想把我的卡片举起来,翻过来再放回原来的位置。目前我已经通过以下代码实现了翻转卡片。谁能告诉我怎样才能把卡也举起来
animation = TweenSequence(
<TweenSequenceItem<double>>[
TweenSequenceItem<double>(
tween: Tween(begin: 0.0, end: 2*pi).chain(CurveTween(curve: Curves.linear)),
weight: 50.0,
),
TweenSequenceItem<double>(
tween: ConstantTween<double>(pi*2),
weight: 50.0,
),
],
).animate(animationController);
我的小部件是:-
AnimatedBuilder(
animation: animationController,
child: Container(
height: 100,
width: 100,
color: Colors.red,
),
builder: (context,child){
Matrix4 transform = Matrix4.identity();
transform.setEntry(3, 2, 0.001);
transform.rotateY(animation.value);
return Transform(
transform: transform,
alignment: Alignment.center,
child: child,
);
},
),
您可以使用 AnimatedContainer
将容器抬起并放回原处。这是使用您的代码段的示例。
class FlipAndLiftAnimation extends StatefulWidget {
const FlipAndLiftAnimation({Key? key}) : super(key: key);
@override
_FlipAndLiftAnimationState createState() => _FlipAndLiftAnimationState();
}
class _FlipAndLiftAnimationState extends State<FlipAndLiftAnimation>
with TickerProviderStateMixin {
late AnimationController animationController;
late Animation<double> animation;
double boxSize = 100;
double initialSize = 100;
double expandedSize = 300;
@override
void initState() {
animationController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 350),
);
animation = TweenSequence(
<TweenSequenceItem<double>>[
TweenSequenceItem<double>(
tween: Tween(begin: 0.0, end: 2 * pi)
.chain(CurveTween(curve: Curves.linear)),
weight: 50.0,
),
TweenSequenceItem<double>(
tween: ConstantTween<double>(pi * 2),
weight: 50.0,
),
],
).animate(animationController);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: const Color.fromARGB(164, 117, 81, 1),
child: Center(
child: GestureDetector(
onTap: () async {
animationController.isCompleted
? animationController.reverse()
: animationController.forward();
setState(() {
boxSize = expandedSize;
});
await Future.delayed(const Duration(milliseconds: 500), () {
setState(() {
boxSize = initialSize;
});
});
},
child: AnimatedBuilder(
animation: animationController,
child: AnimatedContainer(
margin: EdgeInsets.all(50),
height: boxSize,
width: boxSize,
color: Colors.red,
duration: Duration(milliseconds: 300),
),
builder: (context, child) {
Matrix4 transform = Matrix4.identity();
transform.setEntry(3, 2, 0.001);
transform.rotateY(animation.value);
transform.scale(1.0, 1.0, 10);
return Transform(
transform: transform,
alignment: Alignment.center,
child: child,
);
},
),
),
),
),
);
}
}
我想把我的卡片举起来,翻过来再放回原来的位置。目前我已经通过以下代码实现了翻转卡片。谁能告诉我怎样才能把卡也举起来
animation = TweenSequence(
<TweenSequenceItem<double>>[
TweenSequenceItem<double>(
tween: Tween(begin: 0.0, end: 2*pi).chain(CurveTween(curve: Curves.linear)),
weight: 50.0,
),
TweenSequenceItem<double>(
tween: ConstantTween<double>(pi*2),
weight: 50.0,
),
],
).animate(animationController);
我的小部件是:-
AnimatedBuilder(
animation: animationController,
child: Container(
height: 100,
width: 100,
color: Colors.red,
),
builder: (context,child){
Matrix4 transform = Matrix4.identity();
transform.setEntry(3, 2, 0.001);
transform.rotateY(animation.value);
return Transform(
transform: transform,
alignment: Alignment.center,
child: child,
);
},
),
您可以使用 AnimatedContainer
将容器抬起并放回原处。这是使用您的代码段的示例。
class FlipAndLiftAnimation extends StatefulWidget {
const FlipAndLiftAnimation({Key? key}) : super(key: key);
@override
_FlipAndLiftAnimationState createState() => _FlipAndLiftAnimationState();
}
class _FlipAndLiftAnimationState extends State<FlipAndLiftAnimation>
with TickerProviderStateMixin {
late AnimationController animationController;
late Animation<double> animation;
double boxSize = 100;
double initialSize = 100;
double expandedSize = 300;
@override
void initState() {
animationController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 350),
);
animation = TweenSequence(
<TweenSequenceItem<double>>[
TweenSequenceItem<double>(
tween: Tween(begin: 0.0, end: 2 * pi)
.chain(CurveTween(curve: Curves.linear)),
weight: 50.0,
),
TweenSequenceItem<double>(
tween: ConstantTween<double>(pi * 2),
weight: 50.0,
),
],
).animate(animationController);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: const Color.fromARGB(164, 117, 81, 1),
child: Center(
child: GestureDetector(
onTap: () async {
animationController.isCompleted
? animationController.reverse()
: animationController.forward();
setState(() {
boxSize = expandedSize;
});
await Future.delayed(const Duration(milliseconds: 500), () {
setState(() {
boxSize = initialSize;
});
});
},
child: AnimatedBuilder(
animation: animationController,
child: AnimatedContainer(
margin: EdgeInsets.all(50),
height: boxSize,
width: boxSize,
color: Colors.red,
duration: Duration(milliseconds: 300),
),
builder: (context, child) {
Matrix4 transform = Matrix4.identity();
transform.setEntry(3, 2, 0.001);
transform.rotateY(animation.value);
transform.scale(1.0, 1.0, 10);
return Transform(
transform: transform,
alignment: Alignment.center,
child: child,
);
},
),
),
),
),
);
}
}