From daf7082ed38182396312030f90066b168026c687 Mon Sep 17 00:00:00 2001 From: Marvin Frachet Date: Fri, 18 Sep 2020 15:37:08 +0200 Subject: [PATCH] Shine and ShineOverlay reverse (#140) --- example/__snapshots__/storyshots.test.ts.snap | 4616 ++++++++++++++++- example/storybook/stories/animations.tsx | 52 +- src/animations/Shine.tsx | 12 +- src/animations/ShineOverlay.tsx | 6 +- 4 files changed, 4592 insertions(+), 94 deletions(-) diff --git a/example/__snapshots__/storyshots.test.ts.snap b/example/__snapshots__/storyshots.test.ts.snap index 37d6198..45af737 100644 --- a/example/__snapshots__/storyshots.test.ts.snap +++ b/example/__snapshots__/storyshots.test.ts.snap @@ -5323,19 +5323,55 @@ exports[`Storyshots rn-placeholder Animations 1`] = ` } } > - ShineOverlay + Shine Reverse - + + + + - - - - - - - - + /> + > + + + + + ( + + - ShineOverlay + props + + + + + ) + + + + + + + + + + => + + + + + + + + + + < + + + + + Shine + + + + + + + + + + { + + + + + ... + + + + + props + + + + + } + + + + + + + + + + reverse + + + + + = + + + + + { + + + + + true + + + + + } + + + + + + + + + + /> + + + + + } + + + + + + + + + + + + + + + + + + > + + + + + + + + + + + + + + + + + + < + + + + + PlaceholderLine + + + + + + + + + + width + + + + + = + + + + + { + + + + + 80 + + + + + } + + + + + + + + + + /> + + + + + + + + + + + + + + + + + + < + + + + + PlaceholderLine + + + + + + + + + + /> + + + + + + + + + + + + + + + + + + < + + + + + PlaceholderLine + + + + + + + + + + width + + + + + = + + + + + { + + + + + 30 + + + + + } + + + + + + + + + + /> + + + + + + + + + + + + + + + + + + </ + + + + + Placeholder + + + + + > + + + + + + + + + + Copy code + + + + + + + ShineOverlay + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + < + + + + + Placeholder + + + + + + + + + + + + + + + + + + Left + + + + + = + + + + + { + + + + + PlaceholderMedia + + + + + } + + + + + + + + + + + + + + + + + + Right + + + + + = + + + + + { + + + + + PlaceholderMedia + + + + + } + + + + + + + + + + + + + + + + + + Animation + + + + + = + + + + + { + + + + + ShineOverlay + + + + + } + + + + + + + + + + + + + + + + + + > + + + + + + + + + + + + + + + + + + < + + + + + PlaceholderLine + + + + + + + + + + width + + + + + = + + + + + { + + + + + 80 + + + + + } + + + + + + + + + + /> + + + + + + + + + + + + + + + + + + < + + + + + PlaceholderLine + + + + + + + + + + /> + + + + + + + + + + + + + + + + + + < + + + + + PlaceholderLine + + + + + + + + + + width + + + + + = + + + + + { + + + + + 30 + + + + + } + + + + + + + + + + /> + + + + + + + + + + + + + + + + + + </ + + + + + Placeholder + + + + + > + + + + + + + + + + Copy code + + + + + + + ShineOverlay Reverse + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + < + + + + + Placeholder + + + + + + + + + + + + + + + + + + Left + + + + + = + + + + + { + + + + + PlaceholderMedia + + + + + } + + + + + + + + + + + + + + + + + + Right + + + + + = + + + + + { + + + + + PlaceholderMedia + + + + + } + + + + + + + + + + + + + + + + + + Animation + + + + + = + + + + + { + + + + + ( + + + + + props + + + + + ) + + + + + + + + + + => + + + + + + + + + + < + + + + + ShineOverlay + + + + + + + + + + { + + + + + ... + + + + + props + + + + + } + + + + + + + + + + reverse + + + + + = + + + + + { + + + + + true + + + + + } + + + + + + + + + + /> ( /> + + Shine Reverse + } + > + + + + + + } +> + + + +`} + /> + + ShineOverlay ( /> + + ShineOverlay Reverse + } + > + + + + + + } +> + + + +`} + /> + + Progressive = ({ duration, children, style }) => { +export const Shine: React.FC = ({ + duration, + children, + style, + reverse, +}) => { const animation = useRef(new Animated.Value(START_VALUE)); const start = () => { @@ -35,7 +43,7 @@ export const Shine: React.FC = ({ duration, children, style }) => { const left = animation.current.interpolate({ inputRange: [START_VALUE, END_VALUE], - outputRange: ["0%", "100%"], + outputRange: reverse ? ["100%", "0%"] : ["0%", "100%"], }); return ( diff --git a/src/animations/ShineOverlay.tsx b/src/animations/ShineOverlay.tsx index 14b8452..3e84a1c 100644 --- a/src/animations/ShineOverlay.tsx +++ b/src/animations/ShineOverlay.tsx @@ -8,11 +8,15 @@ const isInteraction = false; export interface ShineOverlayProps { /* Animation duration, default is 750 */ duration?: number; + + /* Play the animation in reverse mod */ + reverse?: boolean; } export const ShineOverlay: React.FC = ({ duration, children, + reverse, }) => { const animation = useRef(new Animated.Value(START_VALUE)); @@ -37,7 +41,7 @@ export const ShineOverlay: React.FC = ({ const left = animation.current.interpolate({ inputRange: [START_VALUE, END_VALUE], - outputRange: ["0%", "100%"], + outputRange: reverse ? ["100%", "0%"] : ["0%", "100%"], }); return (