Skip to content

Commit

Permalink
feat: add circular animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@dohooo
dohooo committed Jun 16, 2022
1 parent 8d4cb57 commit 289a1e8
Show file tree
Hide file tree
Showing 10 changed files with 200 additions and 66 deletions.
22 changes: 11 additions & 11 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,25 +23,25 @@ English | [简体中文](./README.zh-CN.md)
> Click on the image to see the code snippets. [[Try it]](https://snack.expo.dev/@zhaodonghao586/simple-carousel) 🍺
| <img src="assets/normal-horizontal.gif"/> | <img src="assets/normal-vertical.gif"/> | <img src="assets/parallax-horizontal.gif"/> |
| :--------------------------------------------------------------: | :---------------------------------------------------------------: | :----------------------------------------------------------------: |
| <img src="assets/normal-horizontal.gif"/> | <img src="assets/normal-vertical.gif"/> | <img src="assets/parallax-horizontal.gif"/> |
| :------------------------------------------------------------------: | :-------------------------------------------------------------------: | :--------------------------------------------------------------------: |
| <a href="./exampleExpo/src/normal/index.tsx">normal-horizontal</a> | <a href="./exampleExpo/src/normal/index.tsx">normal-vertical</a> | <a href="./exampleExpo/src/parallax/index.tsx">parallax-horizontal</a> |
| <img src="assets/parallax-vertical.gif"/> | <img src="assets/stack-horizontal-left.gif"/> | <img src="assets/stack-horizontal-right.gif"/> |
| <img src="assets/parallax-vertical.gif"/> | <img src="assets/stack-horizontal-left.gif"/> | <img src="assets/stack-horizontal-right.gif"/> |
| <a href="./exampleExpo/src/parallax/index.tsx">parallax-vertical</a> | <a href="./exampleExpo/src/stack/index.tsx">stack-horizontal-left</a> | <a href="./exampleExpo/src/stack/index.tsx">stack-horizontal-right</a> |
| <img src="assets/stack-vertical-left.gif"/> | <img src="assets/stack-vertical-right.gif"/> | <img src="assets/stack-horizontal-right.gif"/> |
| <img src="assets/stack-vertical-left.gif"/> | <img src="assets/stack-vertical-right.gif"/> | <img src="assets/stack-horizontal-right.gif"/> |
| <a href="./exampleExpo/src/stack/index.tsx">stack-vertical-left</a> | <a href="./exampleExpo/src/stack/index.tsx">stack-vertical-right</a> | <a href="./exampleExpo/src/stack/index.tsx">stack-horizontal-right</a> |

> Now you can make cool animations with us! Very easy! [[Details]](./docs/custom-animation.md)
| <img src="assets/advanced-parallax.gif"/> | <img src="assets/pause-advanced-parallax.gif"/> | <img src="assets/scale-fade-in-out.gif"/> |
| :-------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------: | :-----------------------------------------------------------------------: |
| <img src="assets/advanced-parallax.gif"/> | <img src="assets/pause-advanced-parallax.gif"/> | <img src="assets/scale-fade-in-out.gif"/> |
| :-----------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------: |
| <a href="./exampleExpo/src/advanced-parallax/index.tsx">advanced-parallax</a> | <a href="./exampleExpo/src/pause-advanced-parallax/index.tsx">pause-advanced-parallax</a> | <a href="./exampleExpo/src/scale-fade-in-out/index.tsx">scale-fade-in-out</a> |
| <img src="assets/rotate-scale-fade-in-out.gif"/> | <img src="assets/rotate-in-out.gif"/> | <img src="assets/anim-tab-bar.gif"/> |
| <img src="assets/rotate-scale-fade-in-out.gif"/> | <img src="assets/rotate-in-out.gif"/> | <img src="assets/anim-tab-bar.gif"/> |
| <a href="./exampleExpo/src/rotate-scale-fade-in-out/index.tsx">rotate-scale-fade-in-out</a> | <a href="./exampleExpo/src/rotate-in-out/index.tsx">rotate-in-out</a> | <a href="./exampleExpo/src/anim-tab-bar/index.tsx">anim-tab-bar</a> |
| <img src="assets/marquee.gif"/> | <img src="assets/multiple.gif"/> | |
| <a href="./exampleExpo/src/marquee/index.tsx">marquee</a> | <a href="./exampleExpo/src/multiple/index.tsx">multiple</a> | |
| <img src="assets/parallax-layers.gif"/> | <img src="assets/flow.gif"/> | |
| <a href="./exampleExpo/src/parallax-layers/index.tsx">parallax-layers</a> | <a href="./exampleExpo/src/flow/index.tsx">flow</a> | |
| <img src="assets/marquee.gif"/> | <img src="assets/multiple.gif"/> | <img src="assets/circular.gif"/> |
| <a href="./exampleExpo/src/marquee/index.tsx">marquee</a> | <a href="./exampleExpo/src/multiple/index.tsx">multiple</a> | <a href="./exampleExpo/src/circular/index.tsx">anim-tab-bar</a> |
| <img src="assets/parallax-layers.gif"/> | <img src="assets/flow.gif"/> | |
| <a href="./exampleExpo/src/parallax-layers/index.tsx">parallax-layers</a> | <a href="./exampleExpo/src/flow/index.tsx">flow</a> | |

## Table of contents

Expand Down
22 changes: 11 additions & 11 deletions README.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,25 +23,25 @@
> 点击图片，查看代码 [[试一下]](https://snack.expo.dev/@zhaodonghao586/simple-carousel) 🍺
| <img src="assets/normal-horizontal.gif"/> | <img src="assets/normal-vertical.gif"/> | <img src="assets/parallax-horizontal.gif"/> |
| :--------------------------------------------------------------: | :---------------------------------------------------------------: | :----------------------------------------------------------------: |
| <img src="assets/normal-horizontal.gif"/> | <img src="assets/normal-vertical.gif"/> | <img src="assets/parallax-horizontal.gif"/> |
| :------------------------------------------------------------------: | :-------------------------------------------------------------------: | :--------------------------------------------------------------------: |
| <a href="./exampleExpo/src/normal/index.tsx">normal-horizontal</a> | <a href="./exampleExpo/src/normal/index.tsx">normal-vertical</a> | <a href="./exampleExpo/src/parallax/index.tsx">parallax-horizontal</a> |
| <img src="assets/parallax-vertical.gif"/> | <img src="assets/stack-horizontal-left.gif"/> | <img src="assets/stack-horizontal-right.gif"/> |
| <img src="assets/parallax-vertical.gif"/> | <img src="assets/stack-horizontal-left.gif"/> | <img src="assets/stack-horizontal-right.gif"/> |
| <a href="./exampleExpo/src/parallax/index.tsx">parallax-vertical</a> | <a href="./exampleExpo/src/stack/index.tsx">stack-horizontal-left</a> | <a href="./exampleExpo/src/stack/index.tsx">stack-horizontal-right</a> |
| <img src="assets/stack-vertical-left.gif"/> | <img src="assets/stack-vertical-right.gif"/> | <img src="assets/stack-horizontal-right.gif"/> |
| <img src="assets/stack-vertical-left.gif"/> | <img src="assets/stack-vertical-right.gif"/> | <img src="assets/stack-horizontal-right.gif"/> |
| <a href="./exampleExpo/src/stack/index.tsx">stack-vertical-left</a> | <a href="./exampleExpo/src/stack/index.tsx">stack-vertical-right</a> | <a href="./exampleExpo/src/stack/index.tsx">stack-horizontal-right</a> |

> 现在你可以和我们一起来制作酷炫的动画了！ 非常简单! [[详情]](./docs/custom-animation.zh-CN.md)
| <img src="assets/advanced-parallax.gif"/> | <img src="assets/pause-advanced-parallax.gif"/> | <img src="assets/scale-fade-in-out.gif"/> |
| :-------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------: | :-----------------------------------------------------------------------: |
| <img src="assets/advanced-parallax.gif"/> | <img src="assets/pause-advanced-parallax.gif"/> | <img src="assets/scale-fade-in-out.gif"/> |
| :-----------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------: |
| <a href="./exampleExpo/src/advanced-parallax/index.tsx">advanced-parallax</a> | <a href="./exampleExpo/src/pause-advanced-parallax/index.tsx">pause-advanced-parallax</a> | <a href="./exampleExpo/src/scale-fade-in-out/index.tsx">scale-fade-in-out</a> |
| <img src="assets/rotate-scale-fade-in-out.gif"/> | <img src="assets/rotate-in-out.gif"/> | <img src="assets/anim-tab-bar.gif"/> |
| <img src="assets/rotate-scale-fade-in-out.gif"/> | <img src="assets/rotate-in-out.gif"/> | <img src="assets/anim-tab-bar.gif"/> |
| <a href="./exampleExpo/src/rotate-scale-fade-in-out/index.tsx">rotate-scale-fade-in-out</a> | <a href="./exampleExpo/src/rotate-in-out/index.tsx">rotate-in-out</a> | <a href="./exampleExpo/src/anim-tab-bar/index.tsx">anim-tab-bar</a> |
| <img src="assets/marquee.gif"/> | <img src="assets/multiple.gif"/> | |
| <a href="./exampleExpo/src/marquee/index.tsx">marquee</a> | <a href="./exampleExpo/src/multiple/index.tsx">multiple</a> | |
| <img src="assets/parallax-layers.gif"/> | <img src="assets/flow.gif"/> | |
| <a href="./exampleExpo/src/parallax-layers/index.tsx">parallax-layers</a> | <a href="./exampleExpo/src/flow/index.tsx">flow</a> | |
| <img src="assets/marquee.gif"/> | <img src="assets/multiple.gif"/> | <img src="assets/circular.gif"/> |
| <a href="./exampleExpo/src/marquee/index.tsx">marquee</a> | <a href="./exampleExpo/src/multiple/index.tsx">multiple</a> | <a href="./exampleExpo/src/circular/index.tsx">anim-tab-bar</a> |
| <img src="assets/parallax-layers.gif"/> | <img src="assets/flow.gif"/> | |
| <a href="./exampleExpo/src/parallax-layers/index.tsx">parallax-layers</a> | <a href="./exampleExpo/src/flow/index.tsx">flow</a> | |

## 目录

Expand Down
Binary file added assets/circular.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions exampleExpo/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import registerRootComponent from 'expo/build/launch/registerRootComponent';

import App from './src/App';

registerRootComponent(App);
6 changes: 4 additions & 2 deletions exampleExpo/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "exampleexpo",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"main": "index.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
Expand Down Expand Up @@ -39,7 +39,6 @@
"@babel/runtime": "^7.9.6",
"@expo/webpack-config": "~0.16.2",
"@types/react": "~17.0.21",
"@types/react-native": "~0.66.13",
"@types/react-native-snap-carousel": "^3.8.5",
"babel-plugin-inline-dotenv": "^1.6.0",
"babel-plugin-module-resolver": "^4.1.0",
Expand All @@ -49,5 +48,8 @@
"gh-pages": "^3.2.3",
"typescript": "~4.3.5"
},
"resolutions": {
"@types/react": "^17"
},
"private": true
}
43 changes: 23 additions & 20 deletions exampleExpo/App.tsx → exampleExpo/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,31 +7,32 @@ import { I18nManager } from 'react-native';
import { Text, View } from 'react-native-ui-lib';
import { TouchableWithoutFeedback } from 'react-native-gesture-handler';

import Home from './src/home';
import NormalComponent from './src/normal';
import ParallaxComponent from './src/parallax';
import StackComponent from './src/stack';
import ComplexComponent from './src/complex';
import AdvancedParallaxComponent from './src/advanced-parallax';
import PauseAdvancedParallaxComponent from './src/pause-advanced-parallax';
import ScaleFadeInOutComponent from './src/scale-fade-in-out';
import RotateInOutComponent from './src/rotate-in-out';
import RotateScaleFadeInOutComponent from './src/rotate-scale-fade-in-out';
import AnimTabBarComponent from './src/anim-tab-bar';
import MarqueeComponent from './src/marquee';
import MultipleComponent from './src/multiple';
import Flow from './src/flow';
import ParallaxLayers from './src/parallax-layers';
import { isWeb } from './src/utils';
import { window } from './src/constants';
import { QRCode } from './src/components/QRCode';
import Home from './home';
import NormalComponent from './normal';
import ParallaxComponent from './parallax';
import StackComponent from './stack';
import ComplexComponent from './complex';
import AdvancedParallaxComponent from './advanced-parallax';
import PauseAdvancedParallaxComponent from './pause-advanced-parallax';
import ScaleFadeInOutComponent from './scale-fade-in-out';
import RotateInOutComponent from './rotate-in-out';
import RotateScaleFadeInOutComponent from './rotate-scale-fade-in-out';
import AnimTabBarComponent from './anim-tab-bar';
import MarqueeComponent from './marquee';
import MultipleComponent from './multiple';
import Flow from './flow';
import Circular from './circular';
import ParallaxLayers from './parallax-layers';
import { isWeb } from './utils';
import { window } from './constants';
import { QRCode } from './components/QRCode';

// Not support to WEB (react-native-snap-carousel)
const SnapCarouselComplexComponent = React.lazy(
() => import('./src/snap-carousel-complex')
() => import('./snap-carousel-complex')
);
const SnapCarouselLoopComponent = React.lazy(
() => import('./src/snap-carousel-loop')
() => import('./snap-carousel-loop')
);

const Stack = createNativeStackNavigator<RootStackParamList>();
Expand All @@ -42,6 +43,7 @@ export type RootStackParamList = {
Parallax: undefined;
Stack: undefined;

Circular: undefined;
Flow: undefined;
ParallaxLayers: undefined;
Complex: undefined;
Expand Down Expand Up @@ -119,6 +121,7 @@ function App() {
component={ParallaxComponent}
/>
<Stack.Screen name="Stack" component={StackComponent} />
<Stack.Screen name="Circular" component={Circular} />
<Stack.Screen name="Flow" component={Flow} />
<Stack.Screen
name="ParallaxLayers"
Expand Down
Loading

0 comments on commit 289a1e8

Please sign in to comment.