Skip to content

Commit

Permalink
feat: add fold animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@dohooo
dohooo committed Jun 17, 2022
1 parent 5ead383 commit 1de879f
Show file tree
Hide file tree
Showing 10 changed files with 267 additions and 65 deletions.
6 changes: 3 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,9 @@ English | [简体中文](./README.zh-CN.md)
| <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"/> | <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">circular</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> | |
| <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">circular</a> |
| <img src="assets/parallax-layers.gif"/> | <img src="assets/flow.gif"/> | <img src="assets/fold.gif"/> |
| <a href="./exampleExpo/src/parallax-layers/index.tsx">parallax-layers</a> | <a href="./exampleExpo/src/flow/index.tsx">flow</a> | <a href="./exampleExpo/src/fold/index.tsx">fold</a> |

## Table of contents

Expand Down
6 changes: 3 additions & 3 deletions README.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,9 @@
| <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"/> | <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">circular</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> | |
| <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">circular</a> |
| <img src="assets/parallax-layers.gif"/> | <img src="assets/flow.gif"/> | <img src="assets/fold.gif"/> |
| <a href="./exampleExpo/src/parallax-layers/index.tsx">parallax-layers</a> | <a href="./exampleExpo/src/flow/index.tsx">flow</a> | <a href="./exampleExpo/src/fold/index.tsx">fold</a> |

## 目录

Expand Down
Binary file added assets/fold.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.
2 changes: 1 addition & 1 deletion exampleExpo/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
},
"dependencies": {
"@faker-js/faker": "^6.0.0-beta.0",
"@react-native-picker/picker": "^2.4.1",
"@react-native-picker/picker": "2.4.0",
"@react-navigation/core": "^6.1.0",
"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",
Expand Down
3 changes: 3 additions & 0 deletions exampleExpo/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import AnimTabBarComponent from './anim-tab-bar';
import MarqueeComponent from './marquee';
import MultipleComponent from './multiple';
import Flow from './flow';
import Fold from './fold';
import Circular from './circular';
import ParallaxLayers from './parallax-layers';
import { isWeb } from './utils';
Expand All @@ -43,6 +44,7 @@ export type RootStackParamList = {
Parallax: undefined;
Stack: undefined;

Fold: undefined;
Circular: undefined;
Flow: undefined;
ParallaxLayers: undefined;
Expand Down Expand Up @@ -121,6 +123,7 @@ function App() {
component={ParallaxComponent}
/>
<Stack.Screen name="Stack" component={StackComponent} />
<Stack.Screen name="Fold" component={Fold} />
<Stack.Screen name="Circular" component={Circular} />
<Stack.Screen name="Flow" component={Flow} />
<Stack.Screen
Expand Down
88 changes: 45 additions & 43 deletions exampleExpo/src/circular/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import * as React from 'react';
import { View } from 'react-native-ui-lib';
import Carousel from 'react-native-reanimated-carousel';
import SButton from '../components/SButton';
import type { TAnimationStyle } from '../../../src/layouts/BaseLayout';
import { ElementsText, window } from '../constants';
import { interpolate } from 'react-native-reanimated';
import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
Expand All @@ -15,6 +16,49 @@ function Index() {
const [isFast, setIsFast] = React.useState(false);
const [isAutoPlay, setIsAutoPlay] = React.useState(false);
const itemSize = 80;
const centerOffset = PAGE_WIDTH / 2 - itemSize / 2;

const animationStyle: TAnimationStyle = React.useCallback(
(value: number) => {
'worklet';

const itemGap = interpolate(
value,
[-3, -2, -1, 0, 1, 2, 3],
[-30, -15, 0, 0, 0, 15, 30]
);

const translateX =
interpolate(value, [-1, 0, 1], [-itemSize, 0, itemSize]) +
centerOffset -
itemGap;

const translateY = interpolate(
value,
[-1, -0.5, 0, 0.5, 1],
[60, 45, 40, 45, 60]
);

const scale = interpolate(
value,
[-1, -0.5, 0, 0.5, 1],
[0.8, 0.85, 1.1, 0.85, 0.8]
);

return {
transform: [
{
translateX,
},
{
translateY,
},
{ scale },
],
};
},
[centerOffset]
);

return (
<View style={{ flex: 1 }}>
Expand Down Expand Up @@ -71,49 +115,7 @@ function Index() {
</View>
</TouchableWithoutFeedback>
)}
customAnimation={(index) => {
'worklet';
const centerOffset = PAGE_WIDTH / 2 - itemSize / 2;

const itemGap = interpolate(
index,
[-3, -2, -1, 0, 1, 2, 3],
[-30, -15, 0, 0, 0, 15, 30]
);

const translateX =
interpolate(
index,
[-1, 0, 1],
[-itemSize, 0, itemSize]
) +
centerOffset -
itemGap;

const translateY = interpolate(
index,
[-1, -0.5, 0, 0.5, 1],
[60, 45, 40, 45, 60]
);

const scale = interpolate(
index,
[-1, -0.5, 0, 0.5, 1],
[0.8, 0.85, 1.1, 0.85, 0.8]
);

return {
transform: [
{
translateX,
},
{
translateY,
},
{ scale },
],
};
}}
customAnimation={animationStyle}
/>
<SButton
onPress={() => {
Expand Down
21 changes: 10 additions & 11 deletions exampleExpo/src/components/SBImageItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,28 @@ import React from 'react';
import {
StyleSheet,
View,
Image,
ActivityIndicator,
StyleProp,
ViewStyle,
ImageURISource,
} from 'react-native';
import { Image } from 'react-native-ui-lib';

interface Props {
style?: StyleProp<ViewStyle>;
index?: number;
}

export const SBImageItem: React.FC<Props> = ({ style }) => {
const uri = React.useRef(
`https://picsum.photos/400/300?t=${new Date().getTime()}`
);
export const SBImageItem: React.FC<Props> = ({ style, index: _index }) => {
const index = (_index || 0) + 1;
const source = React.useRef<ImageURISource>({
uri: `https://picsum.photos/id/${index}/400/300`,
}).current;

return (
<View style={[styles.container, style]}>
<ActivityIndicator size="small" />
<Image
style={styles.image}
source={{
uri: uri.current,
}}
/>
<Image key={index} style={styles.image} source={source} />
</View>
);
};
Expand Down
Loading

0 comments on commit 1de879f

Please sign in to comment.