mirror of
https://github.com/zoriya/react-native-svg.git
synced 2025-12-05 22:56:11 +00:00
b3b175a7fb
# Summary Due to the large number of example apps in the repository, I decided to change the structure and move all applications into an "apps" folder to maintain a clear structure.
96 lines
2.4 KiB
TypeScript
96 lines
2.4 KiB
TypeScript
import {useCallback} from 'react';
|
|
import {
|
|
Animated,
|
|
Button,
|
|
Easing,
|
|
Text,
|
|
View,
|
|
useAnimatedValue,
|
|
} from 'react-native';
|
|
import {Circle, Mask, Path, Rect, Svg} from 'react-native-svg';
|
|
|
|
export const EASING_IN: (t: number) => number = Easing.bezier(0.7, 0, 0.3, 1);
|
|
export const EASING_OUT: (t: number) => number = Easing.bezier(0.5, 0, 0.5, 1);
|
|
|
|
const AnimatedSvg = Animated.createAnimatedComponent(Svg);
|
|
|
|
export default function Playground() {
|
|
const animatedValue = useAnimatedValue(0);
|
|
|
|
const handleMouseEnter = useCallback(() => {
|
|
Animated.timing(animatedValue, {
|
|
duration: 350,
|
|
easing: EASING_IN,
|
|
toValue: 1,
|
|
useNativeDriver: false,
|
|
}).start();
|
|
}, [animatedValue]);
|
|
|
|
const handleMouseLeave = useCallback(() => {
|
|
Animated.timing(animatedValue, {
|
|
duration: 350,
|
|
easing: EASING_OUT,
|
|
toValue: 0,
|
|
useNativeDriver: false,
|
|
}).start();
|
|
}, [animatedValue]);
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
paddingTop: 100,
|
|
marginHorizontal: 16,
|
|
flex: 1,
|
|
}}>
|
|
<Text style={{zIndex: 100}}>Text1</Text>
|
|
<AnimatedSvg
|
|
height="200"
|
|
viewBox="0 0 200 200"
|
|
width="200"
|
|
// use transform or style.transform
|
|
// transform={[
|
|
// {
|
|
// scale: animatedValue.interpolate({
|
|
// inputRange: [0, 1],
|
|
// outputRange: [1, 1.2],
|
|
// }),
|
|
// },
|
|
// ]}
|
|
style={{
|
|
transform: [
|
|
{
|
|
scale: animatedValue.interpolate({
|
|
inputRange: [0, 1],
|
|
outputRange: [1, 1.2],
|
|
}),
|
|
},
|
|
],
|
|
}}
|
|
//
|
|
>
|
|
<Mask id="myMask">
|
|
<Rect fill="white" height="100" width="100" x="0" y="0" />
|
|
<Path
|
|
d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
|
|
fill="black"
|
|
/>
|
|
</Mask>
|
|
<Rect fill="pink" height="200" width="300" x="0" y="0" />
|
|
<Circle
|
|
cx="50"
|
|
cy="50"
|
|
fill="purple"
|
|
mask="url(#myMask)"
|
|
r="50"
|
|
onPress={() => console.log('sadas')}
|
|
/>
|
|
<Rect fill="green" x="50" y="100" width="100" height="100" />
|
|
</AnimatedSvg>
|
|
|
|
<Text>Text2</Text>
|
|
<Button onPress={handleMouseEnter} title="Mouse Enter" />
|
|
<Button onPress={handleMouseLeave} title="Mouse Leave" />
|
|
</View>
|
|
);
|
|
}
|