HarmonyOS 之 爱心动画 原创 精华

发布于 2022-2-22 10:57
浏览
4收藏

作者:肖瑜博

前言:

这是一款基于harmonyOS + java绘制飘动的爱心心形动画特效源码。画面上多个小的心形图案动态组成一个大的心形图案,图案的边缘随着文字滑过伴随着小图案的动画汇集效果。

效果展示

HarmonyOS 之 爱心动画-开源基础软件社区

实现思路:这个动画的实现主要是四个步骤:

一:16颗小心心,从初始位置,移动到指定的位置,并拼成一颗大心心;

二:16颗小心心渐渐放大,这个时候包括小心心的位置移动和倍数的放大;

三:16颗小心心放大之后,再像中心点移动,并且不断变小;

四:移动到中心点的后,将其中的一颗小心心放大,得到我们最后想要的样子。

一、16颗小心心,从初始位置,移动到指定的位置,并拼成一颗大心心

为了更加方便计算出16颗小心心所移动的位置,我们把拼成大心心之后的图案给做了原点坐标,并根据这个原点,计算出16颗心心的坐标,具体如下图:

HarmonyOS 之 爱心动画-开源基础软件社区

如上图所示,我们把16颗小心心进行编号,分别是1~16心心,然后我们计算出屏幕的中心点,并把2号心心底边长的中心点与屏幕中心点重合,据此分别计算出16颗心心的坐标,其中每一颗心心之间都是没有间隔的。由此我们可以计算出每一颗心心的左边为:

x y
1号坐标 centerX-itemWH*1.5 centerY-itemWH*2
2号坐标(中间) centerX-itemWH*0.5 centerY-itemWH
3号坐标 centerX+itemWH*0.5 centerY-itemWH*2
4号坐标(右边顶部) centerX+itemWH*1.5 centerY-itemWH*3
5号坐标 centerX+itemWH*2.5 centerY-itemWH*2
6号坐标(右边) centerX+itemWH*3.5 centerY-itemWH
7号坐标 centerX+itemWH*2.5 centerY
8号坐标 centerX+itemWH*1.5 centerY+itemWH
9号坐标 centerX+itemWH*0.5 centerY+itemWH*2
10号坐标(底部) centerX-itemWH*0.5 centerY+itemWH*3
11号坐标 centerX-itemWH*1.5 centerY+itemWH*2
12号坐标 centerX-itemWH*2.5 centerY+itemWH
13号坐标 centerX-itemWH*3.5 centerY
14号坐标(左边) centerX-itemWH*4.5 centerY-itemWH
15号坐标 centerX-itemWH*3.5 centerY-itemWH*2
16号坐标(左边顶部) centerX-itemWH*2.5 centerY-itemWH*3

其中centerX、centerY分别为屏幕中心点x和y值;itemWH为小心心的宽高度(宽度和高度相等)。

我们在页面初始化的时候,把所有的坐标记录在locations数组里边;

float[] loc1 = {centerX-itemWH*1.5f, centerY-itemWH*2};
float[] loc2 = {centerX-itemWH*0.5f, centerY-itemWH};
float[] loc3 = {centerX+itemWH*0.5f, centerY-itemWH*2};
float[] loc4 = {centerX+itemWH*1.5f, centerY-itemWH*3};
float[] loc5 = {centerX+itemWH*2.5f, centerY-itemWH*2};
float[] loc6 = {centerX+itemWH*3.5f, centerY-itemWH};
float[] loc7 = {centerX+itemWH*2.5f, centerY};
float[] loc8 = {centerX+itemWH*1.5f, centerY+itemWH};
float[] loc9 = {centerX+itemWH*0.5f, centerY+itemWH*2};
float[] loc10 = {centerX-itemWH*0.5f, centerY+itemWH*3};
float[] loc11 = {centerX-itemWH*1.5f, centerY+itemWH*2};
float[] loc12 = {centerX-itemWH*2.5f, centerY+itemWH};
float[] loc13 = {centerX-itemWH*3.5f, centerY};
float[] loc14 = {centerX-itemWH*4.5f, centerY-itemWH};
float[] loc15 = {centerX-itemWH*3.5f, centerY-itemWH*2};

float[] loc16 = {centerX-itemWH*2.5f, centerY-itemWH*3};
locations.add(loc1);
...
...
locations.add(loc16);

屏幕宽高度的获取方法:

// 屏幕宽度
public static int getWindowWidthPx(Context context) {
        return context.getResourceManager().getDeviceCapability().width * 			     context.getResourceManager().getDeviceCapability().screenDensity / 160;
}

// 屏幕高度
public static int getWindowHeightPx(Context context) {
        return context.getResourceManager().getDeviceCapability().height *   	context.getResourceManager().getDeviceCapability().screenDensity / 160;
}

由此可以计算出centerX、centerY的值为,itemWH设置为30:

// 顶部的高度
private float topHeight = 200f;
// 原点坐标的位置x
private float centerX;
// 原点坐标的位置y
private float centerY;
// 小心心的宽高度
private float itemWH = 30f;

// 中心点x
centerX = getWindowWidthPx(this) * 0.5f;
// 中心点y
centerY = (getWindowHeightPx(this) - topHeight) * 0.5f;

由动画我们可以看出,所有的心心都是由16—>14—>10—>6—>4—>2—>1号这样的轨迹运动的。号码越排前的心心运动的路径越长,动画越多,所以我们可以归结为:

7个动画的心心(1号);

6个动画的心心(2-3号);

5个动画的心心(4-5号);

4个动画的心心(6-9号);

3个动画的心心(10-13号);

2个动画的心心(14-15号);

1个动画的心心(16号)。

// 给定坐标生成动画
private AnimatorProperty creatAnimationPropertyFromLocation(float[] fromLoc, float[] toLoc, long delay, long duration, Image image){
    AnimatorProperty animatorProperty = image.createAnimatorProperty();

    animatorProperty.moveFromX(fromLoc[0]);
    animatorProperty.moveFromY(fromLoc[1]);
    animatorProperty.moveToX(toLoc[0]);
    animatorProperty.moveToY(toLoc[1]);
    animatorProperty.setDelay(delay);
    animatorProperty.setDuration(duration);

    return animatorProperty;
}

// 初始位置到1号的动画
private AnimatorProperty originLocationToOneAnimation(Image image, long aniDelay){
    float[] toLoc1 = locations.get(15);
    AnimatorProperty animatorProperty = creatAnimationPropertyFromLocation(image.getContentPosition(), toLoc1, aniDelay, firstAniDur, image);
    return animatorProperty;
}

// 16号-14号的动画
private AnimatorProperty sixteenToFourteenAnimation(Image image){
    float[] fromLoc = locations.get(15);
    float[] toLoc = locations.get(13);
    long duration = timePadding * 2;
    AnimatorProperty animatorProperty = creatAnimationPropertyFromLocation(fromLoc, toLoc, 0, duration, image);
    return animatorProperty;
}

// 14号-10号的动画
private AnimatorProperty fourteenToTenAnimation(Image image){
    float[] fromLoc = locations.get(13);
    float[] toLoc = locations.get(9);
    long duration = timePadding * 4;
    AnimatorProperty animatorProperty = creatAnimationPropertyFromLocation(fromLoc, toLoc, 0, duration, image);
    return animatorProperty;
}

// 10号-6号的动画
private AnimatorProperty tenToSixAnimation(Image image){
    float[] fromLoc = locations.get(9);
    float[] toLoc = locations.get(5);
    long duration = timePadding * 4;
    AnimatorProperty animatorProperty = creatAnimationPropertyFromLocation(fromLoc, toLoc, 0, duration, image);
    return animatorProperty;
}

// 6号-4号的动画
private AnimatorProperty sixToFourAnimation(Image image){
    float[] fromLoc = locations.get(5);
    float[] toLoc = locations.get(3);
    long duration = timePadding * 2;
    AnimatorProperty animatorProperty = creatAnimationPropertyFromLocation(fromLoc, toLoc, 0, duration, image);
    return animatorProperty;
}

// 4号-2号的动画
private AnimatorProperty fourToTwoAnimation(Image image){
		float[] fromLoc = locations.get(3);
		float[] toLoc = locations.get(1);
		long duration = timePadding * 2;
		AnimatorProperty animatorProperty = creatAnimationPropertyFromLocation(fromLoc, toLoc, 0, duration, image);
		return animatorProperty;
}

// 1个动画
private void oneAnimate(float[] lastLoc, Image image, long aniDelay){
    LogUtil.d("abcd","oneAnimate");
    AnimatorProperty ani1 = creatAnimationPropertyFromLocation(image.getContentPosition(), lastLoc, aniDelay, firstAniDur, image);

    ani1.start();
}

// 2个动画
private void twoAnimate(float[] lastLoc, long lastDuration, Image image, long aniDelay){
    AnimatorProperty ani1 = originLocationToOneAnimation(image, aniDelay);

    float[] fromLoc = locations.get(15);
    AnimatorProperty ani2 = creatAnimationPropertyFromLocation(fromLoc, lastLoc, 0, lastDuration, image);

    AnimatorGroup animatorGroup = new AnimatorGroup();
    animatorGroup.runSerially(ani1, ani2);
    animatorGroup.start();
}

// 3个动画
private void threeAnimate(float[] lastLoc, long lastDuration, Image image, long aniDelay){
    AnimatorProperty ani1 = originLocationToOneAnimation(image, aniDelay);

    AnimatorProperty ani2 = sixteenToFourteenAnimation(image);

    float[] fromLoc = locations.get(13);
    AnimatorProperty ani3 = creatAnimationPropertyFromLocation(fromLoc, lastLoc, 0, lastDuration, image);

    AnimatorGroup animatorGroup = new AnimatorGroup();
    animatorGroup.runSerially(ani1, ani2, ani3);
    animatorGroup.start();
}

// 4个动画
private void fourAnimate(float[] lastLoc, long lastDuration, Image image, long aniDelay){

    AnimatorProperty ani1 = originLocationToOneAnimation(image, aniDelay);

    AnimatorProperty ani2 = sixteenToFourteenAnimation(image);

    AnimatorProperty ani3 = fourteenToTenAnimation(image);

    float[] fromLoc = locations.get(9);
    AnimatorProperty ani4 = creatAnimationPropertyFromLocation(fromLoc, lastLoc, 0, lastDuration, image);

    AnimatorGroup animatorGroup = new AnimatorGroup();
    animatorGroup.runSerially(ani1, ani2, ani3, ani4);
    animatorGroup.start();
}

// 5个动画
private void fiveAnimate(float[] lastLoc, long lastDuration, Image image, long aniDelay){
    AnimatorProperty ani1 = originLocationToOneAnimation(image, aniDelay);

    AnimatorProperty ani2 = sixteenToFourteenAnimation(image);

    AnimatorProperty ani3 = fourteenToTenAnimation(image);

    AnimatorProperty ani4 = tenToSixAnimation(image);

    float[] fromLoc = locations.get(5);
    AnimatorProperty ani5 = creatAnimationPropertyFromLocation(fromLoc, lastLoc, 0, lastDuration, image);

    AnimatorGroup animatorGroup = new AnimatorGroup();
    animatorGroup.runSerially(ani1, ani2, ani3, ani4, ani5);
    animatorGroup.start();
}

// 6个动画
private void sixAnimate(float[] lastLoc, long lastDuration, Image image, long aniDelay){

    AnimatorProperty ani1 = originLocationToOneAnimation(image, aniDelay);

    AnimatorProperty ani2 = sixteenToFourteenAnimation(image);

    AnimatorProperty ani3 = fourteenToTenAnimation(image);

    AnimatorProperty ani4 = tenToSixAnimation(image);

    AnimatorProperty ani5 = sixToFourAnimation(image);

    float[] fromLoc = locations.get(3);
    AnimatorProperty ani6 = creatAnimationPropertyFromLocation(fromLoc, lastLoc, 0, lastDuration, image);

    AnimatorGroup animatorGroup = new AnimatorGroup();
    animatorGroup.runSerially(ani1, ani2, ani3, ani4, ani5, ani6);
    animatorGroup.start();
}

// 7个动画
private void sevenAnimate(Image image, long aniDelay){

    AnimatorProperty ani1 = originLocationToOneAnimation(image, aniDelay);

    AnimatorProperty ani2 = sixteenToFourteenAnimation(image);

    AnimatorProperty ani3 = fourteenToTenAnimation(image);

    AnimatorProperty ani4 = tenToSixAnimation(image);

    AnimatorProperty ani5 = sixToFourAnimation(image);

    AnimatorProperty ani6 = fourToTwoAnimation(image);

    float[] fromLoc = locations.get(1);
    float[] toLastLoc = locations.get(0);
    long durationLast = timePadding;
    AnimatorProperty ani7 = creatAnimationPropertyFromLocation(fromLoc, toLastLoc, 0, durationLast, image);

    AnimatorGroup animatorGroup = new AnimatorGroup();
    animatorGroup.setStateChangedListener(new Animator.StateChangedListener() {
        @Override
        public void onStart(Animator animator) {

        }

        @Override
        public void onStop(Animator animator) {

        }

        @Override
        public void onCancel(Animator animator) {

        }

        @Override
        public void onEnd(Animator animator) {
            // 1号心心运动结束之后,给所有心心添加放大的动画
            biggerAnimation();
        }

        @Override
        public void onPause(Animator animator) {

        }

        @Override
        public void onResume(Animator animator) {

        }
    });
    animatorGroup.runSerially(ani1, ani2, ani3, ani4, ani5, ani6, ani7);
    animatorGroup.start();
}

其中lastLoc为最后一个动画的坐标,即终点坐标,lastDuration为最后一个动画所需要的时间,aniDelay为动画延迟开始的时间,firstAniDur为心心从初始位置移动到16号位置所需要的时间。

然后在页面初始化的时候,生成并用一个数组images保存16个Image对象,把心形图片赋值给Image对象,并延迟3秒给所有Image对象添加动画,具体添加代码为:

// 两个小心心之间的时间间隔
private long timePadding = 500;

// 拼成心形动画
private void getHeartAnimation(){
    for (int i = 0; i < images.size(); i++){

        long aniDelay = timePadding * i;
        Image image = images.get(i);
        float[] lastLoc = locations.get(i);
        switch (i){
            case 0:
                sevenAnimate(image, aniDelay);
                break;
            case 1:
                long lastDuration2 = timePadding * 2;
                sixAnimate(lastLoc, lastDuration2, image, aniDelay);
                break;
            case 2:
                long lastDuration3 = timePadding;
                sixAnimate(lastLoc, lastDuration3, image, aniDelay);
                break;
            case 3:
                long lastDuration4 = timePadding * 2;
                fiveAnimate(lastLoc, lastDuration4, image ,aniDelay);
                break;
            case 4:
                long lastDuration5 = timePadding;
                fiveAnimate(lastLoc, lastDuration5, image ,aniDelay);
                break;
            case 5:
                long lastDuration6 = timePadding * 4;
                fourAnimate(lastLoc, lastDuration6, image, aniDelay);
                break;
            case 6:
                long lastDuration7 = timePadding * 3;
                fourAnimate(lastLoc, lastDuration7, image, aniDelay);
                break;
            case 7:
                long lastDuration8 = timePadding * 2;
                fourAnimate(lastLoc, lastDuration8, image, aniDelay);
                break;
            case 8:
                long lastDuration9 = timePadding;
                fourAnimate(lastLoc, lastDuration9, image, aniDelay);
                break;
            case 9:
                float[] lastLoc10 = locations.get(9);
                long lastDuration10 = timePadding * 4;
                threeAnimate(lastLoc10, lastDuration10, image, aniDelay);
                break;
            case 10:
                long lastDuration11 = timePadding * 3;
                threeAnimate(lastLoc, lastDuration11, image, aniDelay);
                break;
            case 11:
                long lastDuration12 = timePadding * 2;
                threeAnimate(lastLoc, lastDuration12, image, aniDelay);
                break;
            case 12:
                long lastDuration13 = timePadding;
                threeAnimate(lastLoc, lastDuration13, image, aniDelay);
                break;
            case 13:
                long lastDuration14 = timePadding * 2;
                twoAnimate(lastLoc, lastDuration14, image, aniDelay);
                break;
            case 14:
                long lastDuration15 = timePadding;
                twoAnimate(lastLoc, lastDuration15, image, aniDelay);
                break;
            case 15:
                oneAnimate(lastLoc, image, aniDelay);
                break;
        }
    }
}

至此,我们的16颗小心心就可以从初始位置,移动到我们想要的位置,拼接成大心心了!

二、16颗小心心渐渐放大,这个时候包括小心心的位置移动和倍数的放大

这里我们把所有心心放大3倍,得到放大后的组合大心心。我们通过AnimatorProperty的scaleX和scaleY进行放大,通过这种方式放大后的组件,其宽高度是不变的,也就是依然是30,所以我们看到放大后的图片是这样的:

HarmonyOS 之 爱心动画-开源基础软件社区<img src=“./bigger.png” alt=“bigger” style=“zoom:50%;” />

实际上16颗小心心的大小和坐标是这样的:

HarmonyOS 之 爱心动画-开源基础软件社区

所以我们就需要再次计算,放大3倍之后,16颗小心心的坐标,具体值为:

x y
1号坐标 centerX-itemWH*3.5 centerY-itemWH*5
2号坐标(中间) centerX-itemWH*0.5 centerY-itemWH*2
3号坐标 centerX+itemWH*2.5 centerY-itemWH*5
4号坐标(右边顶部) centerX+itemWH*5.5 centerY-itemWH*8
5号坐标 centerX+itemWH*8.5 centerY-itemWH*5
6号坐标(右边) centerX+itemWH*11.5 centerY-itemWH*2
7号坐标 centerX+itemWH*8.5 centerY+itemWH
8号坐标 centerX+itemWH*5.5 centerY+itemWH*4
9号坐标 centerX+itemWH*2.5 centerY+itemWH*7
10号坐标(底部) centerX-itemWH*0.5 centerY+itemWH*10
11号坐标 centerX-itemWH*3.5 centerY+itemWH*7
12号坐标 centerX-itemWH*6.5 centerY+itemWH*4
13号坐标 centerX-itemWH*9.5 centerY+itemWH
14号坐标(左边) centerX-itemWH*12.5 centerY-itemWH*2
15号坐标 centerX-itemWH*9.5 centerY-itemWH*5
16号坐标(左边顶部) centerX-itemWH*6.5 centerY-itemWH*8

然后执行具体的代码:

// 添加放大缩小动画
// locations:16颗小心心的终点坐标
// scale:放大或缩小的倍数
// duration:执行该动画的用时
private AnimatorGroup addBiggerOrOriginAnimate(ArrayList<float[]> locations, float scale, long duration){
    AnimatorProperty ani0 = new AnimatorProperty();
    ...
    ...
    AnimatorProperty ani15 = new AnimatorProperty();

    for (int i =0; i < images.size(); i++){
        Image image = images.get(i);
        float[] loc = locations.get(i);
        AnimatorProperty ani = image.createAnimatorProperty();
        ani.scaleX(scale);
        ani.scaleY(scale);
        ani.setDuration(duration);
        ani.moveFromX(image.getContentPositionX());
        ani.moveFromY(image.getContentPositionY());
        ani.moveToX(loc[0]);
        ani.moveToY(loc[1]);
        switch (i){
            case 0:
                ani0 = ani;
                break;
                ...
                ...
            case 15:
                ani15 = ani;
                break;
        }
    }

    AnimatorGroup animatorGroup = new AnimatorGroup();	    		animatorGroup.runParallel(ani0,ani1,ani2,ani3,ani4,ani5,ani6,ani7,ani8,ani9,ani10,ani11,ani12,ani13,ani14,ani15);
    return animatorGroup;
}

// 放大动画
private void biggerAnimation(){
    AnimatorGroup animatorGroup = addBiggerOrOriginAnimate(biggerLocations, 3, bigDuration);
    animatorGroup.setStateChangedListener(new Animator.StateChangedListener() {
        @Override
        public void onStart(Animator animator) {

        }

        @Override
        public void onStop(Animator animator) {

        }

        @Override
        public void onCancel(Animator animator) {

        }

        @Override
        public void onEnd(Animator animator) {
            // 放大之后,所有小心心像中心点缩小
            smallerAnimate();
        }

        @Override
        public void onPause(Animator animator) {

        }

        @Override
        public void onResume(Animator animator) {

        }
    });
    animatorGroup.start();
}

三、16颗小心心放大之后,再像中心点移动,并且不断变小

由图可以看出,整颗大心心的中心点为:

// 中心点坐标
private float[] centerLoc = {};
// 中心点坐标数组
private ArrayList<float[]> centerLocs;

centerLoc = new float[]{centerX - itemWH * 0.5f, centerY - itemWH * 0.5f};
centerLocs = new ArrayList<>();
for (int i = 0; i < 16; i++){
    centerLocs.add(centerLoc);
}

等所有心心放大完成之后,我们给所有心心添加缩小的动画,具体代码为:

// 缩小动画
private void smallerAnimate(){
    AnimatorGroup animatorGroup = addBiggerOrOriginAnimate(centerLocs, 1, smallDuration);
    animatorGroup.setStateChangedListener(new Animator.StateChangedListener() {
        @Override
        public void onStart(Animator animator) {

        }

        @Override
        public void onStop(Animator animator) {

        }

        @Override
        public void onCancel(Animator animator) {

        }

        @Override
        public void onEnd(Animator animator) {
            
        }

        @Override
        public void onPause(Animator animator) {

        }

        @Override
        public void onResume(Animator animator) {

        }
    });
    animatorGroup.start();
}

四、移动到中心点的后,将其中的一颗小心心放大,得到我们最后想要的样子

在所有小心心都缩小的同一个点之后,监听缩小动画完成,在完成之后的回调里,把16号小心心放大。

// 缩小完成之后,把16号心心放大25倍
Image image = images.get(15);
AnimatorProperty animatorProperty = image.createAnimatorProperty();
animatorProperty.scaleX(25);
animatorProperty.scaleY(25);
animatorProperty.setDuration(bigHeartDur);
animatorProperty.start();

总结

AnimatorProperty:可以实现组件的平移、x轴y轴的放大缩小、旋转等动画效果;
AnimatorGroup:可以实现多个Animator动画对象的同时播放(runParallel)和顺序播放(runSerially)。

源码地址

https://gitee.com/YiRanRuMeng/harmony-os-love

更多原创内容请关注:中软国际 HarmonyOS 技术团队

入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
10
收藏 4
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐