mirror of
https://github.com/status-im/react-native-transparent-video.git
synced 2025-02-13 15:17:14 +00:00
feat: improve example app with a parallax effect
This commit is contained in:
parent
4496ad19e3
commit
05e54cfe21
@ -13,5 +13,7 @@ module.exports = {
|
||||
},
|
||||
},
|
||||
],
|
||||
'@babel/plugin-proposal-export-namespace-from',
|
||||
'react-native-reanimated/plugin',
|
||||
],
|
||||
};
|
||||
|
@ -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
|
||||
|
||||
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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,
|
||||
},
|
||||
});
|
||||
|
15
example/src/components/Parallax.tsx
Normal file
15
example/src/components/Parallax.tsx
Normal 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;
|
84
example/src/components/ParallaxVideo.tsx
Normal file
84
example/src/components/ParallaxVideo.tsx
Normal 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;
|
@ -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"
|
||||
|
@ -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 = {
|
||||
|
Loading…
x
Reference in New Issue
Block a user