Prefacio
La biblioteca de animación de carga AVLoadingIndicatorView (https://github.com/81813780/AVLoadingIndicatorView) basada en la plataforma Android ha realizado la migración y refactorización de Hongmeng . El código se ha abierto a (https://gitee.com/iscas- ohos / avloading-indicador-view_ohos.git), ¡puedes descargarlo, usarlo y proporcionar valiosos comentarios!
antecedentes
El servidor a veces necesita esperar un período de tiempo cuando se cargan los datos. La animación de carga puede aliviar la ansiedad del usuario durante el proceso de espera y hacer que el proceso de espera sea más amigable y sencillo. AVLoadingIndicatorView es una biblioteca de animación de carga de código abierto, a través de la llamada de la biblioteca de animación, se pueden lograr una variedad de efectos de carga.
Pantalla de función de componente
1. Animación
En la versión original de Android, hay un total de 28 animaciones de carga en esta biblioteca de componentes, y la versión Hongmeng de la biblioteca de componentes implementó con éxito 21 efectos de animación. Debido a la falta de funciones API del sistema Hongmeng, actualmente 7 efectos de animación no se han migrado correctamente.
Figura 1 Diagrama esquemático del efecto AVLoadingIndicatorView
La Figura 1 muestra la visualización del efecto de animación de AVLoadingIndicatorView de la plataforma Hongmeng, que se puede dividir en 6 filas y 4 columnas. Los nombres correspondientes de los efectos de animación (de izquierda a derecha) son los siguientes:
Fila 1
BallPulseIndicator ， BallGridPulseIndicator ， BallClipRotateIndicator ， BallClipRotatePulseIndicator
Fila 2
PacmanIndicator ， BallClipRotateMultipleIndicator ， SemiCircleSpinIndicator ， BallRotateIndicator
Fila 3
BallScaleIndicator, LineScaleIndicator, LineScalePartyIndicator, BallScaleMultipleIndicator
Fila 4
BallPulseSyncIndicator ， BallBeatIndicator ， LineScalePulseOutIndicator ， LineScalePulseOutRapidIndicator
Fila 5
BallScaleRippleIndicator ， BallScaleRippleMultipleIndicator ， BallSpinFadeLoaderIndicator ， LineSpinFadeLoaderIndicator
Fila 6
BallGridBeatIndicator
2. Efecto de control de animación
El componente AVLoadingIndicatorView admite el control de los efectos de cada animación de carga.Los tipos de control se dividen en 4 tipos: inicio de animación, parada de animación, visualización de animación y ocultación de animación. El inicio y la parada de la animación están relacionados entre sí, y los dos se utilizan para controlar si la animación se ejecuta; la visualización de la animación y el ocultamiento de la animación están relacionados entre sí, y los dos se utilizan para controlar si aparece la animación. El control El efecto se muestra en la Figura 2.
Figura 2 Diagrama esquemático del control de cuatro efectos
Análisis de muestras
Cada animación de esta biblioteca de componentes tiene cuatro efectos de control: iniciar, detener, ocultar y mostrar. Para facilitar la depuración y la demostración, todos los objetos de animación se colocan en la misma lista en Sample, y todas las animaciones se controlan para que se inicien, se detengan, se oculten y se muestren al mismo tiempo mediante cuatro botones diferentes. El efecto se muestra en la Figura 2.
A continuación se describen los pasos para controlar que todas las animaciones se inicien, se detengan, se oculten y se muestren al mismo tiempo:
1. Importe la clase AVLoadingIndicatorView
import com.wang.avi.AVLoadingIndicatorView;
2. Agregar animación al diseño
Aquí debe agregar todas las animaciones al Diseño y colocar los objetos de cada animación en la misma lista (es decir, animatorList en el código).
// Tome BallPulseIndicator como ejemplo myLayout.addComponent (ballPulseIndicator); // BallPulseIndicator se agrega a Layout animatorList.add (ballPulseIndicator); // El objeto BallPulseIndicator se coloca en la lista
// Tome BallGridPulseIndicator como ejemplo myLayout.addComponent (ballGridPulseIndicator); animatorList.add (ballGridPulseIndicator);
3. Configure cuatro botones para controlar que todas las animaciones se inicien, se detengan, se oculten y se muestren al mismo tiempo.
Tome el efecto "inicio" como ejemplo. El botón startBtn tiene un oyente Click. Cuando se presiona el botón, se ejecutará el método startAllAnimator (). El método startAllAnimator () usa un bucle for para recorrer cada objeto de animación en la animatorList y llamar a cada El método start () del objeto logra el efecto de iniciar la animación.
// Botón de monitoreo startBtn.setClickedListener (componente-> startAllAnimator (animatorList)); // Inicio endBtn.setClickedListener (componente-> stopAllAnimator (animatorList)); // Detener hideBtn.setClickedListener (componente-> hideAllAnimator (animatorList)); / / Hide showBtn.setClickedListener (componente-> showAllAnimator (animatorList)); // mostrar
// iniciar
el vacío privado startAllAnimator (ArrayList <AVLoadingIndicatorView> avLoadingIndicatorViews) {
for (int i = 0; i <avLoadingIndicatorViews.size (); i ++) {
avLoadingIndicatorViews.get (i) .start (); // 启动
}
}
// detiene
el vacío privado stopAllAnimator (ArrayList <AVLoadingIndicatorView> avLoadingIndicatorViews) {
for (int i = 0; i <avLoadingIndicatorViews.size (); i ++) {
avLoadingIndicatorViews.get (i) .stop (); // 停止
}
}
// ocultar
vacío privado 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直接替换
En Android, use la clase ValueAnimator para establecer las propiedades de la animación de carga. Después del trasplante, estas funciones se implementan principalmente en función de la clase AnimatorValue de Hongmeng. Los nombres de los métodos en estas dos clases también son diferentes y deben reemplazarse uno por uno según la función al realizar la migración de Hongmeng. Por ejemplo: Hongmeng usa el método setLoopedCount () para reemplazar el método setRepeatCount () original para establecer el número de repeticiones de animación.
(2) Reescritura de funciones
En comparación con Android, la clase AnimatorValue de Hongmeng carece de muchas interfaces. Si necesita llamar a estas interfaces al implementar algunas animaciones complejas, solo puede usar el método de reescritura de funciones. Esta es también la principal dificultad en la migración. Por ejemplo, en Android, ValueAnimator.ofFloat (1,0.5f, 1) se usa para establecer los dos cambios del valor de la propiedad de animación 1—0.5f — 1 para lograr el efecto de ejecución de la animación. Sin embargo, Hongmeng carece de esta interfaz , y el valor de la propiedad solo puede estar en Un solo cambio entre 0 y 1 no puede lograr el efecto perfecto de la animación, y la función necesita ser reescrita El código para esta función reescribir se da a continuación.
public void onUpdate (AnimatorValue animatorValue, float v) {
if (v <= 0.5f)
scaleFloats [index] = 1-v;
else
scaleFloats [índice] = v;
invalidar();
}
El contenido de seguimiento del artículo y los archivos adjuntos relacionados puede hacer clic en el enlace original a continuación para conocer el
enlace original: https://harmonyos.51cto.com/posts/2928#bkwz
Para obtener más información sobre Hongmeng, visite:
Comunidad tecnológica de Hongmeng creada por la cooperación estratégica oficial 51CTO y Huawei
https://harmonyos.51cto.com/#bkwz