TweenAnimationBuilder里需要三个参数:

duration:表示动画时间;

tween:表示动画值;

builder:有三个参数第一个是BuildContext,第二个是value用于接收上面两个参数定义的动画时间与动画值(类型取决于自己要做动画的数据类型),第三个是TweenAnimationBuilder的子组件,用于优化;

 把tween最大值加到50;点击程序热重载;

会发现字体是从30开始到50,而不是从50开始;

这是因为这个begin的值只是在程序刚开始执行时有用到;

探索Transform三个构造函数:缩放、旋转、平移;

缩放:Transform.scale:

效果:

代码:

Scaffold(
      body: Center(
        child: TweenAnimationBuilder(
          duration: Duration(seconds: 1),
          tween: Tween(begin: 1.0,end: 1.0),
          ///将动画时间与补间动画值传递给value
          builder: (BuildContext context, double value, Widget? child) {
            return Container(
              width: 250,
              height: 250,
              color: Colors.green,
              child: Center(
                ///这是一个缩放动画
                child: Transform.scale(
                  ///调用value
                  scale: value,
                  child: Text(
                    "flutter",
                    style: TextStyle(
                      fontSize: 40
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );

旋转:Transform.rotate

旋转是已π为单位;3.14等于半圈,6.28等于一圈;

效果:

代码:

Scaffold(
      body: Center(
        child: TweenAnimationBuilder(
          duration: Duration(seconds: 1),
          tween: Tween(begin: 0.0,end: 6.28),
          ///将动画时间与补间动画值传递给value
          builder: (BuildContext context, double value, Widget? child) {
            return Container(
              width: 250,
              height: 250,
              color: Colors.green,
              child: Center(
                ///这是一个旋转动画
                child: Transform.rotate(
                  ///调用value
                  angle: value,
                  child: Text(
                    "flutter",
                    style: TextStyle(
                      fontSize: 40
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );

平移:Transform.translate

以坐标为单位x、y

效果:

 代码:

Scaffold(
      body: Center(
        child: TweenAnimationBuilder(
          duration: Duration(seconds: 1),
          tween: Tween(begin: -30.0,end: -30.0),
          ///将动画时间与补间动画值传递给value
          builder: (BuildContext context, double? value, Widget? child) {
            return Container(
              width: 250,
              height: 250,
              color: Colors.green,
              child: Center(
                ///这是一个旋转动画
                child: Transform.translate(
                  ///调用value
                  offset: Offset(value!,value),
                  child: Text(
                    "flutter",
                    style: TextStyle(
                      fontSize: 40
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐