返回

形变的等待效果

IOS

随着技术发展,愈来愈多的应用在等待网络回应时使用闪烁的效果。那么该如何实现这种效果呢?下面会具体进行讲解,相关代码已经放在Github。

一、增加覆盖层以及动态效果

1、获取控件path

获取每个控件,并计算出控件的路径。

// 获取控件的 path
List<Path> paths = new ArrayList<>();
for (View view : findViewByIds(container)) {
    if (view.getVisibility() == VISIBLE) {
        paths.add(getPath(view));
    }
}

2、创建ShapeDrawable

在控件上创建一个形状可绘制的图形。

// 创建 ShapeDrawable
ShapeDrawable drawable = new ShapeDrawable(new PathShape(paths, null, null));

3、设置ShapeDrawable颜色

将形状可绘制图形的颜色设置为覆盖层颜色。

// 设置 ShapeDrawable 颜色
drawable.getPaint().setColor(maskColor);

4、创建AnimationDrawable

创建动画可绘制图形,并添加形状可绘制图形。

// 创建 AnimationDrawable
AnimationDrawable animationDrawable = new AnimationDrawable();
animationDrawable.addFrame(drawable, FrameDuration);

5、设置AnimationDrawable循环次数

将动画可绘制图形的循环次数设置为无限循环。

// 设置 AnimationDrawable 循环次数
animationDrawable.setOneShot(false);

6、将AnimationDrawable设置为控件的背景

将动画可绘制图形设置为控件的背景。

// 将 AnimationDrawable 设置为控件的背景
container.setBackground(animationDrawable);

7、启动AnimationDrawable

启动动画可绘制图形。

// 启动 AnimationDrawable
animationDrawable.start();

二、实现点击后效果

1、获取控件path

获取每个控件,并计算出控件的路径。

// 获取控件的 path
List<Path> paths = new ArrayList<>();
for (View view : findViewByIds(container)) {
    if (view.getVisibility() == VISIBLE) {
        paths.add(getPath(view));
    }
}

2、创建ShapeDrawable

在控件上创建一个形状可绘制的图形。

// 创建 ShapeDrawable
ShapeDrawable drawable = new ShapeDrawable(new PathShape(paths, null, null));

3、设置ShapeDrawable颜色

将形状可绘制图形的颜色设置为点击后效果颜色。

// 设置 ShapeDrawable 颜色
drawable.getPaint().setColor(clickEffectColor);

4、创建AnimationDrawable

创建动画可绘制图形,并添加形状可绘制图形。

// 创建 AnimationDrawable
AnimationDrawable animationDrawable = new AnimationDrawable();
animationDrawable.addFrame(drawable, FrameDuration);

5、设置AnimationDrawable循环次数

将动画可绘制图形的循环次数设置为无限循环。

// 设置 AnimationDrawable 循环次数
animationDrawable.setOneShot(false);

6、将AnimationDrawable设置为控件的背景

将动画可绘制图形设置为控件的背景。

// 将 AnimationDrawable 设置为控件的背景
container.setBackground(animationDrawable);

7、启动AnimationDrawable

启动动画可绘制图形。

// 启动 AnimationDrawable
animationDrawable.start();

三、总结

以上就是实现闪烁加载效果的步骤。这种效果可以增加用户体验,让用户在等待网络回应时不会感到无聊。