# VectorMaster
**Repository Path**: chinasoft4_ohos/VectorMaster
## Basic Information
- **Project Name**: VectorMaster
- **Description**: Dynamic control over vector drawables!
- **Primary Language**: Java
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-07-15
- **Last Updated**: 2021-09-23
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# VectorMaster
#### 项目介绍
- 项目名称：VectorMaster
- 所属系列：openharmony的第三方组件适配移植
- 功能：本库引入矢量可绘制的动态控制。
- 项目移植状态：主功能完成
- 调用差异：无
- 开发版本：sdk6，DevEco Studio2.2 Beta1
- 基线版本：master分支
#### 效果演示
#### 安装教程
1.在项目根目录下的build.gradle文件中，
```gradle
allprojects {
repositories {
maven {
url 'https://s01.oss.sonatype.org/content/repositories/releases/'
}
}
}
```
2.在entry模块的build.gradle文件中，
```gradle
dependencies {
implementation('com.gitee.chinasoft_ohos:VectorMaster:1.0.0')
......
}
```
在sdk6，DevEco Studio 2.2 Beta1下项目可直接运行
如无法运行，删除项目.gradle,.idea,build,gradle,build.gradle文件，
并依据自己的版本创建新项目，将新项目的对应文件复制到根目录下
#### 使用说明
搜索返回动画
```xml
```
1. 单击视图时必须进行过渡。
2. `searchBackState`存储当前状态。（0 -->搜索可见，1 ->返回可见）
3. 如果 searchBackState ==0
- 动画`search_circle`从1到0
- 动画`stem`从0到0.75开始，修剪从0.185到1。
- 动画`arrow_head_top`和`arrow_head_bottom` 从0到1。
- 设置 searchBackState =1。
4. 如果 searchBackState ==1
- 动画`search_circle`从0到1
- 动画`stem`从0.75到0开始，修剪从1到0.185。
- 动画`arrow_head_top`和`arrow_head_bottom` 从1到0。
- 设置searchBackState=0。
```java
int searchBackState = 0;
PathModel searchCircle, stem, arrowUp, arrowDown;
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
searchBackView = (VectorMasterView) findComponentById(ResourceTable.Id_vector_master_2);
searchCircle = searchBackView.getPathModelByName("search_circle");
stem = searchBackView.getPathModelByName("stem");
arrowUp = searchBackView.getPathModelByName("arrow_head_top");
arrowDown = searchBackView.getPathModelByName("arrow_head_bottom");
searchBackView.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
if (searchBackState == 0) {
animateSearchToBack();
} else {
animateBackToSearch();
}
}
});
}
void animateSearchToBack() {
Timer timer = new Timer();
timer.scheduleAtFixedRate(new TimerTask() {
@Override
public void run() {
circleTrimEnd -= 1.0f / 20;
stemTrimStart += 0.75f / 20;
stemTrimEnd += (1 - 0.185f) / 20;
arrowHeadBottomTrimEnd += 1.0f / 20;
arrowHeadTopTrimEnd += 1.0f / 20;
if (circleTrimEnd <= 0) {
searchBackState = 1;
cancel();
}
searchCircle.setTrimPathEnd(circleTrimEnd);
stem.setTrimPathEnd(stemTrimEnd);
stem.setTrimPathStart(stemTrimStart);
arrowUp.setTrimPathEnd(arrowHeadTopTrimEnd);
arrowDown.setTrimPathEnd(arrowHeadBottomTrimEnd);
runOnUiThread(new Runnable() {
@Override
public void run() {
searchBackView.update();
}
});
}
}, 0, 1000 / 60);
}
void animateBackToSearch() {
Timer timer = new Timer();
timer.scheduleAtFixedRate(new TimerTask() {
@Override
public void run() {
arrowHeadBottomTrimEnd -= 1.0f / 20;
arrowHeadTopTrimEnd -= 1.0f / 20;
stemTrimStart -= 0.75f / 20;
stemTrimEnd -= (1 - 0.185f) / 20;
circleTrimEnd += 1.0f / 20;
if (circleTrimEnd >= 1) {
searchBackState = 0;
cancel();
}
searchCircle.setTrimPathEnd(circleTrimEnd);
stem.setTrimPathEnd(stemTrimEnd);
stem.setTrimPathStart(stemTrimStart);
arrowUp.setTrimPathEnd(arrowHeadTopTrimEnd);
arrowDown.setTrimPathEnd(arrowHeadBottomTrimEnd);
runOnUiThread(new Runnable() {
@Override
public void run() {
searchBackView.update();
}
});
}
}, 0, 1000 / 60);
}
```
沙漏动画
```xml
```
所需的动画由4个步骤组成:
1. 向下滑动剪贴路径。
2. 将' hourglass_frame '和' fill_outlines '组旋转180度。
3. 向上滑动剪辑路径(因为组是旋转的，所以我们需要向上移动剪辑路径)。
4. 将' hourglass_frame '和' fill_outlines '组旋转180度。**重复**
```java
VectorMasterView hourglassView;
float translationY = 0;
float rotation = 0;
int state = 0;
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
hourglassView = (VectorMasterView) findComponentById(ResourceTable.Id_vector_master_1);
animateHourglass();
}
void animateHourglass() {
final GroupModel frame = hourglassView.getGroupModelByName("hourglass_frame");
final GroupModel fillOutlines = hourglassView.getGroupModelByName("fill_outlines");
final GroupModel fillOutlinesPivot = hourglassView.getGroupModelByName("fill_outlines_pivot");
final GroupModel group_fill_path = hourglassView.getGroupModelByName("group_fill_path");
ClipPathModel mask = hourglassView.getClipPathModelByName("mask_1");
state = 0;
translationY = -24;
Timer timer = new Timer();
timer.scheduleAtFixedRate(new TimerTask() {
@Override
public void run() {
if (state == 0) { // Slide the clip-path down by changing translationY of parent group
translationY += 0.3f;
fillOutlinesPivot.setTranslateY(translationY);
group_fill_path.setTranslateY(-1 * translationY);
if (translationY >= -12) {
state = 1;
}
} else if (state == 1) { // Rotate the groups by 180 degress
rotation += 3f;
frame.setRotation(rotation);
fillOutlines.setRotation(rotation);
if (rotation == 180) {
state = 2;
}
} else if (state == 2) { // Slide the clip-path up by changing translationY of parent group
translationY -= 0.3f;
fillOutlinesPivot.setTranslateY(translationY);
group_fill_path.setTranslateY(-1 * translationY);
if (translationY <= -24) {
state = 3;
}
} else if (state == 3) { // Rotate the groups by 180 degress
rotation += 3f;
frame.setRotation(rotation);
fillOutlines.setRotation(rotation);
if (rotation == 360) {
rotation = 0;
state = 0;
}
}
runOnUiThread(new Runnable() {
@Override
public void run() {
hourglassView.update(); // Update the view from the UI thread
}
});
}
}, 500, 1000 / 60);
}
```
#### 测试信息
CodeCheck代码测试无异常
CloudTest代码测试无异常
病毒安全检测通过
当前版本demo功能与原组件基本无差异
#### 版本迭代
- 1.0.0
#### 版权和许可信息
VectorMaster is licensed under `MIT license`. View [license](LICENSE).