序文
Androidプラットフォームに基づく読み込みアニメーションライブラリAVLoadingIndicatorView（https://github.com/81813780/AVLoadingIndicatorView）は、 Hongmengの移行とリファクタリングを実現しました。コードは（https://gitee.com/iscas-）にオープンソース化されています。 ohos / avloading-indicator-view_ohos.git）、ダウンロードして使用し、貴重なコメントを提供してください！
バックグラウンド
サーバーは、データをロードするときに一定時間待機する必要がある場合があります。ロードアニメーションは、待機プロセス中のユーザーの不安を軽減し、待機プロセスをよりフレンドリーでスムーズにすることができます。AVLoadingIndicatorViewはオープンソースの読み込みアニメーションライブラリであり、アニメーションライブラリを呼び出すことで、さまざまな読み込み効果を実現できます。
コンポーネント機能表示
1.アニメーション
オリジナルのAndroidバージョンでは、このコンポーネントライブラリに合計28の読み込みアニメーションがあり、コンポーネントライブラリのHongmengバージョンは21のアニメーション効果を正常に実装しました。HongmengシステムのAPI機能が不足しているため、現在7つのアニメーション効果が正常に移行されていません。
図1AVLoadingIndicatorView効果の概略図
図1は、HongmengプラットフォームのAVLoadingIndicatorViewのアニメーション効果の表示を示しています。これは6行4列に分割できます。アニメーション効果の対応する名前（左から右）は次のとおりです。
行1
BallPulseIndicator、BallGridPulseIndicator、BallClipRotateIndicator、BallClipRotatePulseIndicator
行2
PacmanIndicator、BallClipRotateMultipleIndicator、SemiCircleSpinIndicator、BallRotateIndicator
行3
BallScaleIndicator、LineScaleIndicator、LineScalePartyIndicator、BallScaleMultipleIndicator
行4
BallPulseSyncIndicator、BallBeatIndicator、LineScalePulseOutIndicator、LineScalePulseOutRapidIndicator
行5
BallScaleRippleIndicator、BallScaleRippleMultipleIndicator、BallSpinFadeLoaderIndicator、LineSpinFadeLoaderIndicator
行6
BallGridBeatIndicator
2.アニメーション制御効果
AVLoadingIndicatorViewコンポーネントは、各読み込みアニメーションの効果の制御をサポートします。制御タイプは、アニメーションの開始、アニメーションの停止、アニメーションの表示、アニメーションの非表示の4つのタイプに分けられます。アニメーションの開始と停止は相互に関連しており、2つはアニメーションを実行するかどうかを制御するために使用され、アニメーションの表示と非表示は相互に関連し、2つはアニメーションを表示するかどうかを制御するために使用されます。制御効果は図2に示されています。
図24つの効果制御の概略図
サンプル分析
このコンポーネントライブラリの各アニメーションには、開始、停止、非表示、表示の4つのコントロール効果があります。デバッグとデモンストレーションを容易にするために、すべてのアニメーションオブジェクトはサンプルの同じリストに配置され、すべてのアニメーションは4つの異なるボタンを使用して同時に開始、停止、非表示、表示するように制御されます。効果を図2に示します。
次に、すべてのアニメーションを制御して、開始、停止、非表示、および表示を同時に行う手順について説明します。
1.AVLoadingIndicatorViewクラスをインポートします
インポートcom.wang.avi.AVLoadingIndicatorView;
2.レイアウトにアニメーションを追加します
ここでは、すべてのアニメーションをレイアウトに追加し、各アニメーションのオブジェクトを同じリスト（つまり、コード内のanimatorList）に配置する必要があります。
// BallPulseIndicatorを例として 取り上げますmyLayout.addComponent（ballPulseIndicator）; // BallPulseIndicatorがレイアウトに追加されます animatorList.add（ballPulseIndicator）; // BallPulseIndicatorオブジェクトがリストに配置されます
// BallGridPulseIndicatorを例として 取り上げますmyLayout.addComponent（ballGridPulseIndicator）; animatorList.add（ballGridPulseIndicator）;
3. 4つのボタンを設定して、開始、停止、非表示、表示を同時に行うすべてのアニメーションを制御します。
例として「開始」効果を取り上げます。startBtnボタンにはClickリスナーがあります。ボタンを押すと、startAllAnimator（）メソッドが実行されます。startAllAnimator（）メソッドは、forループを使用してanimatorList内の各アニメーションオブジェクトをトラバースします。オブジェクトのstart（）メソッドは、アニメーションを開始する効果を実現します。
//ボタンの監視 startBtn.setClickedListener（component-> startAllAnimator（animatorList））; // Start endBtn.setClickedListener（component-> stopAllAnimator（animatorList））; // hideBtn.setClickedListener（component-> hideAllAnimator（animatorList））; / / Hide showBtn.setClickedListener（component-> showAllAnimator（animatorList））; // show
//
private void startAllAnimator（ArrayList <AVLoadingIndicatorView> avLoadingIndicatorViews）{
for（int i = 0; i <avLoadingIndicatorViews.size（）; i ++）{
avLoadingIndicatorViews.get（i）.start（）; //启PIN
}
}を開始します
//
プライベートvoidstopAllAnimator（ArrayList <AVLoadingIndicatorView> avLoadingIndicatorViews）{
for（int i = 0; i <avLoadingIndicatorViews.size（）; i ++）{
avLoadingIndicatorViews.get（i）.stop（）; //停止
}
}を停止します
//
private void hideAllAnimator（ArrayList <AVLoadingIndicatorView> avLoadingIndicatorViews）{
for（int i = 0; i <avLoadingIndicatorViews.size（）; i ++）{
avLoadingIndicatorViews.get（i）.hide（）; //隐藏
}
}
//show
private void showAllAnimator(ArrayList<AVLoadingIndicatorView> avLoadingIndicatorViews){
for (int i = 0; i < avLoadingIndicatorViews.size(); i++) {
avLoadingIndicatorViews.get(i).show();//显示
}
}
Library解析
1. 功能实现
每个动画效果的绘制都需要执行初始化设置、添加绘画任务、创建动画三个步骤，下面以BallPulseIndicator为例对这三个步骤进行详细介绍。
(1) 初始化设置 声明setPaint()，setBound()，draw()方法。
public BallPulseIndicator(Context context) {
super(context);
Component.DrawTask task = (component, canvas) -> {
setPaint();//设置画笔
setBound();//设置动画边界
draw(canvas,getPaint());//内容绘制
};
addDrawTask(task);
}
(2) 动画绘制 用draw()方法在画布上绘制动画样式。
由于BallPulseIndicator动画主体是三个圆，第二、第三个圆均是由前一个圆平移得到，因此要设置每两个圆之间的距离，圆的半径大小等属性。
public void draw(Canvas canvas, Paint paint) {
float circleSpacing=4; //设置圆之间距离
float radius=(Math.min(getWidth(),getHeight())-circleSpacing*2)/6; //设置圆的半径大小
float x = getWidth()/ 2-(radius*2+circleSpacing);//圆心的x轴坐标
float y=getHeight() / 2;//圆心的y轴坐标
for (int i = 0; i < 3; i++) {
canvas.save();
float translateX=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对动画参数进行具体设置，包括动画的持续时间、重复次数、启动延迟时间、缩放和旋转等（BallPulseIndicator只涉及缩放而无旋转）。
public ArrayList<AnimatorValue> onCreateAnimators() {
ArrayList<AnimatorValue> animators=new ArrayList<>();
int[] delays=new int[]{120,240,360}; //设置三个圆的延迟时间
for (int i = 0; i < 3; i++) {
final int index=i;
AnimatorValue scaleAnim=new AnimatorValue(); //值动画
scaleAnim.setDuration(750); //动画持续时间
scaleAnim.setLoopedCount(-1); //动画无限次重复
scaleAnim.setDelay(delays[i]); //每个圆的延迟时间
addUpdateListener(scaleAnim, (animatorValue, v) -> {
scaleFloats[index] = v;//控制缩放
invalidate();//刷新界面
});
animators.add(scaleAnim);
}
return animators;
}
2. 移植方法
(1) API直接替换
Androidでは、ValueAnimatorクラスを使用して、アニメーションの読み込みのプロパティを設定します。移植後、これらの関数は主にHongmengのAnimatorValueクラスに基づいて実装されます。これら2つのクラスのメソッド名も異なり、Hongmeng移行を実行するときに、関数に応じて1つずつ置き換える必要があります。次に例を示します。HongmengはsetLoopedCount（）メソッドを使用して、元のsetRepeatCount（）メソッドを置き換え、アニメーションの繰り返し回数を設定します。
（2）関数の書き換え
Androidと比較して、HongmengのAnimatorValueクラスには多くのインターフェースがありません。複雑なアニメーションを実装するときにこれらのインターフェースを呼び出す必要がある場合は、関数の書き換えの方法しか使用できません。これは、移植の主な問題でもあります。たとえば、Androidでは、ValueAnimator.ofFloat（1,0.5f、1）を使用してアニメーションプロパティ値1—0.5f—1の2つの変更を設定し、アニメーションの実行効果を実現します。ただし、Hongmengにはこのインターフェイスがありません。 、およびプロパティ値は次のようになります。0と1の間の単一の変更では、アニメーションの完全な効果を達成できず、関数を書き直す必要があります。この関数の書き直しのコードを以下に示します。
public void onUpdate（AnimatorValue animatorValue、float v）{
if（v <= 0.5f）
scaleFloats [index] = 1-v;
それ以外の場合、
scaleFloats [index] = v;
invalidate（）;
}
記事のフォローアップコンテンツと関連する添付ファイルは、以下の元のリンクをクリックして、元のリンクを確認できます
：https：//harmonyos.51cto.com/posts/2928#bkwz
Hongmengの詳細については、次のWebサイトをご覧ください。
51CTOとHuaweiの公式戦略協力によって構築されたHongmengテクノロジーコミュニティ
https://harmonyos.51cto.com/#bkwz