时间戳

首页 > 解决方案 > 颤振动画 CrossAxisalignment 与补间

flutter - 颤振动画 CrossAxisalignment 与补间

问题描述

我正在寻找一种解决方案，以使用 and 来实现 Column 的 CrossAxisAllignment 的更改AnimatedBuilder。作为我的孩子，AnimatedBuilder我使用一个列，在其中我将其更改CrossAxisAlignment为开始或居中。

这是我用 Tween 创建动画的想法，但我找不到专门用于 CrossAxisAlignment 的 Tween：

_positionAnimation =
        AlignmentTween(begin: CrossAxisAlignment.start end: CrossAxisAlignment.center).animate(_positionController);

这是我AnimatedBuilder用 Column 作为一个孩子来改变对齐方式。

AnimatedBuilder(
  animation: _positionController,
  builder: (context, child) => Padding(
    padding: const EdgeInsets.all(16.0),
    child: SizedBox(
      width: double.infinity,
      child: Column(
          crossAxisAlignment: _positionAnimation.value,
          children: [
            FadeTransition(
              opacity: _animationController,
              child: Text(
                carouselList[_current].title,
                style: Theme.of(context).textTheme.headline5,
              ),
            ),
            const SizedBox(
              height: 20,
            ),
            FadeTransition(
              opacity: _animationController,
              child: Text(
                carouselList[_current].paragraph,
                style: Theme.of(context).textTheme.bodyText2,
              ),
            )
          ]),
    ),
  ),
),

有没有办法用 Tween 实现 CrossAxisAlignment 的动画？

标签： flutterdart

解决方案

CrossAxisAlignment是一个枚举，枚举值非常具体！它们之间没有插值，也没有lerp适合它们的方法，甚至没有可能实现一个可悲的方法。

但是，如果您想获得类似效果，可以使用Stackwith Align(Alignment可以插值) 或Positioned.

但是，如果您坚持使用 a Flex，则可以组合Flexible或Expanded与IntTweenorStepTween一起获得所需的效果。

如果新Tween课程对您来说是新的，这里有一个 对他们有用的链接。

推荐阅读