Flutter 隐式动画
通过几行代码就可以实现隐式动画,由于隐式动画背后的实现原理和繁琐的操作细节都被隐去了,所以叫隐式动画,FLutter中提供的 [AnimatedContainer]、[AnimatedPadding]、[AnimatedPositioned.AnimatedOpacity]、[AnimatedDefaultTextStyle]、[AnimatedSwitcher]都属于隐式动画
隐式动画中可以通过 duration 配置动画时长、可以通过curve (曲线)来配置动画过程
所有隐式动画都扩展了 ImplicitlyAnimatedWidget 类。
AnimatedContainer
AnimatedContainer的属性改变时,在新旧值之前以提供的变化曲线和持续时间使用动画,为空的属性不会产生动画效果。子组件和后代组件也没有动画效果。
...
class _AnimateContentState extends State<AnimateContent> {
bool flag = false;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: AnimatedContainer(
curve: Curves.ease,//动画过度效果
duration: const Duration(milliseconds: 200), //动画过度时间
width: flag ? 200 : 100,
height: flag ? 200 : 100,
color: flag ? Colors.cyanAccent : Colors.limeAccent,
transform: flag
? Matrix4.translationValues(0, 0, 0)
: Matrix4.translationValues(100, 100, 0)),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
flag = !flag;
});
},
child: Icon(Icons.account_box_sharp),
),
);
}
}
-TweenAnimationBuilder, which animates any property expressed by a Tween to a specified target value.
-AnimatedAlign, which is an implicitly animated version of Align.
-AnimatedContainer, which is an implicitly animated version of Container.
-AnimatedDefaultTextStyle, which is an implicitly animated version of DefaultTextStyle.
-AnimatedScale, which is an implicitly animated version of Transform.scale.
-AnimatedRotation, which is an implicitly animated version of Transform.rotate.
-AnimatedSlide, which implicitly animates the position of a widget relative to its normal position.
-AnimatedOpacity, which is an implicitly animated version of Opacity.
-AnimatedPadding, which is an implicitly animated version of Padding.
-AnimatedPhysicalModel, which is an implicitly animated version of PhysicalModel.
-AnimatedPositioned, which is an implicitly animated version of Positioned.
-AnimatedPositionedDirectional, which is an implicitly animated version of PositionedDirectional.
-AnimatedTheme, which is an implicitly animated version of Theme.
-AnimatedCrossFade, which cross-fades between two given children and animates itself between their sizes.
-AnimatedSize, which automatically transitions its size over a given duration.
-AnimatedSwitcher, 当子元素改变时会触发过度动画.

浙公网安备 33010602011771号