鸿蒙开源第三方组件的迁移-加载动画库

鸿蒙开源第三方组件迁移-加载动画库加载动画库AVLoadingIndicatorView（https://github.com/81813780/AVLoadingIndicatorView），实现鸿蒙迁移和重构，代码已经开源到（https://github.com/81813780/AVLoadingIndicatorView）/gitee.com/iscas-ohos/avloading-indicator-view_ohos.git)，欢迎大家下载使用并提出宝贵意见！后台服务器在加载数据时有时需要等待一段时间。加载动画可以缓解用户在等待过程中的焦虑情绪，让等待过程更加友好流畅。AVLoadingIndicatorView是一个开源的加载动画库，通过调用动画库可以实现各种加载效果。组件功能展示1.动画效果在Android原版中，该组件库中有28个加载动画，鸿蒙版组件库成功实现了其中的21个。由于鸿蒙系统缺少部分API函数，目前还有7个动画效果没有成功迁移。图1AVLoadingIndicatorView效果示意图图1为鸿蒙平台AVLoadingIndicatorView的动画效果展示，分为6行4列。Thecorrespondingnamesoftheanimationeffects(fromlefttoright)areasfollows:Row1BallPulseIndicator,BallGridPulseIndicator,BallClipRotateIndicator,BallClipRotatePulseIndicatorRow2PacmanIndicator，BallClipRotateMultipleIndicator，SemiCircleSpinIndicator，BallRotateIndicatorRow3BallScaleIndicator，LineScaleIndicator，LineScalePartyIndi??cator，BallScaleMultipleIndicatorRow4BallPulseSyncIndicator，BallBeatIndicator，LineScalePulseOutIndicator，LineScalePulseOutRapidIndicatorRow5BallScaleRippleIndicator，BallScaleRippleMultipleIndicator，BallSpinFadeLoaderIndicator，LineSpinFadeLoaderIndicatorRow6BallGridBeatIndicator2.动画控制效果AVLoadingIndicatorView组件支持对加载动画的效果进行控制，控制有4种类型：动画开始、动画停止、动画显示和动画隐藏。动画开始和动画停止是相互关联的，它们用来控制动画是否运行；动画显示和动画隐藏是相互关联的，都用来控制动画是否出现，控制效果如图2所示。图2四种效果控件示例分析示意图该组件库中的每一种动画都有四种控制效果：开始、停止、隐藏和显示。为了方便调试和演示，Sample中将所有的动画对象放在同一个列表中，并用四个不同的按钮控制所有动画同时开始、停止、隐藏和显示，效果如图2所示.下面介绍控制所有动画同时启动、停止、隐藏和显示的步骤：1、导入AVLoadingIndicatorView类importcom.wang.avi.AVLoadingIndicatorView；2、给Layout添加动画这里需要把所有的动画都添加到Layout中，并且把每个动画都放在同一个列表（也就是代码中的animatorList）的对象中。//以BallPulseIndicator为例myLayout.addComponent(ballPulseIndicator);//将BallPulseIndicator添加到LayoutanimatorList.add(ballPulseIndicator);//将BallPulseIndicator对象放入列表//以BallGridPulseIndicator为例myLayout.addComponent(ballGridPulsePulseIndicator);animatorGrid.添加（seball）；3。设置四个按钮控制所有动画同时开始、停止、隐藏和显示。以“开始”效果为例，startBtn按钮设置了Click监听器，当按钮被按下时，会执行startAllAnimator()方法。startAllAnimator()方法使用for循环遍历animatorList中的每一个动画对象，调用每一个对象的start()方法，达到开始动画的效果。//按钮监听startBtn.setClickedListener(component->startAllAnimator(animatorList));//启动endBtn.setClickedListener(component->stopAllAnimator(animatorList));//停止hideBtn.setClickedListener(component->hideAllAnimator(animatorList));//hiddenshowBtn.setClickedListener(component->showAllAnimator(animatorList));//显示//startprivatevoidstartAllAnimator(ArrayListavLoadingIndicatorViews){for(inti=0;iavLoadingIndicatorViews){for(inti=0;iavLoadingIndicatorViews){for(inti=0;iavLoadingIndicatorViews){for(inti=0;i{setPaint();//设置画笔setBound();//设置动画边界draw(canvas,getPaint());//内容绘制};addDrawTask(task);}(2)动画绘制使用draw()方法在画布上绘制动画样式。由于BallPulseIndicator动画的主体是三个圆，而第二个和第三个圆是从前一个圆平移过来的，所以需要设置每两个圆之间的距离，圆的半径等属性。publicvoiddraw(Canvascanvas,Paintpaint){floatcircleSpacing=4;//设置圆之间的距离floatradius=(Math.min(getWidth(),getHeight())-circleSpacing*2)//6;//设置圆的半径floatx=getWidth()/2-(radius*2+circleSpacing);//圆心x轴坐标floaty=getHeight()/2;//圆心y轴坐标for(inti=0;i<3;i++){canvas.save();floattranslateX=x+(radius*2)*i+circleSpacing*i;//平移后新圆心的x轴坐标canvas.translate(translateX,y);canvas.scale(scaleFloats[i],scaleFloats[i]);//缩放效果绘制canvas.drawCircle(0,0,radius,paint);//绘制圆形canvas.restore();}}(3）动画参数设置使用AnimatorValue具体设置动画参数，包括动画的Duration、重复次数、开始延迟时间、缩放和旋转等（BallPulseIndicator只涉及缩放，不涉及旋转）。publicArrayListonCreateAnimators(){ArrayListanimators=newArrayList<>();int[]delays=newint[]{120,240,360};??//设置三圈的延迟时间for(inti=0;i<3;i++){finalintindex=i;AnimatorValuescaleAnim=newAnimatorValue();//赋值动画scaleAnim.setDuration(750);//动画时长scaleAnim.setLoopedCount(-1);//动画无限重复scaleAnim。setDelay(delays[i]);//每圈的延迟时间addUpdateListener(scaleAnim,(animatorValue,v)->{scaleFloats[index]=v;//控制缩放invalidate();//刷新界面});animators.add(scaleAnim);}returnanimators;}2。迁移方法（1）API直接替换Android中使用ValueAnimator类设置的加载动画的属性。移植后，这些功能主要是基于鸿蒙的AnimatorValue类实现的。这两个类中的方法名也不一样，在进行鸿蒙迁移时需要根据功能一一替换。例如：鸿蒙使用setLoopedCount()方法代替原来的setRepeatCount()方法来设置动画重复次数。(2)功能重写与Android相比，鸿蒙的AnimatorValue类缺少了很多接口。如果在实现一些复杂的动画时需要调用这些接口，只能使用函数重写，这也是移植的主要难点。比如Android中通过ValueAnimator.ofFloat(1,0.5f,1)来设置动画属性值1—0.5f—1的两次变化来实现动画的运行效果，但是鸿蒙没有这个接口，属性值只能在0和1之间单一变化，无法达到完美的动画效果，需要函数重写。下面给出了这个函数重写的代码。publicvoidonUpdate(AnimatorValueanimatorValue,floatv){if(v<=0.5f)scaleFloats[index]=1-v;elsescaleFloats[index]=v;invalidate();}?版权归作者及鸿蒙技术社区所有，如有如需转载请注明出处，否则将追究法律责任。了解更多请访问：与华为官方共建鸿蒙科技社区https://harmonyos.51cto.com/#zz