README_PARALLAX.md · OSCHINA-MIRROR/HarmonyOS-tpc-material-intro-screen

Parallax-вид с параллаксом

«Параллакс» (Parallax) — это метод создания визуальной глубины в 2D-играх, при котором изображения на разных слоях перемещаются с разной скоростью. Параллаксная прокрутка (Parallax Scrolling) означает, что многослойные фоны движутся с различной скоростью, создавая эффект трёхмерного движения и обеспечивая впечатляющий визуальный опыт.

1. Реализация

Визуальная глубина достигается за счёт того, что передний и задний планы движутся по-разному при перемещении сцены, создавая простой трёхмерный эффект. Множество элементов на странице могут независимо прокручиваться, но с разными скоростями, что создаёт красивый эффект разноскоростной прокрутки.

Основной метод — Parallaxable:

     /**
      * Устанавливает смещение
      * @param offset Коэффициент смещения
      */
     void setOffset(float offset);

2. Основные библиотеки

2.1 Вид с параллаксом на основе трёх макетов системы

— ParallaxDirectionalLayout;

— ParallaxDependentLayout;

— ParallaxStackLayout.

2.2 Вид с параллаксом, основанный на ComponentContainer, AbilitySlice, Fraction

— ParallaxComponentContainer;

— ParallaxAbilitySlice;

— ParallaxFraction.

3. Использование

3.1 Демо-код

В библиотеке entry добавлен соответствующий код для демонстрации использования ParallaxDirectionalLayout, ParallaxDependentLayout и ParallaxStackLayout в ComponentContainer, AbilitySlice и Fraction.

Демонстрационные классы:

— ShowDemoAbility;

— ComponentDemoAbility;

— AbilitySliceDemoAbility;

— FractionDemoAbility;

— ShowDemoAbilitySlice;

— ComponentDemoAbilitySlice;

— AbilitySliceDemoAbilitySlice;

— FractionDemoAbilitySlice;

— FractionDemo;

— ComponentDemoAdapter;

— DemoView.

Вход:

[Код входа]
![entrance_link]

3.2 Шаги использования

3.2.1 Импорт библиотеки

Метод 1: использование har-пакета. Создайте har-пакет с помощью library и добавьте его в папку libs в entry Gradle.
Способ 2: использование зависимости implementation. Добавьте следующие строки в файл Gradle всех проектов:
```
allprojects{
    repositories{
        mavenCentral()
    }
}
implementation 'io.openharmony.tpc.thirdlib:material-intro-screen:1.0.2'
```
Способ 3: прямое копирование содержимого папки parallax в библиотеке material-intro-screen в нужный модуль.

3.2.2 Использование вида с параллаксом

3.2.2.1 В AbilitySlice

[AbilitySlice — ParallaxDependentLayout]
![DependentLayout_link]

Связанные классы:

— AbilitySliceDemoAbilitySlice;

— ParallaxAbilitySlice;

— ParallaxDependentLayout.

Сначала необходимо создать класс, который наследуется от ParallaxAbilitySlice (например, AbilitySliceDemoAbilitySlice).
Затем нужно использовать компонент вида с параллаксом в макете ability_slice_demo.xml:

<?xml version="1.0" encoding="utf-8"?>
<agency.tango.materialintroscreen.parallax.ParallaxDependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    xmlns:zdy="http://schemas.huawei.com/res/ohos/zdy"
   >

    <Text
        ohos:id="$+id:text"
     
        zdy:layout_parallax_Factor="1"
        />

</agency.tango.materialintroscreen.parallax.ParallaxDependentLayout>

Используйте ParallaxDependentLayout в качестве корневого макета.
Создайте пользовательское пространство имён xmlns:zdy="http://schemas.huawei.com/res/ohos/zdy".
Установите коэффициент параллакса zdy:layout_parallax_Factor для компонентов, которые должны прокручиваться.

Коэффициент параллакса не требует указания единиц измерения и по умолчанию считается значением типа float.

Реализуйте три метода в AbilitySliceDemoAbilitySlice: getLayoutId, initView и getRootView.
Установите коэффициент смещения — setOffset(offset). addOffset() {

if (offset <= 0.9f) { offset += 0.1f; setOffset(offset); } }

3.2.2.2 Использование параллакс-представления во Fraction

[Fraction-ParallaxStackLayout]
![StackLayout_link]

Связанные классы:

FractionDemoAbility[FractionDemoAbility link],
FractionDemoAbilitySlice[FractionDemoAbilitySlice link],
FractionDemo[FractionDemo link].

Сначала необходимо, чтобы способность с параллаксом наследовала от FractionAbility (например, FractionDemoAbility).

public class FractionDemoAbility extends FractionAbility

В AbilitySlice загрузите и замените Fraction (например, FractionDemoAbilitySlice).

— 1. В FractionDemoAbilitySlice настройте макет для контейнера Fraction (пример ниже — StackLayout).

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <StackLayout
        ohos:id="$+id:fragment_container"
        ohos:height="match_parent"
        ohos:width="match_parent"/>

</DirectionalLayout>

— 2. Загрузите Fraction в FractionDemoAbilitySlice.

private void initView() {
    ((FractionAbility) getAbility()).getFractionManager()
            .startFractionScheduler().add(ResourceTable.Id_fragment_container, new FractionDemo()).submit();
}

FractionDemo должен наследовать ParallaxFraction.

public class FractionDemo extends ParallaxFraction

Используйте компоненты параллакс-вида в макете FractionDemo (layout_fraction_demo.xml).

<?xml version="1.0" encoding="utf-8"?>
<agency.tango.materialintroscreen.parallax.ParallaxStackLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    xmlns:zdy="http://schemas.huawei.com/res/ohos/zdy"
   >

    <Text
        ohos:id="$+id:text1_fraction1"
        zdy:layout_parallax_Factor="0.7"/>


    <Text
        ohos:id="$+id:text2_fraction1"
        zdy:layout_parallax_Factor="0.2"/>


</agency.tango.materialintroscreen.parallax.ParallaxStackLayout>

— 1. Используйте ParallaxStackLayout как корневой макет. — 2. Создайте пользовательское пространство имён xmlns:zdy="http://schemas.huawei.com/res/ohos/zdy". — 3. Установите коэффициент параллакса zdy:layout_parallax_Factor на компонентах, которые должны прокручиваться. — 4. Разные компоненты могут иметь разные коэффициенты параллакса, что приведёт к разному смещению (0,7 и 0,2).

Примечание: коэффициент параллакса zdy:layout_parallax_Factor не требует единиц измерения, по умолчанию он считается числом типа float.

Реализуйте два метода в FractionDemo: initView и getRootView.

/**
 * Инициализация компонентов
 */
protected abstract Component initView(LayoutScatter scatter, ComponentContainer container, Intent intent);

/**
 * Получение корневого компонента
 *
 * @return корневой компонент
 */
protected @NotNull Component getRootView() {
    return mRootView;
}

Задайте коэффициент смещения в FractionDemo — setOffset(offset).

/**
 * Установка коэффициента смещения компонента
 *
 */
thisContainer.setTouchEventListener(new Component.TouchEventListener() {
    @Override
    public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
        int width = thisContainer.getWidth();
        if (width <= 0) {
            return false;
        }
        int action = touchEvent.getAction();
        if (action == TouchEvent.PRIMARY_POINT_DOWN) {
            originStartX = touchEvent.getPointerScreenPosition(0).getX();
        } else if (action == TouchEvent.POINT_MOVE) {
            tempX = touchEvent.getPointerScreenPosition(0).getX();
            float offset = (tempX - originStartX) / width;
            setOffset(offset);
        } else if (action == TouchEvent.PRIMARY_POINT_UP) {
            originStartX = 0;
            tempX = 0;
            setOffset(0);
        } else if (action == TouchEvent.POINT_MOVE) {
            originStartX = 0;
            tempX = 0;
            setOffset(0);
        }
        return true;
    }
});

3.2.2.3 Использование компонента Container с параллаксом

[ComponentContainer-ParallaxDirectionalLayout]
![DirectionalLayout_link]

Связанный класс: [ComponentDemoAbility][ComponentDemoAbility link]. Перевод текста на русский язык:

Сначала необходимо, чтобы пользовательский компонент наследовал ParallaxComponentContainer (например: DemoView).

public class DemoView extends ParallaxComponentContainer

В DemoView необходимо реализовать два метода: initView и getRootView.

/**
 * Инициализация компонентов
 */
protected abstract void initView();

 /**
  * Получение корневого компонента
  *
  * @return корневой компонент
  */
 public abstract @NotNull Component getRootView();

Для пользовательского компонента DemoView в качестве корневого макета используется компонент с эффектом параллакса (layout_test_view.xml).

<agency.tango.materialintroscreen.parallax.ParallaxDirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" xmlns:zdy="http://schemas.huawei.com/res/ohos/zdy">

<Text
    ohos:id="$+id:txt_title"
    zdy:layout_parallax_Factor="0"/>


<Text
    ohos:id="$+id:txt_title1"
    zdy:layout_parallax_Factor="0.1"/>

<Text
    ohos:id="$+id:txt_title2"
    zdy:layout_parallax_Factor="0.3"/>


<Text
    ohos:id="$+id:txt_title3"
    zdy:layout_parallax_Factor="0.6"/>


<Text
    ohos:id="$+id:txt_title4"  
    zdy:layout_parallax_Factor="0.9"/>

</agency.tango.materialintroscreen.parallax.ParallaxDirectionalLayout>

4. 
— Используется ParallaxDirectionalLayout в качестве корневого макета.
— Создаётся пользовательское пространство имён xmlns:zdy="http://schemas.huawei.com/res/ohos/zdy".
— На компонентах, которые должны прокручиваться, устанавливается коэффициент параллакса zdy:layout_parallax_Factor.
— Различные компоненты могут иметь разные коэффициенты параллакса, что приводит к разному смещению (0,9, 0,3 и т. д.).
5. ComponentDemoAbilitySlice создаёт объекты пользовательских компонентов DemoView (также можно использовать пользовательские компоненты в XML-макете).

```java
adapter.addItem(new DemoView(getContext(), 0));
adapter.addItem(new DemoView(getContext(), 1));
adapter.addItem(new DemoView(getContext(), 2));
adapter.addItem(new DemoView(getContext(), 3));
adapter.addItem(new DemoView(getContext(), 4));
adapter.addItem(new DemoView(getContext(), 5));

Если ComponentDemoAdapter является сгенерированным кодом пользовательским компонентом, то необходимо поместить пользовательский компонент в контейнер.

@Override
public Object createPageInContainer(ComponentContainer componentContainer, int position) {
    DemoView view;
    ComponentContainer.LayoutConfig config = new ComponentContainer.LayoutConfig
            (ComponentContainer.LayoutConfig.MATCH_PARENT, ComponentContainer.LayoutConfig.MATCH_PARENT);
    if (this.views != null && this.views.size() > position) {
        view = this.views.get(position);
        if (view != null && view.getRootView() != null) {
            componentContainer.addComponent(view.getRootView(), config);
            views.set(position, view);
            return view.getRootView();
        }
    }
    view = this.getItem(position);
    while (this.views.size() <= position) {
        this.views.add(null);
    }
    this.views.set(position, view);
    if (view == null && view.getRootView() != null) {
        componentContainer.addComponent(view.getRootView(), config);
        return view.getRootView();
    } else {
        return new Component(componentContainer.getContext());
    }
}

ComponentDemoAbilitySlice устанавливает коэффициент смещения — setOffset(offset).

viewPager.addPageChangedListener(new PageSlider.PageChangedListener() {
    @Override
    public void onPageSliding(int position, float positionOffset, int positionOffsetPixels) {
       ...
       adapter.getItem(viewPager.getCurrentPage()).setOffset(tempPositionOffset);
    }
});
``` [Параллакс-зависимый макет]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/material-intro-screen/src/main/java/agency/tango/materialintroscreen/parallax/ParallaxDependentLayout.java>
[Параллакс-стек-макет]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/material-intro-screen/src/main/java/agency/tango/materialintroscreen/parallax/ParallaxStackLayout.java>
[Контейнер компонентов параллакса]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/material-intro-screen/src/main/java/agency/tango/materialintroscreen/parallax/ParallaxComponentContainer.java>
[Способность параллакса к срезу]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/material-intro-screen/src/main/java/agency/tango/materialintroscreen/parallax/ParallaxAbilitySlice.java>
[Доля параллакса]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/material-intro-screen/src/main/java/agency/tango/materialintroscreen/parallax/ParallaxFraction.java>

[Показать демо-способность]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/entry/src/main/java/agency/tango/materialintro/ShowDemoAbility.java>
[Демо-компонентная способность]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/entry/src/main/java/agency/tango/materialintro/ComponentDemoAbility.java>
[Демонстрация способности среза]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/entry/src/main/java/agency/tango/materialintro/AbilitySliceDemoAbility.java>
[Фракционная демо-способность]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/entry/src/main/java/agency/tango/materialintro/FractionDemoAbility.java>
[Показать демо-способность среза]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/entry/src/main/java/agency/tango/materialintro/slice/ShowDemoAbilitySlice.java>
[Компонентная демо-способность среза]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/entry/src/main/java/agency/tango/materialintro/slice/ComponentDemoAbilitySlice.java>
[Демонстрация способности среза способности]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/entry/src/main/java/agency/tango/materialintro/slice/AbilitySliceDemoAbilitySlice.java>
[Фракционная демо-способность среза]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/entry/src/main/java/agency/tango/materialintro/slice/FractionDemoAbilitySlice.java>

[Фракционный демо]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/entry/src/main/java/agency/tango/materialintro/fractions/FractionDemo.java>
[Компонентный демо-адаптер]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/entry/src/main/java/agency/tango/materialintro/ComponentDemoAdapter.java>
[Демо-вид]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/entry/src/main/java/agency/tango/materialintro/DemoView.java>
[Вход]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/entry/src/main/java/agency/tango/materialintro/slice/MainAbilitySlice.java#L58>

[entrance_link]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/raw/master/images/entrance_link.jpg>
[Зависимый макет_ссылка]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/raw/master/images/dependentlayout_link.gif>
[Стек-макет_ссылка]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/raw/master/images/stacklayout_link.gif>
[Направленный макет_ссылка]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/raw/master/images/directionallayout_link.gif>

OSCHINA-MIRROR/HarmonyOS-tpc-material-intro-screen

1. Реализация

2. Основные библиотеки

2.1 Вид с параллаксом на основе трёх макетов системы

2.2 Вид с параллаксом, основанный на ComponentContainer, AbilitySlice, Fraction

3. Использование

3.1 Демо-код

3.2 Шаги использования

3.2.1 Импорт библиотеки

3.2.2 Использование вида с параллаксом

3.2.2.1 В AbilitySlice

3.2.2.2 Использование параллакс-представления во Fraction

3.2.2.3 Использование компонента Container с параллаксом

Опубликовать ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/HarmonyOS-tpc-material-intro-screen .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

1. Реализация

2. Основные библиотеки

2.1 Вид с параллаксом на основе трёх макетов системы

2.2 Вид с параллаксом, основанный на ComponentContainer, AbilitySlice, Fraction

3. Использование

3.1 Демо-код

3.2 Шаги использования

3.2.1 Импорт библиотеки

3.2.2 Использование вида с параллаксом

3.2.2.1 В AbilitySlice

3.2.2.2 Использование параллакс-представления во Fraction

3.2.2.3 Использование компонента Container с параллаксом

Опубликовать ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/HarmonyOS-tpc-material-intro-screen