[harmony OS] [arkui] ETS development graphics and animation drawing

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