# Animations

**Repository Path**: wangzee/animations

## Basic Information

- **Project Name**: Animations
- **Description**: 动画效果展示
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 6
- **Created**: 2024-11-29
- **Last Updated**: 2024-11-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 原生动效开发

## Transition

[ezCustomTransition](https://gitee.com/civilong/ez-custom-transition) OpenHarmony 应用卡片一镜到底第三方库<br/>
可以通过 ```git submodule update --init --remote``` 拉取该 submodule 的代码<br/><br/>


| **[卡片打开一镜到底](https://gitee.com/civilong/animations/tree/master/AnimationDemos/entry/src/main/ets/pages/Transition/LongTakeTransition/CardLongTakeTransition)** | **[列表打开一镜到底](https://gitee.com/civilong/animations/tree/master/AnimationDemos/entry/src/main/ets/pages/Transition/LongTakeTransition/LongTakeTransition)** | **[视频打开一镜到底](https://gitee.com/civilong/animations/tree/master/AnimationDemos/entry/src/main/ets/pages/Transition/LongTakeTransition/VideoLongTakeTransition)** |
|:------:| :------: |:------:|
| <img align="center" src="AnimationEffects/CardLongTakeTransition.gif" width=300> | <img align="center" src="AnimationEffects/ListLongTakeTransition.gif" width=300> | <img align="center" src="AnimationEffects/VideoLongTakeTransition.gif" width=300> |



| **[搜索一镜到底](https://gitee.com/civilong/animations/tree/master/AnimationDemos/entry/src/main/ets/pages/Transition/LongTakeTransition/SearchLongTakeTransition)** | **[图片一镜到底——半模态](https://gitee.com/civilong/animations/tree/master/AnimationDemos/entry/src/main/ets/pages/Transition/LongTakeTransition/ImageLongTakeTransition/SemiModalImage)** | **[图片一镜到底——查看大图](https://gitee.com/civilong/animations/tree/master/AnimationDemos/entry/src/main/ets/pages/Transition/LongTakeTransition/ImageLongTakeTransition/ShowLargeImageWithGesture)** |
|:------:| :------: |:------:|
| <img align="center" src="AnimationEffects/SearchLongTake.gif" width=300> | <img align="center" src="AnimationEffects/ModalImageLongTakeTransition.gif" width=300> | <img align="center" src="AnimationEffects/ShowLargeImageLongTakeTransition.gif" width=300> |


| **[书本展开一镜到底](https://gitee.com/civilong/animations/tree/master/AnimationDemos/entry/src/main/ets/pages/Transition/LongTakeTransition/BookFlipLongTakeTransition)** |
|:------:|
| <img align="center" src="AnimationEffects/BookFlipLongTakeTransition.gif" width=300> |



| **[半模态转场](https://gitee.com/civilong/animations/tree/master/AnimationDemos/entry/src/main/ets/pages/Transition/PageTransition/SemiModalTransition)** | **[全模态转场](https://gitee.com/civilong/animations/tree/master/AnimationDemos/entry/src/main/ets/pages/Transition/PageTransition/FullModalTransition)** | **[左右转场](https://gitee.com/civilong/animations/tree/master/AnimationDemos/entry/src/main/ets/pages/Transition/PageTransition/LeftToRightTransition)** |
|:------:| :------: |:------:|
| <img align="center" src="AnimationEffects/SemiModalTransition.gif" width=300> | <img align="center" src="AnimationEffects/FullModalTransition.gif" width=300> | <img align="center" src="AnimationEffects/LeftToRightTransition.gif" width=300> |

|**[跟手模态弹窗](https://gitee.com/civilong/animations/tree/master/AnimationDemos/entry/src/main/ets/pages/Transition/PageTransition/InteractiveModal)**| **[跟手交互转场](https://gitee.com/civilong/animations/tree/master/AnimationDemos/entry/src/main/ets/pages/Transition/PageTransition/NavigationInteractiveTransition)** |**[秩序感动画](https://gitee.com/civilong/animations/tree/master/AnimationDemos/entry/src/main/ets/pages/Transition/ComponentTransition/ComponentOrderTransition)** |
|:------:|:------:|:------:|
| <img align="center" src="AnimationEffects/InteractiveModal.gif" width=300>| <img align="center" src="AnimationEffects/InteractiveTransition.gif" width=300> |<img align="center" src="AnimationEffects/Transition.gif" width=300> |


## Animation

| **[线性曲线与弹簧曲线](https://gitee.com/civilong/animations/tree/master/AnimationDemos/entry/src/main/ets/pages/Animation/CurveAnimation/SpringAndLinearCurve)** | **[水波纹效果](https://gitee.com/civilong/animations/tree/master/AnimationDemos/entry/src/main/ets/pages/Animation/KeyframeAnimation/WaveAnimation)** | **[关键帧动画](https://gitee.com/civilong/animations/tree/master/AnimationDemos/entry/src/main/ets/pages/Animation/KeyframeAnimation/ClockVibration)** |
|:------:| :------: |:------:|
| <img align="center" src="AnimationEffects/Curves.gif" width=300>| <img align="center" src="AnimationEffects/WaveAnimation.gif" width=300> | <img align="center" src="AnimationEffects/KeyFrameAnimation.gif" width=300> |


## Component

| **[网格增加和删除](https://gitee.com/civilong/animations/tree/master/AnimationDemos/entry/src/main/ets/pages/Component/Grid/GridAddAndRemove)** | **[Tab栏实时模糊](https://gitee.com/civilong/animations/tree/master/AnimationDemos/entry/src/main/ets/pages/Component/Tabs/TabsBlur)** | **[Tabs页签动画](https://gitee.com/civilong/animations/tree/master/AnimationDemos/entry/src/main/ets/pages/Component/Tabs/TabsAnimation)** |
|:------:| :------: |:------:|
| <img align="center" src="AnimationEffects/GridAddDeleteLongTake.gif" width=300> | <img align="center" src="AnimationEffects/TabsBlur.gif" width=300> | <img align="center" src="AnimationEffects/TabsAnimation.gif" width=300> |

| **[自定义Scroll](https://gitee.com/civilong/animations/tree/master/AnimationDemos/entry/src/main/ets/pages/Component/Scroll/CustomScroll)** |**[自定义 3D Swiper](https://gitee.com/civilong/animations/tree/master/AnimationDemos/entry/src/main/ets/pages/Component/Swiper)** |
|:------:|:------:|
| <img align="center" src="AnimationEffects/CustomScroll.gif" width=300> | <img align="center" src="AnimationEffects/CustomSwiper.gif" width=300> |