海南网站开发公司,wordpress浮窗插件,网站自定义链接怎么做的,网站制作案例市场动画三要素 控制动画的三要素#xff1a;Animation、Tween、和AnmaitionController Animation#xff1a; 产生的值的序列#xff0c;有CurveAnimation等子类#xff0c;#xff0c; 可以将值赋值给Widget的宽高或其他属性#xff0c;进而控制widget发生变化 Tween#… 动画三要素 控制动画的三要素Animation、Tween、和AnmaitionController Animation 产生的值的序列有CurveAnimation等子类 可以将值赋值给Widget的宽高或其他属性进而控制widget发生变化 Tween可以定义值的变化范围 继承自AnimatableT每个类都有begin和end两个属性同时有CurveTween等子类可以定义值在begin和end间的变化方式。 AnimationController 动画的控制器可以设置动画的时长控制动画开始或者结束等 有两种方式生成Animation 1_controller.drive(_curveTween) 2_curveTween.animate(_controller) Widget动画相关属性 1Container的width、height 控制Widget大小 2SlideTransition 的position 通过TweenOffset控制Widget的位移 3 Align的heightFactor 控制Widget的展开或收起 4 AnimatedOpacity的opacity属性控制Widget的渐隐渐显 两种动画实现方式 Flutter中动画主要有两种实现方式即通过addListener监听Animation的值的变化 或者用AnimationBuilder来构建参与动画的Widget。 下面看一个通过addListener实现动画的例子 //动画控制器
final AnimationController controller new AnimationController(duration: const Duration(milliseconds: 500), vsync: this);
//创建一个值的序列其变化方式为Curve中的淡出效果
final Animation curve new CurvedAnimation(parent: controller, curve: Curves.easeOut);
//通过tween指定值的变化范围为0255
Animationint animation new IntTween(begin: 0, end: 255).animate(curve);
//监听动画状态的变化 动画是否结束
..addStatusListener((status) {if (status AnimationStatus.completed) {controller.reverse();} else if (status AnimationStatus.dismissed) {controller.forward();}})
//监听Animation的值的变化更新UI
..addListener(() {setState(() {// 将animation.value赋值给指定的Widget的属性_opacity animation.value.toDouble() / 255;}); });//动画开始
controller.forward();再看下如何通过AnimationBuilder构建动画 Widget build(BuildContext context) Center(child: AnimatedBuilder(animation: animation,builder: (context, child) Container(height: animation.value,width: animation.value,child: child,),child: child),);
} 不难看出使用AnimationBuilder来实现动画效果代码要简洁的多是更为推荐的实现方式。
