当前位置:网站首页>[harmony OS] [arkui] ETS development graphics and animation drawing
[harmony OS] [arkui] ETS development graphics and animation drawing
2022-06-25 03:57:00 【Huawei Developer Forum】
ArkUI】ets Development Graphics and animation
Preface : We've done it before Harmony ArkUI Use ets To realize the learning of basic page layout and data connection , This time we will draw some pictures and animations on the basis of the original . This article is based on HarmonyOS Based on the official website TS Extended declarative development paradigm document , Based on drawing and animation . Therefore, the author integrates the original text , Extract the key points , So that it can be easily presented to the reader , I hope it can help you quickly understand Harmony Of ETS Development , Learn to draw simple graphics and animation . A link to the original text will be posted at the end of this article .
First, let's talk about the general idea , We want to use component tools to draw basic geometry , Custom drawing geometry , Add animation effects to graphics , And the transition animation of the page . Therefore, the author divides the realization of the whole function into two steps , Graphics and animation , This is roughly the same as the original .
1. Graph drawing .
In previous studies , The project we have established , The page layout is complete , Let's draw graphics on this basis .FoodDetail In the food composition table on the page , Add a circular icon before the name of each ingredient as the ingredient label .
1) Draw basic figures . establish Circle Components , Add a circular icon in front of each content component as a label . modify FoodDetail Page ContentTable In the component IngredientItem Method , Add... Before the component name Circle. The label color of each component is different in build In the method , call IngredientItem, For each Circle Fill in different colors .

open previewer Or simulator to see the effect

2) Draw custom graphics . stay pages Create a new one under the folder eTS page Logo.ets. stay Logo.ets Created in Logo Component, establish Flex The component is the root node , establish Shape Components for Flex Child components . Fill the page with gradients . Set to linear gradient , The offset angle is 180deg, Three stage gradient #BDE895 -->95DE7F --> #7AB967.

open previewer Or simulator to see the effect

3) Draw a route Path, Set its draw command . The fill color is white .

4) stay Shape Draw the second... Within the component Path. Second Path The background color of is gradient .Path The drawing command of is relatively long , You can use it as a member variable of a component , adopt this call . Complete the application Logo The draw .Shape Combined three Path Components .

open previewer Or simulator to see the effect

2. Animation .
In the last part, we have learned the drawing of ordinary graphics and custom graphics , In this part, we will add animation effects to the implementation on the basis of graphic rendering , Let the graph move , This is animation .
The animation function is divided into component animation and inter page animation , In this section, we mainly complete two animation effects :Logo The fade out and zoom in effect of the icon is the same as the transition animation effect of the food list page and the food details page .
1) Flash screen animation . The expected effect of flash screen animation is , Get into Logo After the page ,animateTo The animation effect starts playing automatically . call Shape Of onAppear Method , Animate it explicitly . establish opacity and scale Numeric member variables , With a decorator @State modification . Indicates that it is stateful data , That is, the change will trigger the refresh of the page .


2) Set up animateTo The animation curve of curve.Logo The acceleration curve is slow first and then fast , Use Bezier curves cubicBezier,cubicBezier(0.4, 0, 1, 1). Use interpolation to calculate , Import first curves modular .

3) The animation duration is 1s, Time delay 0.1s Start playing , Set the display dynamic effect event The closure function of , Realization Logo Fade out and zoom in . Freeze frame after the flash screen animation is played 1s, Get into FoodCategoryList page . Set up animateTo Of onFinish Callback interface , Call timer Timer Of setTimeout Interface delay 1s after , call router.replace, Show FoodCategoryList page .

open previewer Or simulator to see the effect

4) Page transition animation . Shared element transition between food classification list page and food details page , Click FoodListItem/FoodGridItem after , The food thumbnail will enlarge , Jump with the page , Go to the big picture on the food details page . introduce curves modular . stay FoodListItem Of Image Set... On the component autoResize by false, because image By default, the component will be displayed according to the final display area , To adjust the size of the image source , To optimize picture rendering performance .


5) Set up FoodDetail Page FoodImageDisplay Of Image Component's shared element transition method (sharedTransition). The setting method is the same as above .

open previewer Or simulator to see the effect

above , This time's content sharing , thank you !
Link to original :
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-ts-drawing-feature-0000001192705721
边栏推荐
- PHP uses getid3 to obtain the duration of MP3, MP4, WAV and other media files
- Tensorflow, danger! Google itself is the one who abandoned it
- Time management understood after working at home | community essay solicitation
- Musk was sued for $258billion in MLM claims. TSMC announced the 2nm process. The Chinese Academy of Sciences found that the lunar soil contained water in the form of hydroxyl. Today, more big news is
- Winxp kernel driver debugging
- Lao Ye's blessing
- Tencent Open Source Project "Yinglong" est devenu un projet Apache de haut niveau: l'ancien Service à long terme Wechat payment, peut maintenir un million de milliards de niveaux de traitement de flux
- opencv最大能打开多少图像?
- 马斯克:推特要学习微信,让10亿人「活在上面」成为超级APP
- 发布功能完成02《ivx低代码签到系统制作》
猜你喜欢

opencv最大能打开多少图像?

Background page production 01 production of IVX low code sign in system

Crawler crawls Sina Weibo data

How far is the memory computing integrated chip from popularization? Listen to what practitioners say | collision school x post friction intelligence

Peking University has a new president! Gongqihuang, academician of the Chinese Academy of Sciences, took over and was admitted to the Physics Department of Peking University at the age of 15

BGP biplane architecture

ICML 2022 | ByteDance AI Lab proposes a multimodal model: x-vlm, learning multi granularity alignment of vision and language

墨天轮访谈 | IvorySQL王志斌—IvorySQL,一个基于PostgreSQL的兼容Oracle的开源数据库

Mstp+vrrp+ospf implements a three-tier architecture

Why can banana be a random number generator? Because it is the "king of radiation" in the fruit industry
随机推荐
Work assessment of Biopharmaceutics of Jilin University in March of the 22nd spring -00005
X86 CPU, critical! The latest vulnerability has caused heated discussion. Hackers can remotely steal keys. Intel "all processors" are affected
Work assessment of Biopharmaceutics of Jilin University in March of the 22nd spring -00031
Do you really need automated testing?
Tutorial on installing SSL certificates in Microsoft Exchange Server 2007
Crawl Sina Weibo fans
Google founder brin's second marriage broke up: it was revealed that he had filed for divorce from his Chinese wife in January, and his current fortune is $631.4 billion
AI越进化越跟人类大脑像!Meta找到了机器的“前额叶皮层”,AI学者和神经科学家都惊了...
(超详细onenet TCP协议接入)arduino+esp8266-01s接入物联网平台,上传实时采集数据/TCP透传(以及lua脚本如何获取和编写
居家办公之后才明白的时间管理 | 社区征文
[rust contribution] implement Message Oriented Middleware (6) -client from zero
Tensorflow, danger! Google itself is the one who abandoned it
Crawler grabs the idea of reading on wechat
redis
ICML 2022 | ByteDance AI Lab proposes a multimodal model: x-vlm, learning multi granularity alignment of vision and language
Copilot免费时代结束!正式版67元/月,学生党和热门开源项目维护者可白嫖
About PLSQL error initialization failure
[rust submission] review impl trail and dyn trail in rust
太极图形60行代码实现经典论文,0.7秒搞定泊松盘采样,比Numpy实现快100倍
华为上诉失败,被禁止在瑞典销售 5G 设备;苹果公司市值重获全球第一;Deno 完成 2100 万美元 A 轮融资|极客头条