mirror of
https://github.com/zimplexing/OrionTV.git
synced 2026-02-15 12:24:44 +08:00
feat: add VideoLoadingAnimation component and integrate it into detail, play, and search screens for improved loading experience
This commit is contained in:
zimplexing
335
components/VideoLoadingAnimation.tsx
Normal file
335
components/VideoLoadingAnimation.tsx
Normal file
@@ -0,0 +1,335 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { View, StyleSheet, Animated, Easing } from "react-native";
|
||||
import { LinearGradient } from "expo-linear-gradient";
|
||||
|
||||
interface VideoLoadingAnimationProps {
|
||||
showProgressBar?: boolean;
|
||||
}
|
||||
|
||||
const VideoLoadingAnimation: React.FC<VideoLoadingAnimationProps> = ({ showProgressBar = true }) => {
|
||||
const floatAnim = useRef(new Animated.Value(0)).current;
|
||||
const pulseAnim = useRef(new Animated.Value(0)).current;
|
||||
const bounceAnims = [
|
||||
useRef(new Animated.Value(0)).current,
|
||||
useRef(new Animated.Value(0)).current,
|
||||
useRef(new Animated.Value(0)).current,
|
||||
];
|
||||
const progressAnim = useRef(new Animated.Value(0)).current;
|
||||
const gradientAnim = useRef(new Animated.Value(0)).current;
|
||||
const textFadeAnim = useRef(new Animated.Value(0)).current;
|
||||
const shapeAnims = [
|
||||
useRef(new Animated.Value(0)).current,
|
||||
useRef(new Animated.Value(0)).current,
|
||||
useRef(new Animated.Value(0)).current,
|
||||
useRef(new Animated.Value(0)).current,
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const floatAnimation = Animated.loop(
|
||||
Animated.sequence([
|
||||
Animated.timing(floatAnim, {
|
||||
toValue: -20,
|
||||
duration: 1500,
|
||||
useNativeDriver: true,
|
||||
easing: Easing.inOut(Easing.ease),
|
||||
}),
|
||||
Animated.timing(floatAnim, {
|
||||
toValue: 0,
|
||||
duration: 1500,
|
||||
useNativeDriver: true,
|
||||
easing: Easing.inOut(Easing.ease),
|
||||
}),
|
||||
])
|
||||
);
|
||||
|
||||
const pulseAnimation = Animated.loop(
|
||||
Animated.sequence([
|
||||
Animated.timing(pulseAnim, {
|
||||
toValue: 1,
|
||||
duration: 1000,
|
||||
useNativeDriver: true,
|
||||
easing: Easing.inOut(Easing.ease),
|
||||
}),
|
||||
Animated.timing(pulseAnim, {
|
||||
toValue: 0,
|
||||
duration: 1000,
|
||||
useNativeDriver: true,
|
||||
easing: Easing.inOut(Easing.ease),
|
||||
}),
|
||||
])
|
||||
);
|
||||
|
||||
const bounceAnimations = bounceAnims.map((anim, i) =>
|
||||
Animated.loop(
|
||||
Animated.sequence([
|
||||
Animated.delay(i * 160),
|
||||
Animated.timing(anim, {
|
||||
toValue: 1,
|
||||
duration: 700,
|
||||
useNativeDriver: true,
|
||||
easing: Easing.inOut(Easing.ease),
|
||||
}),
|
||||
Animated.timing(anim, {
|
||||
toValue: 0,
|
||||
duration: 700,
|
||||
useNativeDriver: true,
|
||||
easing: Easing.inOut(Easing.ease),
|
||||
}),
|
||||
])
|
||||
)
|
||||
);
|
||||
|
||||
const progressAnimation = Animated.loop(
|
||||
Animated.timing(progressAnim, {
|
||||
toValue: 1,
|
||||
duration: 4000,
|
||||
useNativeDriver: false, // width animation not supported by native driver
|
||||
easing: Easing.inOut(Easing.ease),
|
||||
})
|
||||
);
|
||||
|
||||
const gradientAnimation = Animated.loop(
|
||||
Animated.timing(gradientAnim, {
|
||||
toValue: 1,
|
||||
duration: 2000,
|
||||
useNativeDriver: false, // gradient animation not supported by native driver
|
||||
easing: Easing.inOut(Easing.ease),
|
||||
})
|
||||
);
|
||||
|
||||
const textFadeAnimation = Animated.loop(
|
||||
Animated.sequence([
|
||||
Animated.timing(textFadeAnim, {
|
||||
toValue: 1,
|
||||
duration: 1000,
|
||||
useNativeDriver: true,
|
||||
easing: Easing.inOut(Easing.ease),
|
||||
}),
|
||||
Animated.timing(textFadeAnim, {
|
||||
toValue: 0,
|
||||
duration: 1000,
|
||||
useNativeDriver: true,
|
||||
easing: Easing.inOut(Easing.ease),
|
||||
}),
|
||||
])
|
||||
);
|
||||
|
||||
const shapeAnimations = shapeAnims.map((anim, i) =>
|
||||
Animated.loop(
|
||||
Animated.sequence([
|
||||
Animated.delay(i * 2000),
|
||||
Animated.timing(anim, {
|
||||
toValue: 1,
|
||||
duration: 8000,
|
||||
useNativeDriver: true,
|
||||
easing: Easing.inOut(Easing.ease),
|
||||
}),
|
||||
])
|
||||
)
|
||||
);
|
||||
|
||||
Animated.parallel([
|
||||
floatAnimation,
|
||||
pulseAnimation,
|
||||
...bounceAnimations,
|
||||
progressAnimation,
|
||||
gradientAnimation,
|
||||
textFadeAnimation,
|
||||
...shapeAnimations,
|
||||
]).start();
|
||||
}, []);
|
||||
|
||||
const animatedStyles = {
|
||||
float: {
|
||||
transform: [{ translateY: floatAnim }],
|
||||
},
|
||||
pulse: {
|
||||
opacity: pulseAnim.interpolate({ inputRange: [0, 1], outputRange: [1, 0.7] }),
|
||||
transform: [
|
||||
{ translateX: -12.5 },
|
||||
{ translateY: -15 },
|
||||
{
|
||||
scale: pulseAnim.interpolate({ inputRange: [0, 1], outputRange: [1, 1.1] }),
|
||||
},
|
||||
],
|
||||
},
|
||||
bounce: bounceAnims.map((anim) => ({
|
||||
transform: [{ scale: anim.interpolate({ inputRange: [0, 1], outputRange: [0.8, 1.2] }) }],
|
||||
opacity: anim.interpolate({ inputRange: [0, 1], outputRange: [0.5, 1] }),
|
||||
})),
|
||||
progress: {
|
||||
width: progressAnim.interpolate({
|
||||
inputRange: [0, 0.7, 1],
|
||||
outputRange: ["0%", "100%", "100%"],
|
||||
}),
|
||||
},
|
||||
textFade: {
|
||||
opacity: textFadeAnim.interpolate({ inputRange: [0, 1], outputRange: [0.6, 1] }),
|
||||
},
|
||||
shapes: shapeAnims.map((anim, i) => ({
|
||||
transform: [
|
||||
{
|
||||
translateY: anim.interpolate({
|
||||
inputRange: [0, 0.33, 0.66, 1],
|
||||
outputRange: [0, -30, 10, 0],
|
||||
}),
|
||||
},
|
||||
{
|
||||
rotate: anim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: ["0deg", "360deg"],
|
||||
}),
|
||||
},
|
||||
],
|
||||
})),
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.bgShapes}>
|
||||
<Animated.View style={[styles.shape, styles.shape1, animatedStyles.shapes[0]]} />
|
||||
<Animated.View style={[styles.shape, styles.shape2, animatedStyles.shapes[1]]} />
|
||||
<Animated.View style={[styles.shape, styles.shape3, animatedStyles.shapes[2]]} />
|
||||
<Animated.View style={[styles.shape, styles.shape4, animatedStyles.shapes[3]]} />
|
||||
</View>
|
||||
<View style={styles.loadingContainer}>
|
||||
<Animated.View style={[styles.videoIcon, animatedStyles.float]}>
|
||||
<View style={styles.videoFrame}>
|
||||
<Animated.View style={[styles.playButton, animatedStyles.pulse]} />
|
||||
</View>
|
||||
</Animated.View>
|
||||
|
||||
<View style={styles.loadingDots}>
|
||||
<Animated.View style={[styles.dot, animatedStyles.bounce[0]]} />
|
||||
<Animated.View style={[styles.dot, animatedStyles.bounce[1]]} />
|
||||
<Animated.View style={[styles.dot, animatedStyles.bounce[2]]} />
|
||||
</View>
|
||||
|
||||
{showProgressBar && (
|
||||
<View style={styles.progressBar}>
|
||||
<Animated.View style={[styles.progressFill, animatedStyles.progress]}>
|
||||
<LinearGradient
|
||||
colors={["#4fd1c7", "#06b6d4", "#3b82f6", "#8b5cf6"]}
|
||||
style={StyleSheet.absoluteFill}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 0 }}
|
||||
/>
|
||||
</Animated.View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<Animated.Text style={[styles.loadingText, animatedStyles.textFade]}>正在加载视频</Animated.Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
backgroundColor: "#2d3748",
|
||||
overflow: "hidden",
|
||||
},
|
||||
loadingContainer: {
|
||||
alignItems: "center",
|
||||
zIndex: 10,
|
||||
},
|
||||
videoIcon: {
|
||||
width: 120,
|
||||
height: 120,
|
||||
marginBottom: 30,
|
||||
},
|
||||
videoFrame: {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: "rgba(255, 255, 255, 0.05)",
|
||||
borderWidth: 3,
|
||||
borderColor: "rgba(255, 255, 255, 0.2)",
|
||||
borderRadius: 12,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
playButton: {
|
||||
width: 0,
|
||||
height: 0,
|
||||
borderStyle: "solid",
|
||||
borderLeftWidth: 25,
|
||||
borderLeftColor: "rgba(255, 255, 255, 0.9)",
|
||||
borderTopWidth: 15,
|
||||
borderTopColor: "transparent",
|
||||
borderBottomWidth: 15,
|
||||
borderBottomColor: "transparent",
|
||||
},
|
||||
loadingDots: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
gap: 8,
|
||||
marginBottom: 20,
|
||||
},
|
||||
dot: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
backgroundColor: "rgba(255, 255, 255, 0.9)",
|
||||
borderRadius: 6,
|
||||
},
|
||||
progressBar: {
|
||||
width: 300,
|
||||
height: 6,
|
||||
backgroundColor: "rgba(255, 255, 255, 0.1)",
|
||||
borderRadius: 3,
|
||||
marginVertical: 20,
|
||||
overflow: "hidden",
|
||||
},
|
||||
progressFill: {
|
||||
height: "100%",
|
||||
borderRadius: 3,
|
||||
},
|
||||
loadingText: {
|
||||
color: "rgba(255, 255, 255, 0.9)",
|
||||
fontSize: 18,
|
||||
fontWeight: "300",
|
||||
letterSpacing: 2,
|
||||
marginTop: 10,
|
||||
},
|
||||
bgShapes: {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
zIndex: 1,
|
||||
},
|
||||
shape: {
|
||||
position: "absolute",
|
||||
backgroundColor: "rgba(255, 255, 255, 0.03)",
|
||||
borderRadius: 50,
|
||||
},
|
||||
shape1: {
|
||||
width: 80,
|
||||
height: 80,
|
||||
top: "20%",
|
||||
left: "10%",
|
||||
},
|
||||
shape2: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
top: "60%",
|
||||
right: "15%",
|
||||
},
|
||||
shape3: {
|
||||
width: 100,
|
||||
height: 100,
|
||||
bottom: "20%",
|
||||
left: "20%",
|
||||
},
|
||||
shape4: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
top: "30%",
|
||||
right: "30%",
|
||||
},
|
||||
});
|
||||
|
||||
export default VideoLoadingAnimation;
|
||||
Reference in New Issue
Block a user