# ohos-spruce

**Repository Path**: hihopeorg/ohos-spruce

## Basic Information

- **Project Name**: ohos-spruce
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-03-11
- **Last Updated**: 2021-12-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ohos-spruce

**本项目是基于开源项目 spruce 进行ohos化的移植和开发的，可以通过项目标签以及github地址（https://github.com/willowtreeapps/spruce-android ）追踪到原项目版本**

#### 项目介绍

- 项目名称：ohos-spruce
- 所属系列：ohos的第三方组件适配移植
- 功能：展示列表不同排版子项顺序的动画
- 项目作者和维护人：hihope
- 联系方式：hihope@hoperun.com
- 调用差异：无
- 原基线版本：v1.1.0
- 原项目Doc地址：https://github.com/willowtreeapps/spruce-android
- 编程语言：Java 

#### 安装教程

方法1.

1. 将本三方库的har下载。
2. 启动 DevEco Studio，将下载的har包，导入工程目录“entry->libs”下。
3. 在entry级别下的build.gradle文件中添加依赖，在dependences标签中增加对libs目录下har包的引用。

```
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
	……
}
```

方法2.

1. 在工程的build.gradle的allprojects中，添加HAR所在的Maven仓地址

```
repositories {
    maven {
        url 'http://106.15.92.248:8081/repository/Releases/' 
    }
}
```

2. 在应用模块的build.gradle的dependencies闭包中，添加如下代码:

```
dependencies {
    implementation 'com.willowtreeapps.ohos:spruce-ohos:1.0.1'
}
```
#### 效果演示
<img src="gif/演示效果.gif"/>
#### 使用说明

1.使用最多的四个主要功能类：
- SpruceAnimator - 列表排版动画构造器
- DefaultAnimations - 默认的简单动画类
- SortFunction - 动画排列顺序抽象父类
- ExclusionHelper - 特定子项过滤器

2.使用实例
2.1 简单线性列表子项排版动画显示
```
spruceAnimator = new Spruce.SpruceBuilder(listContainer)
                .sortWith(new DefaultSort(100))
                .excludeViews(getExcludedViews(), R_L_MODE)
                .animateWith(DefaultAnimations.dynamicFadeIn(listContainer),
                        dynamicTranslationUpwards(listContainer))
                .start();
```
代码说明：
listContainer为需要设置动画的列表控件
DefaultSort为本库定义的子项排版的动画播放顺序
getExcludedViews为用户自定义的列表中不需要设置动画的隐藏子项序号数组列表，可参考示例如下：
```
private List<Integer> getExcludedViews() {
        List<Integer> positions = new ArrayList<>();
        if (exCludeView.isChecked()) {
            positions.add(1);
            positions.add(4);
            positions.add(7);
        }
        return positions;
    }
```
R_L_MODE为针对不同列表所需要的设置的过滤模式属性，如果该项不生效，可以尝试NORMAL_MODE
2.2 Grid列表子项排版动画显示

使用TableLayoutManager构造GridView列表显示
```
		listContainer = (ListContainer)findComponentById(ResourceTable.Id_mainListContainer);
        TableLayoutManager tableLayoutManager = new TableLayoutManager();
        tableLayoutManager.setColumnCount(6);
        tableLayoutManager.setRowCount(7);
        listContainer.setLayoutManager(tableLayoutManager);
        for (int i = 0; i < CHILD_VIEW_COUNT; i++) {
            ExampleData childView = new ExampleData();
            sampleData.add(childView);
        }
        ListViewAdapter listViewAdapter = new ListViewAdapter(sampleData);
        listContainer.setItemProvider(listViewAdapter);
```
定义每个执行显示的动画数组
```
animators = new Object[]{
                DefaultAnimations.dynamicTranslationUpwards(listContainer),
                DefaultAnimations.dynamicFadeIn(listContainer)
        };
```
定义不需要设置动画并隐藏的子项id值列表
```
private List<Integer> getExclusionViews() {
        List<Integer> ids = new ArrayList<>();
        if(excludeView.isChecked()){
            ids.add(1);
            ids.add(10);
            ids.add(17);
            ids.add(21);
            ids.add(26);
            ids.add(30);
        }
        return ids;
    }
```
选择各个子项播放顺序的方式sortFunction
```
private void initSortFunction() {
        switch (choosedSortFunction){
            case 0:
                sortFunction = new DefaultSort(choosedDelayTime);
                break;
            case 1:
                sortFunction = new CorneredSort(
                        choosedDelayTime,isReversed.isChecked(),
                        switchCorner(choosedDirection));
                break;
            case 2:
                sortFunction = new ContinuousSort(
                        choosedDelayTime*20,
                        isReversed.isChecked(),
                        switchPosition(choosedDirection));
                break;
            case 3:
                sortFunction = new ContinuousWeightedSort(choosedDelayTime*20,
                        isReversed.isChecked(),
                        switchPosition(choosedDirection),
                        switchWeight(choosedVertical),
                        switchWeight(choosedHorizontal)
                        );
                break;
            case 4:
                sortFunction = new InlineSort(choosedDelayTime,
                        isReversed.isChecked(),
                        switchCorner(choosedDirection));
                break;
            case 5:
                sortFunction = new LinearSort(choosedDelayTime,
                        isReversed.isChecked(),
                        switchDirection(choosedDirection));
                break;
            case 6:
                sortFunction = new RadialSort(choosedDelayTime,
                        isReversed.isChecked(),
                        switchPosition(choosedDirection));
                break;
            case 7:
                sortFunction = new RandomSort(choosedDelayTime);
                break;
            case 8:
                sortFunction = new SnakeSort(choosedDelayTime,isReversed.isChecked(),switchCorner(choosedDirection));
                break;
        }
    }
```
动画设置加载
```
spruceAnimator = new Spruce.SpruceBuilder(listContainer).sortWith(sortFunction)
                .animateWith(animators)
                .excludeViews(getExclusionViews(), R_L_MODE)
                .start();
```
2.3 SortFunction使用说明
一共支持九种子项排序播放顺序

​	-DefaultSort

​	-CorneredSort

​	-ContinuousSort

​	-ContinuousWeightedSort

​	-InlineSort

​	-LinearSort

​	-RadialSort

​	-RandomSort

​	-SnakeSort

每一个SortFunction都需要设置内置的延迟时间，不同的SortFunction还可以设置是否排列顺序翻转，起始位置等

#### 版本迭代
- v1.0.1 

#### 版权和许可信息
- MIT Licence