VectorMaster

项目介绍

项目名称：VectorMaster
所属系列：openharmony的第三方组件适配移植
功能：本库引入矢量可绘制的动态控制。
项目移植状态：主功能完成
调用差异：无
开发版本：sdk6，DevEco Studio2.2 Beta1
基线版本：master分支

效果演示

安装教程

1.在项目根目录下的build.gradle文件中，

allprojects {
   repositories {
       maven {
           url 'https://s01.oss.sonatype.org/content/repositories/releases/'
       }
   }
}

2.在entry模块的build.gradle文件中，

dependencies {
   implementation('com.gitee.chinasoft_ohos:VectorMaster:1.0.0')
   ......  
}

在sdk6，DevEco Studio 2.2 Beta1下项目可直接运行如无法运行，删除项目.gradle,.idea,build,gradle,build.gradle文件，并依据自己的版本创建新项目，将新项目的对应文件复制到根目录下

使用说明

搜索返回动画

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="48vp"
    ohos:height="24vp"
    ohos:viewportHeight="24"
    ohos:viewportWidth="48">

    <group
        ohos:pivotX="24"
        ohos:pivotY="12"
        ohos:scaleX="1"
        ohos:scaleY="1">
        <path
            ohos:name="stem"
            ohos:pathData="M24.7,12.7 C24.70,12.7 31.8173374,19.9066081 31.8173371,19.9066082 C32.7867437,20.7006357 34.4599991,23 37.5,23 C40.54,23 43,20.54 43,17.5 C43,14.46 40.54,12 37.5,12 C34.46,12 33.2173088,12 31.8173371,12 C31.8173374,12 18.8477173,12 18.8477173,12"
            ohos:strokeColor="#5D5D5D"
            ohos:strokeWidth="2"
            ohos:trimPathEnd="0.185"
            ohos:trimPathStart="0" />

        <path
            ohos:name="search_circle"
            ohos:pathData="M25.39,13.39 A 5.5 5.5 0 1 1 17.61 5.61 A 5.5 5.5 0 1 1 25.39 13.39"
            ohos:strokeColor="#5D5D5D"
            ohos:strokeWidth="2"
            ohos:trimPathEnd="1" />

        <group ohos:name="arrow_head">
            <path
                ohos:name="arrow_head_top"
                ohos:pathData="M16.7017297,12.6957157 L24.7043962,4.69304955"
                ohos:strokeColor="#5D5D5D"
                ohos:strokeWidth="2"
                ohos:trimPathEnd="0" />

            <path
                ohos:name="arrow_head_bottom"
                ohos:pathData="M16.7107986,11.2764828 L24.7221527,19.2878361"
                ohos:strokeColor="#5D5D5D"
                ohos:strokeWidth="2"
                ohos:trimPathEnd="0" />
        </group>
    </group>
</vector>

单击视图时必须进行过渡。
searchBackState存储当前状态。（0 -->搜索可见，1 ->返回可见）
如果 searchBackState ==0
- 动画search_circle从1到0
- 动画stem从0到0.75开始，修剪从0.185到1。
- 动画arrow_head_top和arrow_head_bottom 从0到1。
- 设置 searchBackState =1。
如果 searchBackState ==1
- 动画search_circle从0到1
- 动画stem从0.75到0开始，修剪从1到0.185。
- 动画arrow_head_top和arrow_head_bottom 从1到0。
- 设置searchBackState=0。

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 version="1.0" encoding="utf-8"?>
<vector xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="24vp"
    ohos:height="24vp"
    ohos:viewportHeight="24"
    ohos:viewportWidth="24">
    <group
        ohos:name="hourglass_frame"
        ohos:scaleX="0.75"
        ohos:scaleY="0.75"
        ohos:translateX="12"
        ohos:translateY="12">
        <group
            ohos:name="hourglass_frame_pivot"
            ohos:translateX="-12"
            ohos:translateY="-12">
            <group
                ohos:name="group_2_2"
                ohos:translateX="12"
                ohos:translateY="6.5">
                <path
                    ohos:name="path_2_2"
                    ohos:fillColor="#5D5D5D"
                    ohos:pathData="M 6.52099609375 -3.89300537109 c 0.0 0.0 -6.52099609375 6.87901306152 -6.52099609375 6.87901306152 c 0 0.0 -6.52099609375 -6.87901306152 -6.52099609375 -6.87901306152 c 0.0 0.0 13.0419921875 0.0 13.0419921875 0.0 Z M 9.99800109863 -6.5 c 0.0 0.0 -19.9960021973 0.0 -19.9960021973 0.0 c -0.890991210938 0.0 -1.33700561523 1.07699584961 -0.707000732422 1.70700073242 c 0.0 0.0 10.7050018311 11.2929992676 10.7050018311 11.2929992676 c 0 0.0 10.7050018311 -11.2929992676 10.7050018311 -11.2929992676 c 0.630004882812 -0.630004882812 0.183990478516 -1.70700073242 -0.707000732422 -1.70700073242 Z" />
            </group>
            <group
                ohos:name="group_1_2"
                ohos:translateX="12"
                ohos:translateY="17.5">
                <path
                    ohos:name="path_2_1"
                    ohos:fillColor="#5D5D5D"
                    ohos:pathData="M 0 -2.98600769043 c 0 0.0 6.52099609375 6.87901306152 6.52099609375 6.87901306152 c 0.0 0.0 -13.0419921875 0.0 -13.0419921875 0.0 c 0.0 0.0 6.52099609375 -6.87901306152 6.52099609375 -6.87901306152 Z M 0 -6.5 c 0 0.0 -10.7050018311 11.2929992676 -10.7050018311 11.2929992676 c -0.630004882812 0.630004882812 -0.184005737305 1.70700073242 0.707000732422 1.70700073242 c 0.0 0.0 19.9960021973 0.0 19.9960021973 0.0 c 0.890991210938 0.0 1.33699035645 -1.07699584961 0.707000732422 -1.70700073242 c 0.0 0.0 -10.7050018311 -11.2929992676 -10.7050018311 -11.2929992676 Z" />
            </group>
        </group>
    </group>
    <group
        ohos:name="fill_outlines"
        ohos:scaleX="0.75"
        ohos:scaleY="0.75"
        ohos:translateX="12"
        ohos:translateY="12">
        <group
            ohos:name="fill_outlines_pivot"
            ohos:translateX="-12"
            ohos:translateY="-24">
            <clip-path
                ohos:name="mask_1"
                ohos:pathData="M 24 13.3999938965 c 0 0.0 -24 0.0 -24 0.0 c 0 0.0 0 10.6000061035 0 10.6000061035 c 0 0 24 0 24 0 c 0 0 0 -10.6000061035 0 -10.6000061035 Z" />
            <group
                ohos:name="group_fill_path"
                ohos:translateX="12"
                ohos:translateY="24">
                <path
                    ohos:name="fill_path"
                    ohos:fillColor="#5D5D5D"
                    ohos:pathData="M 10.7100067139 10.2900085449 c 0.629989624023 0.629989624023 0.179992675781 1.70999145508 -0.710006713867 1.70999145508 c 0 0 -20 0 -20 0 c -0.889999389648 0 -1.33999633789 -1.08000183105 -0.710006713867 -1.70999145508 c 0.0 0.0 9.76000976562 -10.2900085449 9.76000976563 -10.2900085449 c 0.0 0 -9.76000976562 -10.2899932861 -9.76000976563 -10.2899932861 c -0.629989624023 -0.630004882812 -0.179992675781 -1.71000671387 0.710006713867 -1.71000671387 c 0 0 20 0 20 0 c 0.889999389648 0 1.33999633789 1.08000183105 0.710006713867 1.71000671387 c 0.0 0.0 -9.76000976562 10.2899932861 -9.76000976563 10.2899932861 c 0.0 0 9.76000976562 10.2900085449 9.76000976563 10.2900085449 Z" />
            </group>
        </group>
    </group>
</vector>

所需的动画由4个步骤组成:

向下滑动剪贴路径。
将' hourglass_frame '和' fill_outlines '组旋转180度。
向上滑动剪辑路径(因为组是旋转的，所以我们需要向上移动剪辑路径)。
将' hourglass_frame '和' fill_outlines '组旋转180度。重复

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.

CHINASOFT4_OHOS / VectorMaster

VectorMaster

项目介绍

效果演示

安装教程

使用说明

测试信息

版本迭代

版权和许可信息

简介

发行版

贡献者

近期动态

CHINASOFT4_OHOS / VectorMaster .gitee-modal { width: 500px !important; }

VectorMaster

项目介绍

效果演示

安装教程

使用说明

测试信息

版本迭代

版权和许可信息

简介

发行版

贡献者

近期动态

搜索帮助

CHINASOFT4_OHOS / VectorMaster