--- theme: smartblue --- ***本文正在参加[「金石计划 . 瓜分6万现金大奖」](https://juejin.cn/post/7162096952883019783 "https://juejin.cn/post/7162096952883019783")*** # 一、前言 > 本文会详细讲解我参加 [HarmonyOS【挑战赛第三期】玩转ArkUI动效的项目](https://developer.huawei.com/consumer/cn/forum/topic/0202105790886170594?fid=0101587866109860105) > > 我的参赛项目源码：[【挑战赛第三期】JellyfishAnimation](https://gitee.com/harmonyos/event/tree/codelabsContest2022/%E3%80%90%E6%8C%91%E6%88%98%E8%B5%9B%E7%AC%AC%E4%B8%89%E6%9C%9F%E3%80%91JellyfishAnimation) > > 我们的动画效果参考自：[cassie-codes的水母SVG](https://codepen.io/cassie-codes/pen/BMXENG)

华为鸿蒙已经放弃Java作为鸿蒙的开发语言，开发了一个申明式UI框架ArkUI，开发语言变成了ArkTS。 > ArkUI是一套构建分布式应用界面的声明式UI开发框架。 > > ArkTS基于TypeScript（简称TS）语言扩展而来，是TS的超集。 > > ArkTS继承了TS的所有特性。我们用一个简单示例，来说明ArkTS的基本组成：

关于`ArkUI`更多内容，感兴趣的同学，可以[点击这里快速入门](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/start-overview-0000001380121578-V3?catalogVersion=V3)，下面我们进入正题。 # 二、源码目录结构

# 三、拆解SVG 我们开头提到[cassie-codes的水母SVG](https://codepen.io/cassie-codes/pen/BMXENG)，如果拿到这个SVG的话，要怎么用程序去渲染它呢？ ## 1.组成我们精简一下看看它的组成内容： ```xml ``` [点击查看SVG全部内容](https://codepen.io/cassie-codes/pen/BMXENG)，我们先拿**第一个路径数据**来看一下： ```txt M226.31 258.64c.77 8.68 2.71 16.48 1.55 25.15-.78 8.24-5 15.18-7.37 23-3.1 10.84-4.65 22.55 1.17 32.52 4.65 7.37 7.75 11.71 5.81 21.25-2.33 8.67-7.37 16.91-2.71 26 4.26 8.68 7.75 4.34 8.14-3 .39-12.14 0-24.28.77-36 .78-16.91-12-27.75-2.71-44.23 7-12.15 11.24-33 7.76-46.83z ``` > 对于不熟悉SVG相关内容的同学，你可能看不懂，甚至有点烦躁，不过也不要急，看不懂也不要紧，跟着我们一起往下看，学完你也可以在[**GSAP动画平台**](https://greensock.com/)里面找一些相关的SVG练手。我们简单看一下**路径数据**里面的一些常见命令含义： - **M，m：** Move to：移至，移动到 - **L， l， H， h， V， v**： Line to：画线 - **C， c， S， s：** 三次贝塞尔曲线 - **Q， q， T， t：** 二次贝塞尔曲线 - **A，a：** 椭圆弧曲线 - **Z， z：** 关闭路径这些命令**区分大小写**，**大写字**母表示绝对坐标，而**小写字母**表示命令相对于当前位置。

可视化路径操作

更多细节和知识点请查阅：[路径数据命令规范](https://www.w3.org/TR/SVG/paths.html#PathData)。 ## 2.ArkUI中如何绘制那么我们如何在ArkUI中使用这段路径数据呢？我们在HarmonyOS文档中看到了[Path绘制组件](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-drawing-components-path-0000001380440906-V3?catalogVersion=V3) > **Path绘制组件**: 根据绘制路径生成封闭的自定义形状 Path接口如下： ```ts Path(value?: { width?: number | string; height?: number | string; commands?: string }) ``` 参数含义如下： | 参数名 | 参数类型 | 必填 | 参数描述 | | :------- | :--------------- | :- | :--------------- | | width | number 或 string | 否 | 路径所在矩形的宽度默认值：0 | | height | number 或 string | 否 | 路径所在矩形的高度默认值：0 | | commands | string | 否 | 路径绘制的命令字符串默认值：''| 它还有很多[通用的属性](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-drawing-components-path-0000001380440906-V3?catalogVersion=V3)，那么我们把水母的第一个路径数据传递到**commands**里面试试： ```ts Path() .commands('M226.31 258.64c.77 8.68 2.71 16.48 1.55....') .fillOpacity(0.49) .fill(Color.White) ```

第一条触手

我们看到第一条触手就这么被我们渲染出来了，是不是感觉也挺简单的。 ## 3.元素标签g 这时候可能有同学会问，**path外层**还有一个有个元素标签``包裹着，那么这个元素标签``是干什么的呢？问的好👏🏻👏🏻，**这个g表示**： > 组合对象的容器，添加到g元素上的变换会应用到其所有的子元素上。 > > 添加到g元素的属性会被其所有的子元素继承。这里有个小插曲：一开始我也犯了个错误，在华为的官方文档里面没有看到**Group组件**。为什么会联想到**Group**呢？下意识的去联想ArkUI应该和其他平台的一样，应该也有。我想着既然是组合对象的容器，又没有找到**Group**那我用**Stack**不就完事了吗？然而，发现事情并不是想象的那么简单。如果你用**Stack直接包裹Path**，可能会出现的**错误效果**如下：

```ts // 类似如下代码： Stack(){ Path().commands(...) ... }.width('100%').height('100%') ``` 我们可以看到，内容是绘制了，但是远远达不到我们要的效果，甚至丑陋不堪，都乱了，到底是什么原因呢？每一步失败的过程，就不在这里一一描述😂，原因在于我们：**没有设置“路径所在的矩形宽高”** 那我们如果挨个按照下面这样设置，是不是太蠢了？ ```ts Path().commands(...).width(...).height(...) ``` 后来我再次**仔细查阅**HarmonyOS文档，在绘制组件中找到了[Shape组件](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-drawing-components-shape-0000001380600886-V3?catalogVersion=V3)，官方文档的解释，它有2种意思： > 1、绘制组件使用Shape作为父组件，实现类似SVG的效果。 > > 2、绘制组件单独使用，用于在页面上绘制指定的图形。至此，我们再回头看一下，width/height造成的一些问题。我们在SVG的XML中通过[viewBox属性](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/viewBox)获取到，`viewBox="0 0 530.46 563.1"` > **viewBox** 属性的值是一个包含 4 个参数的列表 min-x, min-y, width and height，以空格或者逗号分隔开。 > >**不允许**宽度和高度为**负值**，width或height的值，等于0的情况下，这个元素将不会被渲染出来。 ```xml

所以本项目也不能使用Mesh的特性了，期待官方更新。 # 四、制作动画华为官方对参加挑战赛的要求是：参赛者需要 **：①使用animateTo实现显式动画，②使用animation为组件添加属性动画**。 [点击查看animation属性动画](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-animatorproperty-0000001380121786-V3?catalogVersion=V3) ， [点击查看animateTo显示动画](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-explicit-animation-0000001380281318-V3?catalogVersion=V3) 所以我们就根据官方的要求来写了个水母动画参赛作品。我们的数据状态存储都放在**JellyFishViewModel**里面。水母的**眨眼睛**，使用的是**animateTo**，通过显示动画修改：**水母眼睛Y轴的缩放和不透明度来达到眨眼睛效果。** 我们来简单看下眨眼动画： ```ts blinkAnimateTo() { animateTo({ duration: 150, curve: Curve.EaseOut, iterations: 1, playMode: PlayMode.Normal, onFinish:()=> { // 闭眼之后，再恢复回睁眼状态 this.blinkScale =this.blinkScale == 0.3?1:0.3 this.blinkAlpha =this.blinkAlpha == 0? 1: 0 } }, () => { this.blinkScale =this.blinkScale == 0.3?1:0.3 this.blinkAlpha =this.blinkAlpha == 0? 1: 0 }) } ``` 然后给我们的水母眼睛设置**缩放**和**透明度**属性就能眨眼睛了，下面是**左侧眼睛**的部分代码： ```ts Shape() { Path() .fill(...) .commands(...) } .scale({ y: this.blinkScale, centerY: '233px' }) .opacity(this.blinkAlpha) .viewPort({ width: '530.46px', height: '563.1px' }) ``` 到这里可能又有同学，又要疑惑提问题了，怎么设置缩放还要设置**centerY**呢？我们当然要设置，缩放的中心点啦，并且现在是针对于Y轴，所以需要：设置Y轴中心点，不然它缩放就偏了。那为什么是**233px**呢？问的好，我们看一下左侧眼睛的**pathData**: ```txt M262 233.63a3.1 3.1 0 1 0-3 3.19 3.1 3.1 0 0 0 3-3.19z ``` 我们上面拆解SVG的时候，介绍了**M**的含义是：移动到，且大写字母表示：**绝对坐标**，当然你填233.63px也可以。我们整个水母body上下移动，是如何做到的呢？我们利用了属性动画**animation**更新组件的属性**translate里面的y轴数据**达到上下移动的动画，我们简单看下下面的**伪代码**，它是如何做到不停的上下移动的: ```ts Stack() { // 水母的body元素分组 ... } .translate({ y : this.translateY }) .onAreaChange(()=>{ this.translateY = -30 }) .animation({ duration: 3000, // 动画时长 iterations: 1, // 播放次数 playMode: PlayMode.Normal, // 动画模式 onFinish: () => { // 动画播放完成回调 this.translateY = this.translateY == 0? -30 : 0 } }) ``` 这样我们就做到，让水母整个body元素上下动画移动了，且不会停止。那么水母的脸部怎么做到上下左右动画移动，且不会和body同步，有错位和落差的效果呢？问的好，我们再来看一下水母脸部的动画怎么处理的： ```ts Stack() { // 脸部数据 ... } .translate({ y : this.translateY, x: this.translateX }) .onAreaChange(()=>{ this.translateY = -25 this.translateX = ... // 这里其实我们是在viewModel中，使用Math.random来计算translateX的值的 // 感兴趣的可以打开我们的源码查看 }) .animation({ duration: 3000, // 动画时长 iterations: 1, // 播放次数 playMode: PlayMode.Normal, // 动画模式 onFinish: () => { // 动画播放完成回调 this.translateY = this.translateY == 0? -25 : 0 this.translateX = ... // 这里其实我们是在viewModel中，使用Math.random来计算translateX的值的 // 感兴趣的可以打开我们的源码查看 } }) ``` **如果学完觉得有帮助的，可以点赞❤️+收藏❤️+分享❤️+关注❤️**