Android怎么利用ScaleTransition实现吹气球动画(android,开发技术)

前言

对于只需要放大或缩小的场合，可以直接使用ScaleTransition来完成，例如我们本篇实现了一个气球从小到大，感觉像被用力吹起来一样的动画效果。

ScaleTransition 介绍

ScaleTransition的使用非常简单，只有三个参数，构造方法定义如下。

constScaleTransition({Key?key,requiredAnimation<double>scale,this.alignment=Alignment.center,this.child,})

参数对应的说明如下：

• scale：即组件的缩放尺寸，为Animation对象，组件实际的尺寸等于组件的实际尺寸乘以该对象的值。。

• alignment：即缩放的起始对齐位置，通过这个参数可以控制组件的缩放方向，比如我们的气球就是从bottomCenter开始缩放的，这样气球嘴那边感觉没有动一样。

• child：要缩放的子组件。

应用

我们要实现的气球动画非常简单，找一张气球图片 。然后使用一个 Animation 对象控制缩放的时间和大小即可。因为气球后面越来越难吹，因此我们将曲线设置为easeOut（先快后慢），源代码如下：

classScaleTransitionDemoextendsStatefulWidget{ScaleTransitionDemo({Key?key}):super(key:key);@override_ScaleTransitionDemoStatecreateState()=>_ScaleTransitionDemoState();}class_ScaleTransitionDemoStateextendsState<ScaleTransitionDemo>withSingleTickerProviderStateMixin{lateAnimationController_controller=AnimationController(duration:constDuration(seconds:10),vsync:this)..repeat();//使用自定义曲线动画过渡效果lateAnimation<double>_animation=CurvedAnimation(parent:_controller,curve:Curves.easeOut);@overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:Text('ScaleTransition'),brightness:Brightness.dark,backgroundColor:Colors.blue,),body:Center(child:balloon(),),);}@overridevoiddispose(){_controller.stop();_controller.dispose();super.dispose();}Widgetballoon(){returnScaleTransition(alignment:Alignment.bottomCenter,child:Image.asset('images/balloon.png',),scale:_animation,);}}