1.2 Создание объекта ExplosionField, который наследуется от Component и используется как холст для набора частиц. Необходимо переопределить метод onDraw().
        ```Java
        public class ExplosionField extends Component {
          // Код опущен
        }
        ```
    1.3 Создание объекта ExplosionAnimator, который наследуется от ValueAnimator и используется для выполнения пользовательских анимаций.
        ```Java
         public class ExplosionAnimator extends AnimatorValue implements AnimatorValue.ValueUpdateListener {
           // Код опущен
         }
         ```
    1.4 Создание пустого изображения того же размера, что и исходный компонент, с помощью метода createPixelmap() класса PixelMap.
        ```Java
         private PixelMap getPixelMap(int resId) {
           // Код опущен
           return null;
         }
         ```
    1.5 Разделение изображения на несколько частиц, которые затем могут быть анимированы для создания эффекта взрыва.
        ```Java
         public static Particle generateParticle(int color, Rect bound, Point point) {
           // Код опущен
           Particle
         }
         ``` **particle = new Particle();**

particle.mBound = bound;
//粒子颜色
particle.color = color;
//粒子透明度
particle.alpha = 1f;
//把半径设为宽长
particle.radius = PART_WH;
//圆心坐标
particle.cx = bound.left + PART_WH * column;
particle.cy = bound.top + PART_WH * row;
return particle;
}

**1.6 В ExplosionAnimator через метод getAnimatedValue() можно непрерывно получать диапазон (обозначим как factor).**

Мы сначала в Particle получаем факторы изменения, после чего должны произойти изменения свойств. Можно перемещать cx влево и вправо, cy — вниз, причём расстояние связано с высотой view. radius уменьшается, alpha становится всё более прозрачной.

public void advance(float factor) {
    //Перемещение x-координаты частицы
    cx = cx + factor * random.nextInt(mBound.getWidth()) * (random.nextFloat() -0.5f);
    //Перемещение y-координаты частицы
    cy = cy + factor * random.nextInt(mBound.getHeight() / 2);
    //Радиус уменьшается
    radius = radius - factor * random.nextInt(2);
    //Прозрачность также постепенно меняется
    alpha = (1f - factor) * (1 + random.nextFloat());
}
}

**1.7 В ExplosionField создаём метод «взрыв», который нужно вызвать, передав Component.**

После этого выполняется animator.start(). Component, и будет выполнен эффект взрыва.

public void explode(final Component view) {
    //Получаем абсолютные координаты view на экране
    int[] positions = view.getLocationOnScreen();
    //Исправляем смещение из-за строки состояния
    positions[1] = positions[1] - 159;
    Rect rect = view.getComponentPosition();
    //Делаем размер изображения равным размеру разрушения
    rect.set(rect.left - 75, rect.top, rect.right + 75, rect.bottom + 150);
    final ExplosionAnimator animator = new ExplosionAnimator(this, createBitmapFromView(view), rect);
    explosionAnimators.add(animator);
}

**1.8 На верхнем уровне Activity накладываем прозрачный слой ExplosionField для отображения анимации частиц.**

private void attach2Activity(Ability activity) {
    ComponentContainer rootView = (ComponentContainer) activity.findComponentById(ResourceTable.Id_group1).getComponentParent().getComponentParent();
    ComponentContainer.LayoutConfig lp = new ComponentContainer.LayoutConfig(
            ComponentContainer.LayoutConfig.MATCH_PARENT, ComponentContainer.LayoutConfig.MATCH_PARENT);
    rootView.addComponent(this, lp);
}

**1.9 Вызываем метод addListener(), чтобы добавить прослушиватель к view, который должен реализовать эффект щелчка.**

public void addListener(Component view) {
    if (view instanceof ComponentContainer) {
        ComponentContainer viewGroup = (ComponentContainer) view;
        int count = viewGroup.getChildCount();
        for (int i = 0; i < count; i++) {
            addListener(viewGroup.getComponentAt(i));
        }
    } else {
        view.setClickable(true);
        view.setClickedListener(getOnClickListener());
    }
}

private ClickedListener getOnClickListener() {
    if (null == onClickListener) {
        onClickListener = new ClickedListener() {
            @Override
            public void onClick(Component component) {
                ExplosionField.this.explode(component);
            }
        };
    }
    return onClickListener;
}
}

**2. Макет и инициализация**

**2.1 XML-макет**

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
              ohos:id="$+id:root"
              ohos:width="match_parent"
              ohos:height="match_parent"
              ohos:orientation="vertical"
        >
    <Text
            ohos:width="match_content"
            ohos:text="Эффект разрушения"
            ohos:text_size="60vp"
            ohos:top_margin="10vp"
            ohos:left_margin="30vp"
            ohos:bottom_margin="15vp"
            ohos:right_padding="15vp"
            ohos:left_padding="15vp"
            ohos:height="match_content"/>

    <DirectionalLayout ohos:id="$+id:group1"
                  ohos:width="match_parent"
                  ohos:height="100vp"
                  ohos:top_margin="10vp"
                  ohos:orientation="horizontal"
            >

        <Image
            ohos:id="$+id:qq"
                ohos:width="match_content"
                ohos:height="match_content"
                ohos:image_src="$media:qq"
            ohos:left_margin="25vp"
            ohos:right_margin="25vp"
            ohos:top_margin="15vp"

            />
        <Image
            ohos:id="$+id:qzone" 2.2 Использование макета и инициализация в коде

    private PixelMap createBitmapFromView(Component view) {
        PixelMap.InitializationOptions options = new PixelMap.InitializationOptions();
        options.size = new Size(100, 100);
        PixelMap bitmap = PixelMap.create(options);

        if (view.getName().equals("Id_qq")) {
            bitmap = getPixelMap(ResourceTable.Media_qq);
        }

        if (view.getName().equals("Id_qzone")) {
            bitmap = getPixelMap(ResourceTable.Media_qzone);
        }

        if (view.getName().equals("Id_vx")) {
            bitmap = getPixelMap(ResourceTable.Media_vx);
        }

        if (view.getName().equals("Id_wb")) {
            bitmap = getPixelMap(ResourceTable.Media_wb);
        }

        if (view.getName().equals("Id_tb")) {
            bitmap = getPixelMap(ResourceTable.Media_tb);
        } ```
if(view.getName().equals("Id_baidu_map"))
    bitmap =getPixelMap(ResourceTable.Media_baidu_map);
if(view.getName().equals("Id_gaode_map"))
    bitmap =getPixelMap(ResourceTable.Media_gaode_map);
if(view.getName().equals("Id_qq_music"))
    bitmap =getPixelMap(ResourceTable.Media_qq_music);
return bitmap;
}