openharmony/applications_app_samples
1
0
Fork 0
mirror of https://gitee.com/openharmony/applications_app_samples synced 2024-11-23 16:40:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
fe5c188f64
applications_app_samples/UI/JsAnimationStyle
History
wangli325 bdbf8f67a8 add english readme 
Signed-off-by: wangli325 <wangli325@huawei.com>
2021-07-09 16:07:29 +08:00
..
entry add sample for JsAnimationStyle 2021-07-06 21:05:07 +08:00
screenshots/device add sample for JsAnimationStyle 2021-07-06 21:05:07 +08:00
build.gradle add sample for JsAnimationStyle 2021-07-06 21:05:07 +08:00
README_zh.md add sample for JsAnimationStyle 2021-07-06 21:05:07 +08:00
README.md add english readme 2021-07-09 16:07:29 +08:00
settings.gradle add sample for JsAnimationStyle 2021-07-06 21:05:07 +08:00

README.md

JS Animation and Custom Font Styles

Introduction

This sample shows how to use animation styles, gradient styles, transition styles, and custom font styles in JavaScript.

  1. Animation styles: translate, rotate, scale, and combined

  2. Gradient styles: linear-gradient and repeating-linear-gradient

  3. Transition styles: shared-element, custom, and card

  4. Custom font styles: implemented by referencing the .otf font file The same rule applies to the TTF font.

Usage

In this sample, there are four buttons on the home screen of your app.

You 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.

Constraints

This sample can only be run on mini-system devices.