Skip to content

Commit 7e0049c

Browse files
dohooodohooo
authored
Merge pull request #418 from dohooo/develop
docs: added new example
2 parents 1305d3c + 86ccc09 commit 7e0049c

File tree

11 files changed

+325
-76
lines changed

11 files changed

+325
-76
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@ English | [简体中文](./README.zh-CN.md)
5050
| <a href="./exampleExpo/src/pages/cube-3d/index.tsx">cube-3d</a> | <a href="./exampleExpo/src/pages/blur-parallax/index.tsx">blur-parallax</a> | <a href="./exampleExpo/src/pages/curve/index.tsx">curve</a> |
5151
| <img src="assets/parallax-layers.gif"/> | <img src="assets/stack-cards.gif"/> | <img src="assets/flow.gif"/> |
5252
| <a href="./exampleExpo/src/pages/parallax-layers/index.tsx">parallax-layers</a> | <a href="./exampleExpo/src/stack-cards/index.tsx">stack-cards</a> | <a href="./exampleExpo/src/pages/flow/index.tsx">flow</a> |
53+
| <img src="assets/blur-rotate.gif"/> | ||
54+
| <a href="./exampleExpo/src/pages/blur-rotate/index.tsx">blur-rotate</a> | | |
5355

5456
## Table of contents
5557

‎README.zh-CN.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@
4949
| <a href="./exampleExpo/src/pages/cube-3d/index.tsx">cube-3d</a> | <a href="./exampleExpo/src/pages/blur-parallax/index.tsx">blur-parallax</a> | <a href="./exampleExpo/src/pages/curve/index.tsx">curve</a> |
5050
| <img src="assets/parallax-layers.gif"/> | <img src="assets/stack-cards.gif"/> | <img src="assets/flow.gif"/> |
5151
| <a href="./exampleExpo/src/pages/parallax-layers/index.tsx">parallax-layers</a> | <a href="./exampleExpo/src/pages/stack-cards/index.tsx">stack-cards</a> | <a href="./exampleExpo/src/pages/flow/index.tsx">flow</a> |
52+
| <img src="assets/blur-rotate.gif"/> | | |
53+
| <a href="./exampleExpo/src/pages/blur-rotate/index.tsx">blur-rotate</a> | | |
5254

5355
## 目录
5456

‎assets/blur-rotate.gif‎

7 MB
Loading

‎exampleExpo/src/Home.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { useNavigation } from "@react-navigation/native";
1414
import AdvancedParallaxComponent from "./pages/advanced-parallax";
1515
import AnimTabBarComponent from "./pages/anim-tab-bar";
1616
import BlurParallax from "./pages/blur-parallax";
17+
import BlurRotate from "./pages/blur-rotate";
1718
import Circular from "./pages/circular";
1819
import ComplexComponent from "./pages/complex";
1920
import Cube3D from "./pages/cube-3d";
@@ -64,6 +65,10 @@ export const LayoutsPage = [
6465
];
6566

6667
export const CustomAnimations = [
68+
{
69+
name: "BlurRotate",
70+
page: BlurRotate,
71+
},
6772
{
6873
name: "Curve",
6974
page: Curve,

‎exampleExpo/src/components/SBItem.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { SBTextItem } from "./SBTextItem";
1111

1212
interface Props extends AnimateProps<ViewProps> {
1313
style?: StyleProp<ViewStyle>
14-
index: number
14+
index?: number
1515
pretty?: boolean
1616
}
1717

@@ -28,7 +28,7 @@ export const SBItem: React.FC<Props> = (props) => {
2828
<Animated.View testID={testID} style={{ flex: 1 }} {...animatedViewProps}>
2929
{isPretty
3030
? (
31-
<SBImageItem style={style} index={index} />
31+
<SBImageItem style={style} index={index} showIndex={typeof index === "number"} />
3232
)
3333
: (
3434
<SBTextItem style={style} index={index} />

‎exampleExpo/src/components/SBTextItem.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import { StyleSheet, Text, View } from "react-native";
44

55
interface Props {
66
style?: StyleProp<ViewStyle>
7-
index: number
7+
index?: number
88
}
99

1010
export const SBTextItem: React.FC<Props> = ({ style, index }) => {
1111
return (
1212
<View style={[styles.container, style]}>
13-
<Text style={{ fontSize: 30, color: "black" }}>{index}</Text>
13+
{typeof index === "number" && <Text style={{ fontSize: 30, color: "black" }}>{index}</Text>}
1414
</View>
1515
);
1616
};

‎exampleExpo/src/constants/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { Dimensions } from "react-native";
33

44
import { isWeb } from "../utils";
55

6+
export const HEADER_HEIGHT = 100;
7+
68
export const ElementsText = {
79
AUTOPLAY: "AutoPlay",
810
};

‎exampleExpo/src/pages/blur-rotate/index.tsx‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import * as React from "react";
2+
import type { ImageSourcePropType } from "react-native";
3+
import { Image, StyleSheet, View } from "react-native";
4+
import Animated, {
5+
interpolate,
6+
useAnimatedStyle,
7+
} from "react-native-reanimated";
8+
import Carousel from "react-native-reanimated-carousel";
9+
10+
import { BlurView as _BlurView } from "expo-blur";
11+
12+
import { parallaxLayout } from "./parallax";
13+
14+
import { SBItem } from "../../components/SBItem";
15+
import SButton from "../../components/SButton";
16+
import { ElementsText, HEADER_HEIGHT, window } from "../../constants";
17+
import { fruitItems } from "../../utils/items";
18+
19+
const BlurView = Animated.createAnimatedComponent(_BlurView);
20+
21+
function Index() {
22+
const [isAutoPlay, setIsAutoPlay] = React.useState(false);
23+
const PAGE_WIDTH = window.width;
24+
const PAGE_HEIGHT = window.height - HEADER_HEIGHT;
25+
const ITEM_WIDTH = PAGE_WIDTH * 0.8;
26+
27+
return (
28+
<View style={{ flex: 1 }}>
29+
<Carousel
30+
vertical
31+
loop={false}
32+
autoPlay={isAutoPlay}
33+
style={{
34+
width: PAGE_WIDTH,
35+
height: PAGE_HEIGHT,
36+
alignItems: "center",
37+
}}
38+
width={ITEM_WIDTH}
39+
height={ITEM_WIDTH}
40+
pagingEnabled={false}
41+
snapEnabled={false}
42+
data={[...fruitItems, ...fruitItems]}
43+
renderItem={({ item, index, animationValue }) => {
44+
return (
45+
<CustomItem
46+
key={index}
47+
source={item}
48+
animationValue={animationValue}
49+
/>
50+
);
51+
}}
52+
customAnimation={parallaxLayout(
53+
{
54+
size: ITEM_WIDTH,
55+
},
56+
)}
57+
scrollAnimationDuration={1200}
58+
/>
59+
<SButton
60+
onPress={() => {
61+
setIsAutoPlay(!isAutoPlay);
62+
}}
63+
>
64+
{ElementsText.AUTOPLAY}:{`${isAutoPlay}`}
65+
</SButton>
66+
</View>
67+
);
68+
}
69+
70+
interface ItemProps {
71+
source: ImageSourcePropType
72+
animationValue: Animated.SharedValue<number>
73+
}
74+
const CustomItem: React.FC<ItemProps> = ({ source, animationValue }) => {
75+
const maskStyle = useAnimatedStyle(() => {
76+
const opacity = interpolate(
77+
animationValue.value,
78+
[-0.5, 0, 1, 1.5],
79+
[1, 0, 0, 1],
80+
);
81+
82+
return {
83+
opacity,
84+
};
85+
}, [animationValue]);
86+
87+
return (
88+
<View
89+
style={{
90+
flex: 1,
91+
borderRadius: 30,
92+
overflow: "hidden",
93+
justifyContent: "center",
94+
alignItems: "center",
95+
}}
96+
>
97+
<View style={{ width: "100%", height: "100%", position: "absolute" }}>
98+
<SBItem pretty style={{ flex: 1 }} />
99+
</View>
100+
<Image
101+
source={source}
102+
resizeMode={"contain"}
103+
style={{ width: "80%", height: "80%" }}
104+
/>
105+
<BlurView
106+
intensity={50}
107+
pointerEvents="none"
108+
style={[StyleSheet.absoluteFill, maskStyle]}
109+
/>
110+
</View>
111+
);
112+
};
113+
114+
export default Index;

‎exampleExpo/src/pages/blur-rotate/parallax.ts‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import { Extrapolate, interpolate } from "react-native-reanimated";
2+
import type { IComputedDirectionTypes } from "react-native-reanimated-carousel";
3+
4+
import { withAnchorPoint } from "../../utils/anchor-point";
5+
6+
interface TBaseConfig {
7+
size: number
8+
}
9+
10+
export interface ILayoutConfig {
11+
/**
12+
* control prev/next item offset.
13+
* @default 100
14+
*/
15+
parallaxScrollingOffset?: number
16+
/**
17+
* control prev/current/next item offset.
18+
* @default 0.8
19+
*/
20+
parallaxScrollingScale?: number
21+
/**
22+
* control prev/next item offset.
23+
* @default Math.pow(parallaxScrollingScale, 2)
24+
*/
25+
parallaxAdjacentItemScale?: number
26+
}
27+
28+
export type TParallaxModeProps = IComputedDirectionTypes<{
29+
/**
30+
* Carousel Animated transitions.
31+
*/
32+
mode?: "parallax"
33+
modeConfig?: ILayoutConfig
34+
}>;
35+
36+
export function parallaxLayout(
37+
baseConfig: TBaseConfig,
38+
) {
39+
const { size } = baseConfig;
40+
// const {
41+
// parallaxScrollingOffset = 100,
42+
// parallaxScrollingScale = 0.8,
43+
// parallaxAdjacentItemScale = parallaxScrollingScale ** 2,
44+
// } = modeConfig;
45+
46+
const parallaxScrollingScale = 1;
47+
const parallaxAdjacentItemScale = 0.8;
48+
const parallaxScrollingOffset = -40;
49+
50+
return (value: number) => {
51+
"worklet";
52+
const translateY = interpolate(
53+
value,
54+
[-1, 0, 1],
55+
[-size + parallaxScrollingOffset, 0, size - parallaxScrollingOffset],
56+
);
57+
58+
const translateX = interpolate(
59+
value,
60+
[-1, 0, 1, 2],
61+
[-size * 0.2, 0, 0, -size * 0.2],
62+
);
63+
64+
const zIndex = interpolate(
65+
value,
66+
[-1, 0, 1, 2],
67+
[0, size, size, 0],
68+
Extrapolate.CLAMP,
69+
);
70+
71+
const scale = interpolate(
72+
value,
73+
[-1, 0, 1, 2],
74+
[
75+
parallaxAdjacentItemScale,
76+
parallaxScrollingScale,
77+
parallaxScrollingScale,
78+
parallaxAdjacentItemScale,
79+
],
80+
Extrapolate.CLAMP,
81+
);
82+
83+
const transform = {
84+
transform: [
85+
{ translateY },
86+
{ translateX },
87+
{ perspective: 200 },
88+
{
89+
rotateY: `${interpolate(
90+
value,
91+
[-1, 0, 1, 2],
92+
[20, 0, 0, 20],
93+
Extrapolate.CLAMP,
94+
)}deg`,
95+
},
96+
{
97+
rotateZ: `${interpolate(
98+
value,
99+
[-1, 0, 1, 2],
100+
[-20, 0, 0, -20],
101+
Extrapolate.CLAMP,
102+
)}deg`,
103+
},
104+
{ scale },
105+
],
106+
};
107+
108+
return {
109+
...withAnchorPoint(
110+
transform,
111+
{ x: 0.5, y: 0.5 },
112+
{ width: size, height: size },
113+
),
114+
zIndex,
115+
};
116+
};
117+
}

‎scripts/bootstrap.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
1-
const path = require('path');
2-
const child_process = require('child_process');
1+
const child_process = require("child_process");
2+
const path = require("path");
33

4-
const root = path.resolve(__dirname, '..');
4+
const root = path.resolve(__dirname, "..");
55
const args = process.argv.slice(2);
66
const options = {
77
cwd: process.cwd(),
88
env: process.env,
9-
stdio: 'inherit',
10-
encoding: 'utf-8',
9+
stdio: "inherit",
10+
encoding: "utf-8",
1111
};
1212

1313
let result;
1414

1515
if (process.cwd() !== root || args.length) {
1616
// We're not in the root of the project, or additional arguments were passed
1717
// In this case, forward the command to `yarn`
18-
result = child_process.spawnSync('yarn', args, options);
19-
} else {
18+
result = child_process.spawnSync("yarn", args, options);
19+
}
20+
else {
2021
// If `yarn` is run without arguments, perform bootstrap
21-
result = child_process.spawnSync('yarn', ['bootstrap'], options);
22+
result = child_process.spawnSync("yarn", ["bootstrap"], options);
2223
}
2324

2425
process.exitCode = result.status;

0 commit comments

Comments
 (0)