一波Flutter酷炫特效来袭,持续更新
在Flutter中,你可以使用各种特效来提升你的应用程序的视觉吸引力。以下是一些你可以使用的特效:
- 淡入淡出效果
在Flutter中,你可以使用AnimatedOpacity Widget来实现淡入淡出效果。
class FadeAnimation extends StatefulWidget {
@override
_FadeAnimationState createState() => _FadeAnimationState();
}
class _FadeAnimationState extends State<FadeAnimation> with TickerProviderStateMixin {
AnimationController controller;
CurvedAnimation curve;
Animation<double> animation;
@override
void initState() {
super.initState();
controller = AnimationController(duration: const Duration(seconds: 2), vsync: this);
curve = CurvedAnimation(parent: controller, curve: Curves.easeIn);
animation = Tween<double>(begin: 0.0, end: 1.0).animate(curve)
..addListener(() {
setState(() {});
});
controller.forward();
}
@override
Widget build(BuildContext context) {
return AnimatedOpacity(
opacity: animation.value,
duration: const Duration(seconds: 2),
child: Container(
color: Colors.blue,
width: 100.0,
height: 100.0,
),
);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
}
- 翻转动画
你可以使用AnimatedSwitcher Widget来实现翻转动画。
AnimatedSwitcher(
duration: const Duration(milliseconds: 300),
transitionBuilder: (Widget child, Animation<double> animation) {
return ScaleTransition(
scale: animation,
child: RotationTransition(
turns: Tween<double>(begin: 0.5, end: 1.0).animate(animation),
child: child,
),
);
},
child: Container(
key: ValueKey<int>(status),
color: Colors.blue,
width: 100.0,
height: 100.0,
),
)
- 渐变动画
你可以使用DecoratedBoxTransition Widget来实现渐变动画。
DecoratedBoxTransition(
position: DecoratedBoxTransitionPosition.bottomLeft,
transition: RectTween(
begin: Rect.fromLTWH(0, 0, 0, 0),
end: Rect.fromLTWH(0, 100, 100, 100),
).animate(CurvedAnimation(
parent: controller,
curve: Curves.fastOutSlowIn,
)),
child: Container(
color: Colors.blue,
width: 100.0,
height: 100.0,
),
)
- 渐变效果
你可以使用An
评论已关闭