# TransitionAnimation

**Repository Path**: harmonyos_codelabs/TransitionAnimation

## Basic Information

- **Project Name**: TransitionAnimation
- **Description**: 基于ArkTS语言及转场动画接口，实现一系列页面动画切换的场景。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 7
- **Forks**: 11
- **Created**: 2024-06-15
- **Last Updated**: 2026-01-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Using the Transition Animation

### Introduction

This codelab describes how to implement various transition animations. The Navigation component is used for page transition, transition for component transition, and bindSheet for modal transition, and geometryTransition for shared element transition and long-take animations for widget expansion.

### Preview

<img src="screenshots/device/home_en.gif" style="width:320px"></img>

### Concepts

1. Page transition: refers to a transition animation where one page disappears and another page appears. Navigation: provides default transition animations for page switching and the capability of customizing the page transition animation.
2. Component transition: configures transition parameters by using the transition attribute, and performs transition animations when a component is inserted or deleted.
3. Modal transition: is a type of transition achieved by a modal – a view that appears on top of the current view while the current view remains.
4. Shared element transition: is a type of transition achieved by animating the size and position between styles of the same or similar elements.

### Project Directory
```
├──entry/src/main/ets                         // Code area
│   ├──constants
│   │   └──CommonConstants.ets                // Common constants
│   ├──entryability
│   │   └──EntryAbility.ets                   // Application entry
│   ├──pages
│   │   ├──geometrytransition 
│   │   │   ├──GeometryTransition.ets         // Transition page of the shared element
│   │   │   └──GeometryTransitionDetail.ets   // Transition details page of the shared element
│   │   ├──longtaketransition
│   │   │   ├──LongTakeDetail.ets             // Long-take animation details page for widget expansion
│   │   │   └──LongTakeTransition.ets         // Long-take animation page for widget/list expansion
│   │   ├──ComponentTransition.ets            // Component transition animations
│   │   ├──CustomNavigationTransition.ets     // Page transition (customized)
│   │   ├──Index.ets                          // Application home page
│   │   ├──ModalTransition.ets                // Modal transition
│   │   └──NavigationTransition.ets           // Page transition (default) 
│   ├──utils
│   │   ├──commonUtil.ets                     // common utility class
│   │   └──CustomNavigationUtil.ets           // Custom transition animation utility class
│   └──views
│       └──TitleBar.ets                       // Customized title bar component
└──entry/src/main/resources                   // Directory of resource files
```

### Permissions

N/A

### Dependencies

N/A

### Constraints

1. The sample is only supported on Huawei phones with standard systems.
2. HarmonyOS: HarmonyOS 5.0.5 Release or later.
3. DevEco Studio version: DevEco Studio 6.0.2 Release or later.
4. HarmonyOS SDK version: HarmonyOS 6.0.2 Release SDK or later.