OpenHarmony - CSS实现奔跑的小熊 原创 精华

作者：李勇

前言

最近在学习OpenHarmony开发相关知识，而动画是使用比较多的一个属性并且学起来比较有意思，并且在前端这方面，使用动画能在效果展示时候给人眼前一亮的感觉。

项目说明

工具版本：DevEco Studio 3.0 Beta3

SDK版本；3.1.5.5

主要用到知识：animation， @keyframes

官方API链接：动画效果

效果展示

实现原理

基于css动画animation相关知识，通过对三个div（小熊、黑色山背景、雪山背景）进行相应的动画效果处理，最终呈现出小熊在雪山奔跑的效果。

实现过程

使用到的官方API

1. 动画样式

2. @keyframes属性说明

第一步：制作小熊，让小熊单独跑起来

效果展示：

hml部分：

    <div class="ad">
      <!-- 小熊 -->
      <div class="bear"></div>
      <!-- 雪山背景 -->
      <div class="whiteHill"></div>
      <!-- 黑色山背景 -->
      <div class="blackHill"></div>
    </div>

css部分：给小熊的图片以及对应的尺寸设定好，然后加上相应的动画效果

.bear {
    position: absolute;
    z-index: 2;
    width: 200px;
    height: 100px;
    left: 300px;
    top: 250px;
    background-image: url(./imgs/xiong.png);
    animation: bearRun 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: steps(8);
}

/*小熊奔跑效果*/
@keyframes bearRun {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -1600px 0;
    }
}

第二步：制作黑色山背景

效果图：

css部分：

.blackHill {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 536px;
    background-image: url(./imgs/fjo.png);
    animation: hillMove 30s;
    opacity: 0.7;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
/*小熊移动效果*/
@keyframes bearMove {
    0% {
        top: 80%;
        left: 0;
    }

    100% {
        top: 80%;
        left: 50%;
        transform: translateX(-50%);
    }
}
/*黑色山背景动画*/
@keyframes hillMove {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -3840px 0;
    }
}

第三步：制作雪山效果

效果展示：

css部分：

.whiteHill {
    position: absolute;
    z-index: 1;
    top: 180px;
    width: 100%;
    height: 339px;
    background-image: url(./imgs/dd.png);
    animation: hillMove 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/*制作雪山移动效果，让其生动形象*/
@keyframes hillMove {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -3840px 0;
    }
}

实现最终效果：

css部分：

/*将小熊的位置定位在固定范围内奔跑，小熊的图片长度刚好为1600像素*/
@keyframes bearRun {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -1600px 0;
    }
}
/*设置小熊从左到右奔跑的距离*/
@keyframes bearMove {
    0% {
        top: 300px;
        left: 0;
    }

    100% {
        top: 300px;
        left: 300px;
        transform: translateX(100px);
    }
}

用到的素材：

总结

这篇文章是我对学习鸿蒙动画API的一个练习，也算是一个比较常见的动画，能够在鸿蒙中实现也是比较好的，后面还需继续努力。

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

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