前言

本文会详细讲解我参加： HarmonyOS【挑战赛第三期】玩转ArkUI动效的项目

我的参赛项目源码：【挑战赛第三期】JellyfishAnimation

动画效果参考自：cassie-codes的水母SVG

华为鸿蒙已经放弃Java作为鸿蒙的开发语言，开发了一个申明式UI框架ArkUI，开发语言变成了ArkTS。

ArkUI是一套构建分布式应用界面的声明式UI开发框架。

ArkTS基于TypeScript（简称TS）语言扩展而来，是TS的超集。

ArkTS继承了TS的所有特性。

我们用一个简单示例，来说明ArkTS的基本组成：

关于ArkUI更多内容，感兴趣的同学，可以点击这里快速入门，下面我们进入正题。

源码目录结构

拆解SVG

我们开头提到cassie-codes的水母SVG，如果拿到这个SVG的话，要怎么用程序去渲染它呢？

1.组成

我们精简一下看看它的组成内容：

<!-- 为了直观的查看组成结构，我们删除了路径数据 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 530.46 563.1"><defs><filter id="turbulence" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%"><feTurbulence data-filterId="3" baseFrequency="0.02 0.03" result="turbulence" id="feturbulence" type="fractalNoise" numOctaves="1" seed="1"></feTurbulence><feDisplacementMap id="displacement" xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="turbulence" scale="13" /></filter>    </defs><g class="jellyfish" filter="url(#turbulence)"><path class="tentacle"/><path class="tentacle"/><path class="tentacle" /><path class="tentacle" /><path class="tentacle"/><path class="tentacle"/><path class="tentacle"/><path class="tentacle"/><path class="tentacle"/><path class="face" /><path class="outerJelly"/><path id="freckle" /><path id="freckle"/><path id="freckle-4"/></g><g id="bubbles" fill="#fff"><path class="bubble"/><path class="bubble"/><path class="bubble" /><path class="bubble"/><path class="bubble"/><path class="bubble"/><path class="bubble" /></g><g class="jellyfish face"><path class="eye lefteye"  fill="#b4bebf" d=""/><path class="eye righteye" fill="#b4bebf" d=""/><path class="mouth" fill="#d3d3d3" opacity=".72"/></g>
</svg>

点击查看SVG全部内容，我们先拿第一个路径数据来看一下：

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动画平台里面找一些相关的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： 关闭路径

这些命令区分大小写，大写字母表示绝对坐标，而小写字母表示命令相对于当前位置。

更多细节和知识点请查阅：路径数据命令规范。

2.ArkUI中如何绘制

那么我们如何在ArkUI中使用这段路径数据呢？

我们在HarmonyOS文档中看到了Path绘制组件

Path绘制组件: 根据绘制路径生成封闭的自定义形状

Path接口如下：

Path(value?: { width?: number | string; height?: number | string; commands?: string })

参数含义如下：

参数名	参数类型	必填	参数描述
width	number 或 string	否	路径所在矩形的宽度默认值：0
height	number 或 string	否	路径所在矩形的高度默认值：0
commands	string	否	路径绘制的命令字符串默认值：’’

它还有很多通用的属性，那么我们把水母的第一个路径数据传递到commands里面试试：

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 class="...">包裹着，那么这个元素标签<g class="...">是干什么的呢？

问的好

HarmonyOS玩转ArkUI动效 - 水母动画相关推荐

android 魅族动画效果,魅族 Flyme 9 知意动效：动画自然，提供 Flyme 1-8 经典系统主题...
IT之家 3 月 2 日消息今天下午,魅族带来了 Flyme 9 发布会.魅族称,系统作为用户与手机交互的媒介,是用户体验的灵魂.回看过去,每一代的 Flyme 都堪称经典.Flyme 用简洁优雅的设 ...
lottie动画_神器基于Lottie的动效设计平台 ─ 犸良，零基础轻松做出动画效果
犸良是什么? 它是一站式动效制作平台,通过海量的动效素材以及可视化编辑能力,帮助零基础的用户轻松完成动效制作. 平台集成了以lottie为代表的动效技术,让曾经令人苦恼的性能问题和包大小一并解决,只有 ...
uniapp image图片切换动效_动效设计从概念到落地
一.什么是动效设计聚焦于产品中的动效,我们常说的动效设计可以分为3类: 1.交互动效交互动效承载了产品流程.交互行为的串联,不论可实际操作的交互原型还是纯做 demo 展示的动效过场都可以算作交互 ...
APP动效设计需要遵守哪些原则？
随着动态沉浸式体验的广泛普及,丰富而细腻的APP动效是考察UI设计师专业技能的因素之一.很多UI新手想知道APP动效设计需要遵守哪些原则,以下小编就给大家介绍一下. 1.具备个性化的动效设计. 这是动 ...
xd可以用ui动效效果吗_通过动画使UI设计栩栩如生：Adobe XD和After Effects
xd可以用ui动效效果吗 Note - If you don't fancy splashing out on an Adobe license, you can trial their produc ...
动效设计的物理法则：动画的一切皆在于时间点和空间幅度（转）
动效作为当今提升网页感官效果的利器,在各种类型的网页中已经全面开花,如何做到自然流畅让用户感觉舒适的动画效果呢?今天就来跟大家聊一聊动效设计的物理法则,以及它是如何应用的. 首先来一发大师金句,迪士尼 ...
js svg语音波动动画_让动效更酷炫！4 个常见且常用的 SVG 交互动画方法
本文介绍了 4 种常见的 SVG 交互动画方法,帮你了解 SVG 交互动画的原理和简单方法. 优秀的人机交互和舒适合理的动画,一直是 UX 设计师孜孜不倦追求的目标.但 UX 设计师每天都遇到能做出效 ...
ae中心点重置工具_（精品）AE从小白到大神之路（七）-AE动画—动效常见的设计方法...
动画--动效常见的设计方法一．基础动画: 1.通过物体本身的旋转/缩放/位移/不透明度等基本属性来做的一些动效属于最基础的动画效果. 二．路径动画: (1)修剪路径动画(前面系列案例--下载提示完成 ...
Flutter Hero动画让你的APP页面切换充满动效不一样的体验不一样的细节处理
优美的应用体验来自于细节的处理,更源自于码农的自我要求与努力,当然也需要码农年轻灵活的思维. 本文章实现的Demo效果,如下图所示: 1 首先是页面的主体在这里使用的是Scaffold脚手架来构建 ...

HarmonyOS玩转ArkUI动效 - 水母动画

前言