代码拉取完成,页面将自动刷新
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 ->返回可见)search_circle
从1到0stem
从0到0.75开始,修剪从0.185到1。arrow_head_top
和arrow_head_bottom
从0到1。search_circle
从0到1stem
从0.75到0开始,修剪从1到0.185。arrow_head_top
和arrow_head_bottom
从1到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个步骤组成:
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功能与原组件基本无差异
VectorMaster is licensed under MIT license
. View license.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。