开发指导—利用CSS动画实现HarmonyOS鸿蒙Next动效（一）

开发指导—利用CSS动画实现HarmonyOS鸿蒙Next动效（一） 注：本文内容分享转载自 HarmonyOS Developer 官网文档

CSS 语法参考

CSS 是描述 HML 页面结构的样式语言。所有组件均存在系统默认样式，也可在页面 CSS 样式文件中对组件、页面自定义不同的样式。请参考通用样式了解兼容 JS 的类 Web 开发范式支持的组件样式。

尺寸单位

  • 逻辑像素 px（文档中以 <length> 表示）：

    ○ 默认屏幕具有的逻辑宽度为 720px（配置见配置文件中的 window 小节），实际显示时会将页面布局缩放至屏幕实际宽度，如 100px 在实际宽度为 1440 物理像素的屏幕上，实际渲染为 200 物理像素（从 720px 向 1440 物理像素，所有尺寸放大 2 倍）。

    ○ 额外配置 autoDesignWidth 为 true 时（配置见配置文件中的 window 小节），逻辑像素 px 将按照屏幕密度进行缩放，如 100px 在屏幕密度为 3 的设备上，实际渲染为 300 物理像素。应用需要适配多种设备时，建议采用此方法。

  • 百分比（文档中以 <percentage> 表示）：表示该组件占父组件尺寸的百分比，如组件的 width 设置为 50%，代表其宽度为父组件的 50%。

样式导入

为了模块化管理和代码复用，CSS 样式文件支持 @import 语句，导入 css 文件。

声明样式

每个页面目录下存在一个与布局 hml 文件同名的 css 文件，用来描述该 hml 页面中组件的样式，决定组件应该如何显示。

  1. 内部样式，支持使用 style、class 属性来控制组件的样式。例如：
<!-- index.hml -->
<div class="container">
  <text style="color: red">Hello World</text>
</div>

/* index.css */
.container {
  justify-content: center;
}
  1. 文件导入，合并外部样式文件。例如，在 common 目录中定义样式文件 style.css，并在 index.css 文件首行中进行导入：
/* style.css */
.title {
  font-size: 50px;
}

/* index.css */
@import '../../common/style.css';
.container {
  justify-content: center;
}

选择器

css 选择器用于选择需要添加样式的元素，支持的选择器如下表所示：

示例：

<!-- 页面布局xxx.hml -->
<div id="containerId" class="container">
  <text id="titleId" class="title">标题</text>
  <div class="content">
    <text id="contentId">内容</text>
  </div>
</div>

/* 页面样式xxx.css */
/* 对所有div组件设置样式 */
div {
  flex-direction: column;
}
/* 对class="title"的组件设置样式 */
.title {
  font-size: 30px;
}
/* 对id="contentId"的组件设置样式 */
#contentId {
  font-size: 20px;
}
/* 对所有class="title"以及class="content"的组件都设置padding为5px */
.title, .content {
  padding: 5px;
}
/* 对class="container"的组件下的所有text设置样式 */
.container text {
  color: #007dff;
}
/* 对class="container"的组件下的直接后代text设置样式 */
.container > text {
  color: #fa2a2d;
}

以上样式运行效果如下：

其中“.container text”将“标题”和“内容”设置为蓝色，而“.container > text”直接后代选择器将“标题”设置为红色。2 者优先级相同，但直接后代选择器声明顺序靠后，将前者样式覆盖（优先级计算见[选择器优先级](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/js-framework-syntax-css-0000001427902284-V3#ZH-CN_TOPIC_0000001523808394__选择器优先级））。

选择器优先级

选择器的优先级计算规则与 w3c 规则保持一致（只支持：内联样式，id，class，tag，后代和直接后代），其中内联样式为在元素 style 属性中声明的样式。

当多条选择器声明匹配到同一元素时，各类选择器优先级由高到低顺序为：内联样式 > id > class > tag。

伪类

css 伪类是选择器中的关键字，用于指定要选择元素的特殊状态。例如，:disabled 状态可以用来设置元素的 disabled 属性变为 true 时的样式。

除了单个伪类之外，还支持伪类的组合，例如，:focus:checked 状态可以用来设置元素的 focus 属性和 checked 属性同时为 true 时的样式。支持的单个伪类如下表所示，按照优先级降序排列：

伪类示例如下，设置按钮的:active伪类可以控制被用户按下时的样式：

<!-- index.hml -->
<div class="container">
  <input type="button" class="button" value="Button">
</div>

/* index.css */
.button:active {
  background-color: #888888; /*按钮被激活时，背景颜色变为#888888 */
}

说明

针对弹窗类组件及其子元素不支持伪类效果，包括 popup、dialog、menu、option、picker

样式预编译

预编译提供了利用特有语法生成 css 的程序，可以提供变量、运算等功能，令开发者更便捷地定义组件样式，目前支持 less、sass 和 scss 的预编译。使用样式预编译时，需要将原 css 文件后缀改为 less、sass 或 scss，如 index.css 改为 index.less、index.sass 或 index.scss。

  • 当前文件使用样式预编译，例如将原 index.css 改为 index.less：
/* index.less */
/* 定义变量 */
@colorBackground: #000000;
.container {
  background-color: @colorBackground; /* 使用当前less文件中定义的变量 */
}
  • 引用预编译文件，例如 common 中存在 style.scss 文件，将原 index.css 改为 index.scss，并引入 style.scss：
/* style.scss */
/* 定义变量 */
$colorBackground: #000000;

在 index.scss 中引用：

/* index.scss */
/* 引入外部scss文件 */
@import '../../common/style.scss';
.container {
  background-color: $colorBackground; /* 使用style.scss中定义的变量 */
}

说明

引用的预编译文件建议放在 common 目录进行管理。

CSS 样式继承 6+

css 样式继承提供了子节点继承父节点样式的能力，继承下来的样式在多选择器样式匹配的场景下，优先级排最低，当前支持以下样式的继承：

  • font-family
  • font-weight
  • font-size
  • font-style
  • text-align
  • line-height
  • letter-spacing
  • color
  • visibility

更多关于开发指导—利用CSS动画实现HarmonyOS鸿蒙Next动效（一）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于开发指导—利用CSS动画实现HarmonyOS鸿蒙Next动效（一）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，利用CSS动画实现动效的关键步骤如下：

  1. 定义关键帧：使用[@keyframes](/user/keyframes)定义动画的起始和结束状态。例如：

    [@keyframes](/user/keyframes) fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

  2. 应用动画：将动画应用到元素上，指定动画名称、持续时间、延迟等属性。例如：

    .element {
    animation: fadeIn 2s ease-in-out 1s forwards;
}

  3. 优化性能：使用transform和opacity等属性进行动画，避免使用left、top等可能引发重排的属性，以提升性能。

  4. 响应式设计：结合媒体查询，确保动画在不同设备上都能良好展示。

通过这些步骤，可以在HarmonyOS鸿蒙Next中实现流畅且高效的CSS动画效果。

回到顶部