feat: improve example app with a parallax effect

This commit is contained in:
Brian Sztamfater 2023-05-06 13:50:14 -03:00
parent 4496ad19e3
commit 05e54cfe21
8 changed files with 196 additions and 44 deletions

View File

@ -13,5 +13,7 @@ module.exports = {
},
},
],
'@babel/plugin-proposal-export-namespace-from',
'react-native-reanimated/plugin',
],
};

View File

@ -339,6 +339,33 @@ PODS:
- React-jsi (= 0.67.5)
- React-logger (= 0.67.5)
- React-perflogger (= 0.67.5)
- RNReanimated (2.9.1):
- DoubleConversion
- FBLazyVector
- FBReactNativeSpec
- glog
- RCT-Folly
- RCTRequired
- RCTTypeSafety
- React-callinvoker
- React-Core
- React-Core/DevSupport
- React-Core/RCTWebSocket
- React-CoreModules
- React-cxxreact
- React-jsi
- React-jsiexecutor
- React-jsinspector
- React-RCTActionSheet
- React-RCTAnimation
- React-RCTBlob
- React-RCTImage
- React-RCTLinking
- React-RCTNetwork
- React-RCTSettings
- React-RCTText
- ReactCommon/turbomodule/core
- Yoga
- Yoga (1.14.0)
- YogaKit (1.18.1):
- Yoga (~> 1.14)
@ -398,6 +425,7 @@ DEPENDENCIES:
- React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
- React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
- ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
- RNReanimated (from `../node_modules/react-native-reanimated`)
- Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
SPEC REPOS:
@ -478,6 +506,8 @@ EXTERNAL SOURCES:
:path: "../node_modules/react-native/ReactCommon/runtimeexecutor"
ReactCommon:
:path: "../node_modules/react-native/ReactCommon"
RNReanimated:
:path: "../node_modules/react-native-reanimated"
Yoga:
:path: "../node_modules/react-native/ReactCommon/yoga"
@ -512,7 +542,7 @@ SPEC CHECKSUMS:
React-jsiexecutor: e9895ccae253323ca70f693945fecbba091f0abd
React-jsinspector: ec4fe4f65ccf9d67c8429dda955d3412db8a25ef
React-logger: 85f4ef06b9723714b2dfa5b0e5502b673b271b58
react-native-transparent-video: 54d0f657780b0a79a9113167342520cc28954ee0
react-native-transparent-video: e484ad11ace8e5f62516e2c5e15efd3cb4df24b0
React-perflogger: d32ee13196f4ae2e4098fb7f8e7ed4f864c6fb0f
React-RCTActionSheet: 81779c09e34a6a3d6b15783407ba9016a774f535
React-RCTAnimation: b778eaaa42a884abcc5719035a7a0b2f54672658
@ -525,6 +555,7 @@ SPEC CHECKSUMS:
React-RCTVibration: c3b8a3245267a3849b0c7cb91a37606bf5f3aa65
React-runtimeexecutor: 434efc9e5b6d0f14f49867f130b39376c971c1aa
ReactCommon: a30c2448e5a88bae6fcb0e3da124c14ae493dac1
RNReanimated: b5b17149593e7c05e4ec5c0efea1f21e05829510
Yoga: 099a946cbf84c9b32ffdc4278d72db26710ecf92
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

View File

@ -9,13 +9,15 @@
"pods": "pod-install --quiet"
},
"dependencies": {
"@babel/plugin-proposal-export-namespace-from": "^7.18.9",
"react": "17.0.2",
"react-native": "0.67.5"
"react-native": "0.67.5",
"react-native-reanimated": "2.9.1"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/runtime": "^7.12.5",
"metro-react-native-babel-preset": "^0.66.2",
"babel-plugin-module-resolver": "^4.1.0"
"babel-plugin-module-resolver": "^4.1.0",
"metro-react-native-babel-preset": "^0.66.2"
}
}
}

View File

@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import TransparentVideo from 'react-native-transparent-video';
import Parallax from './components/Parallax';
const video1 = require('../assets/videos/1.mp4');
const video2 = require('../assets/videos/2.mp4');
@ -31,10 +31,7 @@ export default () => {
return (
<View style={{ ...styles.container, ...{ backgroundColor: background } }}>
<TransparentVideo source={video1} style={styles.video1} />
<TransparentVideo source={video2} style={styles.video2} />
<TransparentVideo source={video3} style={styles.video3} />
<TransparentVideo source={video4} style={styles.video4} />
<Parallax layers={[video1, video2, video3, video4]} />
</View>
);
};
@ -44,36 +41,11 @@ const styles = StyleSheet.create({
flex: 1,
alignItems: 'center',
},
video1: {
video: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 0,
},
video2: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 1,
},
video3: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 2,
},
video4: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 3,
},
});

View File

@ -0,0 +1,15 @@
import React from 'react';
import ParallaxVideo from './ParallaxVideo';
const Parallax = ({ layers }: any) => {
return (
<>
{layers.map((layer: any, index: number) => (
<ParallaxVideo key={'layer' + index} source={layer} zIndex={++index} />
))}
</>
);
};
export default Parallax;

View File

@ -0,0 +1,84 @@
import React from 'react';
import { StyleSheet } from 'react-native';
import TransparentVideo from 'react-native-transparent-video';
import Animated, {
useAnimatedSensor,
SensorType,
useAnimatedStyle,
interpolate,
withTiming,
} from 'react-native-reanimated';
const OFFSET = 50;
const PI = Math.PI;
const HALF_PI = PI / 2;
const ParallaxVideo = ({ source, zIndex }: any) => {
const sensor = useAnimatedSensor(SensorType.ROTATION, { interval: 10 });
const layerStyle = useAnimatedStyle(() => {
const { yaw, pitch, roll } = sensor.sensor.value;
console.log(yaw, pitch, roll, 99);
const top = withTiming(
interpolate(
pitch,
[-HALF_PI, HALF_PI],
[-OFFSET / zIndex - OFFSET, OFFSET / zIndex - OFFSET]
),
{ duration: 100 }
);
const left = withTiming(
interpolate(
roll,
[-PI, PI],
[(-OFFSET * 2) / zIndex - OFFSET, (OFFSET * 2) / zIndex - OFFSET]
),
{ duration: 100 }
);
const right = withTiming(
interpolate(
roll,
[-PI, PI],
[(OFFSET * 2) / zIndex - OFFSET, (-OFFSET * 2) / zIndex - OFFSET]
),
{ duration: 100 }
);
const bottom = withTiming(
interpolate(
pitch,
[-HALF_PI, HALF_PI],
[OFFSET / zIndex - OFFSET, -OFFSET / zIndex - OFFSET]
),
{ duration: 10 }
);
return {
top,
left,
right,
bottom,
};
});
return (
<Animated.View style={[styles.container, layerStyle]}>
<TransparentVideo source={source} style={styles.video} />
</Animated.View>
);
};
const styles = StyleSheet.create({
container: {
position: 'absolute',
},
video: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
});
export default ParallaxVideo;

View File

@ -169,7 +169,7 @@
dependencies:
"@babel/types" "^7.18.6"
"@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.21.5", "@babel/helper-plugin-utils@^7.8.0":
"@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.21.5", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
version "7.21.5"
resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.21.5.tgz#345f2377d05a720a4e5ecfa39cbf4474a4daed56"
integrity sha512-0WDaIlXKOX/3KfBK/dwP1oQGiPh6rjMkT7HIRv7i5RR2VUMwrx5ZL0dwBkKx7+SW1zwNdgjHd34IMk5ZjTeHVg==
@ -281,6 +281,14 @@
"@babel/helper-plugin-utils" "^7.18.9"
"@babel/plugin-syntax-export-default-from" "^7.18.6"
"@babel/plugin-proposal-export-namespace-from@^7.17.12", "@babel/plugin-proposal-export-namespace-from@^7.18.9":
version "7.18.9"
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz#5f7313ab348cdb19d590145f9247540e94761203"
integrity sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==
dependencies:
"@babel/helper-plugin-utils" "^7.18.9"
"@babel/plugin-syntax-export-namespace-from" "^7.8.3"
"@babel/plugin-proposal-nullish-coalescing-operator@^7.0.0", "@babel/plugin-proposal-nullish-coalescing-operator@^7.1.0":
version "7.18.6"
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz#fdd940a99a740e577d6c753ab6fbb43fdb9467e1"
@ -338,6 +346,13 @@
dependencies:
"@babel/helper-plugin-utils" "^7.18.6"
"@babel/plugin-syntax-export-namespace-from@^7.8.3":
version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz#028964a9ba80dbc094c915c487ad7c4e7a66465a"
integrity sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==
dependencies:
"@babel/helper-plugin-utils" "^7.8.3"
"@babel/plugin-syntax-flow@^7.0.0", "@babel/plugin-syntax-flow@^7.18.6", "@babel/plugin-syntax-flow@^7.2.0":
version "7.21.4"
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.21.4.tgz#3e37fca4f06d93567c1cd9b75156422e90a67107"
@ -502,7 +517,7 @@
"@babel/helper-plugin-utils" "^7.21.5"
"@babel/helper-simple-access" "^7.21.5"
"@babel/plugin-transform-object-assign@^7.0.0":
"@babel/plugin-transform-object-assign@^7.0.0", "@babel/plugin-transform-object-assign@^7.16.7":
version "7.18.6"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.18.6.tgz#7830b4b6f83e1374a5afb9f6111bcfaea872cdd2"
integrity sha512-mQisZ3JfqWh2gVXvfqYCAAyRs6+7oev+myBsTwW5RnPhYXOTuCEw2oe3YgxlXMViXUS53lG8koulI7mJ+8JE+A==
@ -639,7 +654,7 @@
"@babel/helper-validator-option" "^7.21.0"
"@babel/plugin-transform-flow-strip-types" "^7.21.0"
"@babel/preset-typescript@^7.1.0":
"@babel/preset-typescript@^7.1.0", "@babel/preset-typescript@^7.16.7":
version "7.21.5"
resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.21.5.tgz#68292c884b0e26070b4d66b202072d391358395f"
integrity sha512-iqe3sETat5EOrORXiQ6rWfoOg2y68Cs75B9wNxdPW4kixJxh7aXQE1KPdWLDniC24T/6dSnguF33W9j/ZZQcmA==
@ -969,6 +984,11 @@
dependencies:
"@types/node" "*"
"@types/invariant@^2.2.35":
version "2.2.35"
resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.35.tgz#cd3ebf581a6557452735688d8daba6cf0bd5a3be"
integrity sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==
"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
version "2.0.4"
resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
@ -2501,6 +2521,11 @@ lodash.debounce@^4.0.8:
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
lodash.isequal@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
lodash.throttle@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
@ -3320,6 +3345,20 @@ react-native-codegen@^0.0.8:
jscodeshift "^0.11.0"
nullthrows "^1.1.1"
react-native-reanimated@2.9.1:
version "2.9.1"
resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.9.1.tgz#d9a932e312c13c05b4f919e43ebbf76d996e0bc1"
integrity sha512-309SIhDBwY4F1n6e5Mr5D1uPZm2ESIcmZsGXHUu8hpKX4oIOlZj2MilTk+kHhi05LjChoJkcpfkstotCJmPRPg==
dependencies:
"@babel/plugin-proposal-export-namespace-from" "^7.17.12"
"@babel/plugin-transform-object-assign" "^7.16.7"
"@babel/preset-typescript" "^7.16.7"
"@types/invariant" "^2.2.35"
invariant "^2.2.4"
lodash.isequal "^4.5.0"
setimmediate "^1.0.5"
string-hash-64 "^1.0.3"
react-native@0.67.5:
version "0.67.5"
resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.67.5.tgz#9f2aeabf0766fb4bd5385685f4f4f2406bcdf819"
@ -3633,6 +3672,11 @@ set-value@^2.0.0, set-value@^2.0.1:
is-plain-object "^2.0.3"
split-string "^3.0.1"
setimmediate@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
integrity sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==
setprototypeof@1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
@ -3811,6 +3855,11 @@ stream-buffers@2.2.x:
resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4"
integrity sha512-uyQK/mx5QjHun80FLJTfaWE7JtwfRMKBLkMne6udYOmvH0CawotVa7TfgYHzAnpphn4+TweIx1QKMnRIbipmUg==
string-hash-64@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/string-hash-64/-/string-hash-64-1.0.3.tgz#0deb56df58678640db5c479ccbbb597aaa0de322"
integrity sha512-D5OKWKvDhyVWWn2x5Y9b+37NUllks34q1dCDhk/vYcso9fmhs+Tl3KR/gE4v5UNj2UA35cnX4KdVVGkG1deKqw==
string-width@^4.1.0, string-width@^4.2.0:
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"

View File

@ -1,9 +1,6 @@
import React from 'react';
import {
requireNativeComponent,
Platform,
ViewStyle,
} from 'react-native';
import { requireNativeComponent, ViewStyle } from 'react-native';
// @ts-ignore
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
type TransparentVideoProps = {