react-native-fiesta
Version:
A set of celebration animations powered by Skia. Engage more with your users by celebrating in your React Native application.
59 lines • 1.67 kB
JavaScript
import React, { memo, useEffect } from 'react';
import { Circle, Group, Oval, Path } from '@shopify/react-native-skia';
import { Easing, useDerivedValue, useSharedValue, withRepeat, withSpring, withTiming } from 'react-native-reanimated';
import { baseColors } from '../constants/theming';
import { singleItemFadeSpeed } from '../constants/speed';
export const Balloon = /*#__PURE__*/memo(({
x = 0,
y = 0,
color = '#A555EC',
r = 40,
depth = 1,
autoPlay = true
}) => {
const opacity = useSharedValue(1);
const stringRotation = useSharedValue(-0.05);
useEffect(() => {
opacity.value = withSpring(autoPlay ? 0 : 1, singleItemFadeSpeed);
stringRotation.value = withRepeat(withTiming(0.05, {
duration: 500,
easing: Easing.linear
}), -1, true);
}, [autoPlay, opacity, stringRotation]);
const matrix = useDerivedValue(() => [{
scale: depth
}, {
translateX: x
}, {
translateY: y
}, {
rotate: stringRotation.value
}]);
return /*#__PURE__*/React.createElement(Group, {
transform: matrix,
opacity: opacity
}, /*#__PURE__*/React.createElement(Path, {
path: `M 100 22 C 90 10, 110 80, 100 100 S 100 170, 100 150`,
color: baseColors.golden,
style: "stroke",
strokeJoin: "round",
strokeWidth: 5,
transform: [{
translateX: -55
}]
}), /*#__PURE__*/React.createElement(Oval, {
height: r * 2.3,
width: r * 2,
color: color,
transform: [{
translateY: -50
}]
}), /*#__PURE__*/React.createElement(Circle, {
cx: r / 0.8,
cy: -25,
r: r / 4,
color: baseColors.gray,
opacity: 0.3
}));
});
//# sourceMappingURL=Balloon.js.map