Fix duration of fading transition (#6174)

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary
Now the fading transition executes for `2*duration` miliseconds.
We should divide the duration by 2 to fix it, the same way it done for
the following transitions:


https://github.com/software-mansion/react-native-reanimated/blob/82d1d9582d96b463ab95d6ba9b8c1c20e7aa867b/packages/react-native-reanimated/src/layoutReanimation/defaultTransitions/JumpingTransition.ts#L33


https://github.com/software-mansion/react-native-reanimated/blob/82d1d9582d96b463ab95d6ba9b8c1c20e7aa867b/packages/react-native-reanimated/src/layoutReanimation/defaultTransitions/SequencedTransition.ts#L44

<!-- Explain the motivation for this PR. Include "Fixes #<number>" if
applicable. -->


Also I rename the variables that hold half of the duration and are named
"duration" into "halfDuration", as it was suggested during the review
## Test plan

Tests are in this PR:
#6168
<!-- Provide a minimal but complete code snippet that can be used to
test out this change along with instructions how to run it and a
description of the expected behavior. -->

packages/react-native-reanimated/src/layoutReanimation/defaultTransitions/FadingTransition.ts

@@ -29,7 +29,7 @@ export class FadingTransition
     const delayFunction = this.getDelayFunction();
     const callback = this.callbackV;
     const delay = this.getDelay();
-    const duration = (this.durationV ?? 500) / 2;
+    const halfDuration = (this.durationV ?? 500) / 2;
 
     return (values) => {
       'worklet';
@@ -45,24 +45,24 @@ export class FadingTransition
           opacity: delayFunction(
             delay,
             withSequence(
-              withTiming(0, { duration }),
-              withTiming(1, { duration })
+              withTiming(0, { duration: halfDuration }),
+              withTiming(1, { duration: halfDuration })
             )
           ),
           originX: withDelay(
-            delay + duration,
+            delay + halfDuration,
             withTiming(values.targetOriginX, { duration: 0 })
           ),
           originY: withDelay(
-            delay + duration,
+            delay + halfDuration,
             withTiming(values.targetOriginY, { duration: 0 })
           ),
           width: withDelay(
-            delay + duration,
+            delay + halfDuration,
             withTiming(values.targetWidth, { duration: 0 })
           ),
           height: withDelay(
-            delay + duration,
+            delay + halfDuration,
             withTiming(values.targetHeight, { duration: 0 })
           ),
         },

packages/react-native-reanimated/src/layoutReanimation/defaultTransitions/JumpingTransition.ts

@@ -30,8 +30,9 @@ export class JumpingTransition
     const delayFunction = this.getDelayFunction();
     const callback = this.callbackV;
     const delay = this.getDelay();
-    const duration = (this.durationV ?? 300) / 2;
-    const config = { duration: duration * 2 };
+    const duration = this.durationV ?? 300;
+    const halfDuration = duration / 2;
+    const config = { duration };
 
     return (values) => {
       'worklet';
@@ -57,13 +58,13 @@ export class JumpingTransition
               withTiming(
                 Math.min(values.targetOriginY, values.currentOriginY) - d,
                 {
-                  duration,
+                  duration: halfDuration,
                   easing: Easing.out(Easing.exp),
                 }
               ),
               withTiming(values.targetOriginY, {
                 ...config,
-                duration,
+                duration: halfDuration,
                 easing: Easing.bounce,
               })
             )

packages/react-native-reanimated/src/layoutReanimation/defaultTransitions/SequencedTransition.ts

@@ -41,8 +41,8 @@ export class SequencedTransition
     const delayFunction = this.getDelayFunction();
     const callback = this.callbackV;
     const delay = this.getDelay();
-    const sequenceDuration = (this.durationV ?? 500) / 2;
-    const config = { duration: sequenceDuration };
+    const halfDuration = (this.durationV ?? 500) / 2;
+    const config = { duration: halfDuration };
     const reverse = this.reversed;
 
     return (values) => {