【Harmony OS】【ArkUI】ets开发 图形与动画绘制_ark ts语言怎么画图

【ArkUI】ets开发 图形与动画绘制

前言：之前我们已经完成了Harmony ArkUI 使用ets方式实现基础的页面布局和数据连接的学习，这次我们在原有的基础上进行一些图片和动画的绘制学习。本篇是以HarmonyOS官网的基于TS扩展的声明式开发范式文档，绘图和动画为基础进行编写。所以笔者将原文进行整合，提取出其中的要点，以便通俗易懂地呈现给读者，希望能帮助你快速了解Harmony的ETS开发，学会简单的图形和动画绘制的学习。本篇最后会贴上参考原文链接。

首先讲一下大致的思路，我们要使用组件工具绘制基本的几何图形，绘制自定义几何图形，给图形添加动画效果，以及页面的转场动画。所以笔者将整个功能的实现分为了两个步骤，图形绘制和动画绘制，这与原篇大致相同。

1.         图形绘制。

在之前的学习中，我们已经建立的项目，页面布局已经完备，这次学习我们就在这基础上进行图形绘制。FoodDetail页面的食物成分表里，给每一项成分名称前都加上一个圆形的图标作为成分标签。

1)       绘制基本图形。创建Circle组件，在每一项含量成分前增加一个圆形图标作为标签。修改FoodDetail页面的ContentTable组件里的IngredientItem方法，在成分名称前添加Circle。每个成分的标签颜色不一样在build方法中，调用IngredientItem，给每个Circle填充不一样的颜色。

打开previewer或模拟器看一下效果

2)       绘制自定义图形。在pages