网站登录不上怎么回事,海口今天发现一例,wordpress发外链,简述电子商务网站建设的主要步骤目录 前言
一、TweenAnimationBuilder
二、使用TweenAnimationBuilder实现的一些动画效果
1.调整透明度的动画
2.稍微复杂点的组合动画
3.数字跳动的动画效果 前言 上两节博客分别介绍了Flutter中的隐式动画的基础知识以及使用隐式动画实现的一些动画效果。当系统提供的隐…
目录 前言
一、TweenAnimationBuilder
二、使用TweenAnimationBuilder实现的一些动画效果
1.调整透明度的动画
2.稍微复杂点的组合动画
3.数字跳动的动画效果 前言 上两节博客分别介绍了Flutter中的隐式动画的基础知识以及使用隐式动画实现的一些动画效果。当系统提供的隐式动画不能满足我们的需求的时候我们还可以通过TweenAnimationBuilder 自定义我们的隐式动画。 下面进入正题我们了解下TweenAnimationBuilder的一些知识。
一、TweenAnimationBuilder TweenAnimationBuilder 是 Flutter 中用于创建动画的便捷小部件它提供了一种简单的方法来使用 Tween 定义的值在一段时间内生成平滑的过渡效果。适用于需要根据数值变化进行动画的场景例如颜色、大小、透明度或位置等过渡效果。 TweenAnimationBuilder 的主要属性包括 tween用于描述动画的开始和结束值。例如可以是 Tweendouble(begin: 0, end: 100) duration动画的持续时间。 builder每一帧调用一次构建动画效果的 UI传入当前的动画值。 onEnd动画结束时的回调可用于触发其他动。
二、使用TweenAnimationBuilder实现的一些动画效果
1.调整透明度的动画 以下代码演示了如何使用 TweenAnimationBuilder 在两种透明度之间创建渐变动画效果 图1.透明度渐变的动画效果
代码如下
import package:flutter/material.dart;class TweenAnimationExample extends StatelessWidget {const TweenAnimationExample({super.key});overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Colors.purple,title: const Text(TweenAnimationBuilder ,style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold,fontSize: 16),),),body: Center(child: TweenAnimationBuilder(tween: Tweendouble(begin: 0.0, end: 1.0),duration: const Duration(seconds: 2),builder: (context, double opacity, child) {return Opacity(opacity: opacity,child: child,);},child: Container(width: 100,height: 100,color: Colors.blue,),),),);}
}
在这个示例中我们定义了一下属性
tween 定义了从 0.0 到 1.0 的透明度过渡。duration 设置动画持续时间为 2 秒。builder 函数在每一帧构建一个带有当前透明度的 Opacity 小部件从而形成透明度渐变的动画效果。
2.稍微复杂点的组合动画 我们还可以结合隐式动画的渐变、缩放、圆角、旋转等属性实现稍微复杂的动画效果。 例如我们要实现图2所示的动画效果 图2.复杂的动画效果
代码如下
import package:flutter/material.dart;
import dart:math;class ComplexAnimationExample extends StatefulWidget {const ComplexAnimationExample({super.key});overrideStateComplexAnimationExample createState() _ComplexAnimationExampleState();
}class _ComplexAnimationExampleState extends StateComplexAnimationExample {bool _isAnimated false;void _toggleAnimation() {setState(() {_isAnimated !_isAnimated;});}overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Colors.purple,title: const Text(TweenAnimationBuilder,style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold,fontSize: 16),), ),body: Center(child: GestureDetector(onTap: _toggleAnimation,child: TweenAnimationBuilder(duration: const Duration(seconds: 2),tween: Tweendouble(begin: 0, end: _isAnimated ? 2 * pi : 0),builder: (context, double rotation, child) {return Transform.rotate(angle: rotation,child: TweenAnimationBuilder(duration: const Duration(seconds: 2),tween: ColorTween(begin: Colors.purple, end: _isAnimated ? Colors.orange : Colors.purple),builder: (context, Color? color, child) {return TweenAnimationBuilder(duration: const Duration(seconds: 2),tween: BorderRadiusTween(begin: BorderRadius.circular(10),end: BorderRadius.circular(_isAnimated ? 75 : 10)),builder: (context, BorderRadius? borderRadius, child) {return TweenAnimationBuilder(duration: const Duration(seconds: 2),tween: Tweendouble(begin: 100, end: _isAnimated ? 200 : 100),builder: (context, double size, child) {return Container(width: size,height: size,decoration: BoxDecoration(color: color,borderRadius: borderRadius,),child: child,);},child: const Center(child: Text(点击看动画!,style: TextStyle(fontSize: 14, color: Colors.white),),),);},);},),);},),),),);}
} 在我们的例子中 1. 旋转最外层的 TweenAnimationBuilder 使用 Tweendouble 定义旋转角度的动画从 0 到 2π即旋转一整圈。
2. 颜色渐变在旋转的基础上嵌套了一个 TweenAnimationBuilder使用 ColorTween 从紫色渐变到橙色。
3. 边框圆角进一步嵌套了一个 BorderRadiusTween实现容器边框从圆角半径 10 变化到 75。
4. 尺寸变化最内层的 TweenAnimationBuilder 使用 Tweendouble 控制容器大小在 100 到 200 之间平滑过渡。
5. 点击切换动画通过 GestureDetector 包裹点击容器触发 _toggleAnimation() 方法使 _isAnimated 状态切换并重建 Widget从而实现动画的来回切换。
3.数字跳动的动画效果 我们在使用一些支付app的时候经常会看到图3所示的动画效果。 我们看看如何使用TweenAnimationBuilder实现数字的渐变动画。 大致的思路如下使用 TweenAnimationBuilder 实现一个数字从 1000 到 2000 的渐变动画。TweenAnimationBuilder 能够逐步生成中间值从而呈现数字的平滑渐变效果。下面是一个完整的示例代码通过 Tweenint 来定义数字范围并逐步更新显示的数值。 图3.数字渐变动画
代码如下
import package:flutter/material.dart;class NumberTransitionExample extends StatefulWidget {const NumberTransitionExample({super.key});overrideStateNumberTransitionExample createState() _NumberTransitionExampleState();
}
class _NumberTransitionExampleState extends StateNumberTransitionExample {bool _isAnimating false;void _toggleAnimation() {setState(() {_isAnimating !_isAnimating;});}overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Colors.purple,title: const Text(TweenAnimationBuilder,style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold,fontSize: 16),),),body: Center(child: TweenAnimationBuilder(tween: IntTween(begin: 1000, end: _isAnimating ? 2000 : 1000),duration: const Duration(seconds: 3),onEnd: () debugPrint(Animation Complete),builder: (context, int value, child) {return Text($value,style: const TextStyle(fontSize: 48, fontWeight: FontWeight.bold),);},),),floatingActionButton: FloatingActionButton(onPressed: _toggleAnimation,child: const Icon(Icons.play_arrow),),);}
} 在上面的例子中Tweenint使用 IntTween 将动画的整数起点设为 1000终点为 2000。点击按钮后起点和终点之间的值会逐步更新。 点击“播放”按钮后屏幕上数字会从 1000 平滑过渡到 2000直到动画完成。
