README.md
1# JS Animation and Custom Font Styles<a name="EN-US_TOPIC_0000001126346896"></a>
2
3### Introduction<a name="section104mcpsimp"></a>
4
5This sample shows how to use animation styles, gradient styles, transition styles, and custom font styles in JavaScript.
6
71. Animation styles: translate, rotate, scale, and combined
8
92. Gradient styles: linear-gradient and repeating-linear-gradient
10
113. Transition styles: shared-element, custom, and card
12
13
14### Usage<a name="section111mcpsimp"></a>
15
16In this sample, there are four buttons on the home screen of your app.
17
18You can touch any of these buttons to access the corresponding style page and view how a style looks. For example, you can touch the Move button on the animation style page to see how a component moves with the defined settings.
19
20### Constraints<a name="section115mcpsimp"></a>
21
22This sample can only be run on mini-system devices.
23
24
README_zh.md
1# 动画与自定义字体
2
3### 简介
4
5本示例展示了JS中动画样式，渐变样式和转场样式。
6
7实现效果如下：
8
9
10
11### 相关概念
12
13动画样式：移动，旋转，缩放，复合动画。
14
15渐变样式：线性渐变，重复性渐变 。
16
17转场样式：共享元素样式，自定义页面转场样式，卡片转场样式。
18
19### 相关权限
20
21不涉及。
22
23### 使用说明
24
251.本示例主界面为三个按钮，分别对应动画样式，渐变样式和转场样式。
26
272.进入各样式页面，点击**页面效果**按钮，展示对应效果（如**移动**按钮，展示移动动画效果）。
28
29### 约束与限制
30
311.本示例仅支持在标准系统上运行。
32
332.本示例需要使用DevEco Studio 3.0 Beta4 (Build Version: 3.0.0.992, built on July 14, 2022)才可编译运行。
34
35
