From 969f73bf63586cab883f5a0bd1eda6c706594754 Mon Sep 17 00:00:00 2001 From: aberratio Date: Mon, 4 Mar 2024 16:55:13 +0100 Subject: [PATCH 1/3] add slow back animation prop for better ux --- index.d.ts | 7 +++++++ index.js | 38 ++++++++++++++++++++++++++++++-------- index.native.js | 38 ++++++++++++++++++++++++++++++-------- readme.md | 8 ++++++++ 4 files changed, 75 insertions(+), 16 deletions(-) diff --git a/index.d.ts b/index.d.ts index dee80d9..3a2191b 100644 --- a/index.d.ts +++ b/index.d.ts @@ -47,6 +47,13 @@ declare interface Props { */ preventSwipe?: string[] + /** + * The card return animation is slow. + * + * @default false + */ + slowBackAnimation?: boolean; + /** * What method to evaluate what direction to throw the card on release. 'velocity' will evaluate direction based on the direction of the swiping movement. 'position' will evaluate direction based on the position the card has on the screen like in the app tinder. * If set to position it is recommended to manually set swipeThreshold based on the screen size as not all devices will accommodate the default distance of 300px and the default native swipeThreshold is 1px which most likely is undesirably low. diff --git a/index.js b/index.js index 4848af7..82e77a3 100644 --- a/index.js +++ b/index.js @@ -21,6 +21,10 @@ const physics = { animateBack: { friction: 10, tension: 200 + }, + animateBackSlow: { + friction: 50, + tension: 200 } } @@ -54,13 +58,6 @@ const animateOut = async (gesture, setSpringTarget, windowHeight, windowWidth) = ) } -const animateBack = (setSpringTarget) => { - // translate back to the initial position - return new Promise((resolve) => { - setSpringTarget.start({ xyrot: [0, 0, 0], config: physics.animateBack, onRest: resolve }) - }) -} - const getSwipeDirection = (property) => { if (Math.abs(property.x) > Math.abs(property.y)) { if (property.x > settings.swipeThreshold) { @@ -83,7 +80,19 @@ const AnimatedDiv = animated.div const TinderCard = React.forwardRef( ( - { flickOnSwipe = true, children, onSwipe, onCardLeftScreen, className, preventSwipe = [], swipeRequirementType = 'velocity', swipeThreshold = settings.swipeThreshold, onSwipeRequirementFulfilled, onSwipeRequirementUnfulfilled }, + { + flickOnSwipe = true, + slowBackAnimation = false, + children, + onSwipe, + onCardLeftScreen, + className, + preventSwipe = [], + swipeRequirementType = 'velocity', + swipeThreshold = settings.swipeThreshold, + onSwipeRequirementFulfilled, + onSwipeRequirementUnfulfilled + }, ref ) => { const { width, height } = useWindowSize() @@ -94,6 +103,19 @@ const TinderCard = React.forwardRef( settings.swipeThreshold = swipeThreshold + const animateBack = (setSpringTarget) => { + // translate back to the initial position + return new Promise((resolve) => { + setSpringTarget.start({ + xyrot: [0, 0, 0], + config: slowBackAnimation + ? physics.animateBackSlow + : physics.animateBack, + onRest: resolve + }) + }) + } + React.useImperativeHandle(ref, () => ({ async swipe (dir = 'right') { if (onSwipe) onSwipe(dir) diff --git a/index.native.js b/index.native.js index 980a1e4..dd8336e 100644 --- a/index.native.js +++ b/index.native.js @@ -22,6 +22,10 @@ const physics = { animateBack: { friction: 10, tension: 200 + }, + animateBackSlow: { + friction: 50, + tension: 200 } } @@ -57,13 +61,6 @@ const animateOut = async (gesture, setSpringTarget) => { ) } -const animateBack = (setSpringTarget) => { - // translate back to the initial position - return new Promise((resolve) => { - setSpringTarget.current[0].start({ x: 0, y: 0, rot: 0, config: physics.animateBack, onRest: resolve }) - }) -} - const getSwipeDirection = (property) => { if (Math.abs(property.x) > Math.abs(property.y)) { if (property.x > settings.swipeThreshold) { @@ -86,7 +83,19 @@ const AnimatedView = animated(View) const TinderCard = React.forwardRef( ( - { flickOnSwipe = true, children, onSwipe, onCardLeftScreen, className, preventSwipe = [], swipeRequirementType = 'velocity', swipeThreshold = settings.swipeThreshold, onSwipeRequirementFulfilled, onSwipeRequirementUnfulfilled }, + { + flickOnSwipe = true, + slowBackAnimation = false, + children, + onSwipe, + onCardLeftScreen, + className, + preventSwipe = [], + swipeRequirementType = 'velocity', + swipeThreshold = settings.swipeThreshold, + onSwipeRequirementFulfilled, + onSwipeRequirementUnfulfilled + }, ref ) => { const [{ x, y, rot }, setSpringTarget] = useSpring(() => ({ @@ -97,6 +106,19 @@ const TinderCard = React.forwardRef( })) settings.swipeThreshold = swipeThreshold + const animateBack = (setSpringTarget) => { + // translate back to the initial position + return new Promise((resolve) => { + setSpringTarget.start({ + xyrot: [0, 0, 0], + config: slowBackAnimation + ? physics.animateBackSlow + : physics.animateBack, + onRest: resolve + }) + }) + } + React.useImperativeHandle(ref, () => ({ async swipe (dir = 'right') { if (onSwipe) onSwipe(dir) diff --git a/readme.md b/readme.md index d2775e2..b0b5266 100644 --- a/readme.md +++ b/readme.md @@ -104,6 +104,14 @@ Callback that will be executed when a `TinderCard` has left the screen. It will An array of directions for which to prevent swiping out of screen. Valid arguments are `'left'`, `'right'`, `'up'` and `'down'`. +### `slowBackAnimation` + +- optional +- type: `boolean` +- default: `false` + +The card return animation is slow. + ### `swipeRequirementType` - optional From 1443bfb5749c72e31172c8b4b229855e1a9ae888 Mon Sep 17 00:00:00 2001 From: aberratio Date: Wed, 6 Mar 2024 11:17:24 +0100 Subject: [PATCH 2/3] [feat]: add none back animation --- index.d.ts | 6 +++--- index.js | 21 ++++++++++++++++----- index.native.js | 21 ++++++++++++++++----- readme.md | 8 ++++---- 4 files changed, 39 insertions(+), 17 deletions(-) diff --git a/index.d.ts b/index.d.ts index 3a2191b..f077853 100644 --- a/index.d.ts +++ b/index.d.ts @@ -48,11 +48,11 @@ declare interface Props { preventSwipe?: string[] /** - * The card return animation is slow. + * The card return animation type. Valid arguments are `'standard'`, `'slow'`, `'none'`. * - * @default false + * @default 'standard' */ - slowBackAnimation?: boolean; + backAnimationType?: string; /** * What method to evaluate what direction to throw the card on release. 'velocity' will evaluate direction based on the direction of the swiping movement. 'position' will evaluate direction based on the position the card has on the screen like in the app tinder. diff --git a/index.js b/index.js index 82e77a3..08c6328 100644 --- a/index.js +++ b/index.js @@ -22,9 +22,13 @@ const physics = { friction: 10, tension: 200 }, - animateBackSlow: { + animateSlow: { friction: 50, tension: 200 + }, + none: { + friction: 0, + tension: 0 } } @@ -82,7 +86,7 @@ const TinderCard = React.forwardRef( ( { flickOnSwipe = true, - slowBackAnimation = false, + backAnimationType = 'standard', children, onSwipe, onCardLeftScreen, @@ -103,14 +107,21 @@ const TinderCard = React.forwardRef( settings.swipeThreshold = swipeThreshold + const getBackAnimationType = () => { + if (backAnimationType == 'standard') { + return physics.animateBack; + } else if (backAnimationType == 'slow') { + return physics.animateSlow; + } + return physics.none; + } + const animateBack = (setSpringTarget) => { // translate back to the initial position return new Promise((resolve) => { setSpringTarget.start({ xyrot: [0, 0, 0], - config: slowBackAnimation - ? physics.animateBackSlow - : physics.animateBack, + config: getBackAnimationType(), onRest: resolve }) }) diff --git a/index.native.js b/index.native.js index dd8336e..f6a04a5 100644 --- a/index.native.js +++ b/index.native.js @@ -23,9 +23,13 @@ const physics = { friction: 10, tension: 200 }, - animateBackSlow: { + animateSlow: { friction: 50, tension: 200 + }, + none: { + friction: 0, + tension: 0 } } @@ -85,7 +89,7 @@ const TinderCard = React.forwardRef( ( { flickOnSwipe = true, - slowBackAnimation = false, + backAnimationType = 'standard', children, onSwipe, onCardLeftScreen, @@ -106,14 +110,21 @@ const TinderCard = React.forwardRef( })) settings.swipeThreshold = swipeThreshold + const getBackAnimationType = () => { + if (backAnimationType == 'standard') { + return physics.animateBack; + } else if (backAnimationType == 'slow') { + return physics.animateSlow; + } + return physics.none; + } + const animateBack = (setSpringTarget) => { // translate back to the initial position return new Promise((resolve) => { setSpringTarget.start({ xyrot: [0, 0, 0], - config: slowBackAnimation - ? physics.animateBackSlow - : physics.animateBack, + config: getBackAnimationType(), onRest: resolve }) }) diff --git a/readme.md b/readme.md index b0b5266..2c23939 100644 --- a/readme.md +++ b/readme.md @@ -104,13 +104,13 @@ Callback that will be executed when a `TinderCard` has left the screen. It will An array of directions for which to prevent swiping out of screen. Valid arguments are `'left'`, `'right'`, `'up'` and `'down'`. -### `slowBackAnimation` +### `backAnimationType` - optional -- type: `boolean` -- default: `false` +- type: `string` +- default: `standard` -The card return animation is slow. +The card return animation type. Valid arguments are `'standard'`, `'slow'`, `'none'`. ### `swipeRequirementType` From cc3521aad02f40e4f16db7e2c26c46cb476b6dea Mon Sep 17 00:00:00 2001 From: aberratio Date: Wed, 6 Mar 2024 12:36:01 +0100 Subject: [PATCH 3/3] [feat]: getBackAnimationType improvements --- index.js | 4 ++-- index.native.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index 08c6328..6b46d9e 100644 --- a/index.js +++ b/index.js @@ -108,9 +108,9 @@ const TinderCard = React.forwardRef( settings.swipeThreshold = swipeThreshold const getBackAnimationType = () => { - if (backAnimationType == 'standard') { + if (backAnimationType === 'standard') { return physics.animateBack; - } else if (backAnimationType == 'slow') { + } else if (backAnimationType === 'slow') { return physics.animateSlow; } return physics.none; diff --git a/index.native.js b/index.native.js index f6a04a5..d9b9162 100644 --- a/index.native.js +++ b/index.native.js @@ -111,9 +111,9 @@ const TinderCard = React.forwardRef( settings.swipeThreshold = swipeThreshold const getBackAnimationType = () => { - if (backAnimationType == 'standard') { + if (backAnimationType === 'standard') { return physics.animateBack; - } else if (backAnimationType == 'slow') { + } else if (backAnimationType === 'slow') { return physics.animateSlow; } return physics.none;