-
-
Notifications
You must be signed in to change notification settings - Fork 338
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
325 additions
and
76 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| import * as React from "react"; | ||
| import type { ImageSourcePropType } from "react-native"; | ||
| import { Image, StyleSheet, View } from "react-native"; | ||
| import Animated, { | ||
| interpolate, | ||
| useAnimatedStyle, | ||
| } from "react-native-reanimated"; | ||
| import Carousel from "react-native-reanimated-carousel"; | ||
|
|
||
| import { BlurView as _BlurView } from "expo-blur"; | ||
|
|
||
| import { parallaxLayout } from "./parallax"; | ||
|
|
||
| import { SBItem } from "../../components/SBItem"; | ||
| import SButton from "../../components/SButton"; | ||
| import { ElementsText, HEADER_HEIGHT, window } from "../../constants"; | ||
| import { fruitItems } from "../../utils/items"; | ||
|
|
||
| const BlurView = Animated.createAnimatedComponent(_BlurView); | ||
|
|
||
| function Index() { | ||
| const [isAutoPlay, setIsAutoPlay] = React.useState(false); | ||
| const PAGE_WIDTH = window.width; | ||
| const PAGE_HEIGHT = window.height - HEADER_HEIGHT; | ||
| const ITEM_WIDTH = PAGE_WIDTH * 0.8; | ||
|
|
||
| return ( | ||
| <View style={{ flex: 1 }}> | ||
| <Carousel | ||
| vertical | ||
| loop={false} | ||
| autoPlay={isAutoPlay} | ||
| style={{ | ||
| width: PAGE_WIDTH, | ||
| height: PAGE_HEIGHT, | ||
| alignItems: "center", | ||
| }} | ||
| width={ITEM_WIDTH} | ||
| height={ITEM_WIDTH} | ||
| pagingEnabled={false} | ||
| snapEnabled={false} | ||
| data={[...fruitItems, ...fruitItems]} | ||
| renderItem={({ item, index, animationValue }) => { | ||
| return ( | ||
| <CustomItem | ||
| key={index} | ||
| source={item} | ||
| animationValue={animationValue} | ||
| /> | ||
| ); | ||
| }} | ||
| customAnimation={parallaxLayout( | ||
| { | ||
| size: ITEM_WIDTH, | ||
| }, | ||
| )} | ||
| scrollAnimationDuration={1200} | ||
| /> | ||
| <SButton | ||
| onPress={() => { | ||
| setIsAutoPlay(!isAutoPlay); | ||
| }} | ||
| > | ||
| {ElementsText.AUTOPLAY}:{`${isAutoPlay}`} | ||
| </SButton> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| interface ItemProps { | ||
| source: ImageSourcePropType | ||
| animationValue: Animated.SharedValue<number> | ||
| } | ||
| const CustomItem: React.FC<ItemProps> = ({ source, animationValue }) => { | ||
| const maskStyle = useAnimatedStyle(() => { | ||
| const opacity = interpolate( | ||
| animationValue.value, | ||
| [-0.5, 0, 1, 1.5], | ||
| [1, 0, 0, 1], | ||
| ); | ||
|
|
||
| return { | ||
| opacity, | ||
| }; | ||
| }, [animationValue]); | ||
|
|
||
| return ( | ||
| <View | ||
| style={{ | ||
| flex: 1, | ||
| borderRadius: 30, | ||
| overflow: "hidden", | ||
| justifyContent: "center", | ||
| alignItems: "center", | ||
| }} | ||
| > | ||
| <View style={{ width: "100%", height: "100%", position: "absolute" }}> | ||
| <SBItem pretty style={{ flex: 1 }} /> | ||
| </View> | ||
| <Image | ||
| source={source} | ||
| resizeMode={"contain"} | ||
| style={{ width: "80%", height: "80%" }} | ||
| /> | ||
| <BlurView | ||
| intensity={50} | ||
| pointerEvents="none" | ||
| style={[StyleSheet.absoluteFill, maskStyle]} | ||
| /> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| export default Index; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| import { Extrapolate, interpolate } from "react-native-reanimated"; | ||
| import type { IComputedDirectionTypes } from "react-native-reanimated-carousel"; | ||
|
|
||
| import { withAnchorPoint } from "../../utils/anchor-point"; | ||
|
|
||
| interface TBaseConfig { | ||
| size: number | ||
| } | ||
|
|
||
| export interface ILayoutConfig { | ||
| /** | ||
| * control prev/next item offset. | ||
| * @default 100 | ||
| */ | ||
| parallaxScrollingOffset?: number | ||
| /** | ||
| * control prev/current/next item offset. | ||
| * @default 0.8 | ||
| */ | ||
| parallaxScrollingScale?: number | ||
| /** | ||
| * control prev/next item offset. | ||
| * @default Math.pow(parallaxScrollingScale, 2) | ||
| */ | ||
| parallaxAdjacentItemScale?: number | ||
| } | ||
|
|
||
| export type TParallaxModeProps = IComputedDirectionTypes<{ | ||
| /** | ||
| * Carousel Animated transitions. | ||
| */ | ||
| mode?: "parallax" | ||
| modeConfig?: ILayoutConfig | ||
| }>; | ||
|
|
||
| export function parallaxLayout( | ||
| baseConfig: TBaseConfig, | ||
| ) { | ||
| const { size } = baseConfig; | ||
| // const { | ||
| // parallaxScrollingOffset = 100, | ||
| // parallaxScrollingScale = 0.8, | ||
| // parallaxAdjacentItemScale = parallaxScrollingScale ** 2, | ||
| // } = modeConfig; | ||
|
|
||
| const parallaxScrollingScale = 1; | ||
| const parallaxAdjacentItemScale = 0.8; | ||
| const parallaxScrollingOffset = -40; | ||
|
|
||
| return (value: number) => { | ||
| "worklet"; | ||
| const translateY = interpolate( | ||
| value, | ||
| [-1, 0, 1], | ||
| [-size + parallaxScrollingOffset, 0, size - parallaxScrollingOffset], | ||
| ); | ||
|
|
||
| const translateX = interpolate( | ||
| value, | ||
| [-1, 0, 1, 2], | ||
| [-size * 0.2, 0, 0, -size * 0.2], | ||
| ); | ||
|
|
||
| const zIndex = interpolate( | ||
| value, | ||
| [-1, 0, 1, 2], | ||
| [0, size, size, 0], | ||
| Extrapolate.CLAMP, | ||
| ); | ||
|
|
||
| const scale = interpolate( | ||
| value, | ||
| [-1, 0, 1, 2], | ||
| [ | ||
| parallaxAdjacentItemScale, | ||
| parallaxScrollingScale, | ||
| parallaxScrollingScale, | ||
| parallaxAdjacentItemScale, | ||
| ], | ||
| Extrapolate.CLAMP, | ||
| ); | ||
|
|
||
| const transform = { | ||
| transform: [ | ||
| { translateY }, | ||
| { translateX }, | ||
| { perspective: 200 }, | ||
| { | ||
| rotateY: `${interpolate( | ||
| value, | ||
| [-1, 0, 1, 2], | ||
| [20, 0, 0, 20], | ||
| Extrapolate.CLAMP, | ||
| )}deg`, | ||
| }, | ||
| { | ||
| rotateZ: `${interpolate( | ||
| value, | ||
| [-1, 0, 1, 2], | ||
| [-20, 0, 0, -20], | ||
| Extrapolate.CLAMP, | ||
| )}deg`, | ||
| }, | ||
| { scale }, | ||
| ], | ||
| }; | ||
|
|
||
| return { | ||
| ...withAnchorPoint( | ||
| transform, | ||
| { x: 0.5, y: 0.5 }, | ||
| { width: size, height: size }, | ||
| ), | ||
| zIndex, | ||
| }; | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,25 @@ | ||
| const path = require('path'); | ||
| const child_process = require('child_process'); | ||
| const child_process = require("child_process"); | ||
| const path = require("path"); | ||
|
|
||
| const root = path.resolve(__dirname, '..'); | ||
| const root = path.resolve(__dirname, ".."); | ||
| const args = process.argv.slice(2); | ||
| const options = { | ||
| cwd: process.cwd(), | ||
| env: process.env, | ||
| stdio: 'inherit', | ||
| encoding: 'utf-8', | ||
| stdio: "inherit", | ||
| encoding: "utf-8", | ||
| }; | ||
|
|
||
| let result; | ||
|
|
||
| if (process.cwd() !== root || args.length) { | ||
| // We're not in the root of the project, or additional arguments were passed | ||
| // In this case, forward the command to `yarn` | ||
| result = child_process.spawnSync('yarn', args, options); | ||
| } else { | ||
| result = child_process.spawnSync("yarn", args, options); | ||
| } | ||
| else { | ||
| // If `yarn` is run without arguments, perform bootstrap | ||
| result = child_process.spawnSync('yarn', ['bootstrap'], options); | ||
| result = child_process.spawnSync("yarn", ["bootstrap"], options); | ||
| } | ||
|
|
||
| process.exitCode = result.status; |
Oops, something went wrong.