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, 当子元素改变时会触发过度动画.

posted @ 2023-12-22 15:53  angelwgh  阅读(99)  评论(0)    收藏  举报