react-native-kenburns-view 5.1.1 → 5.2.0

package/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) Nimila Hiranya Samarasinghe
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -20,7 +20,9 @@
 
 **Lightweight:** No native code or custom native modules. It uses only React Native’s built-in `Animated` API and core components, so it works with standard RN and Expo and adds minimal bundle size. Each instance uses randomized timing and pan direction so multiple images don’t move in lockstep.
 
-Version: 5.1.1
+For the **React (web)** version of this effect, see [react-kenburns-view](https://github.com/nHiRanZ/react-kenburns-view).
+
+Version: 5.2.0
 
 ## Supported React Native versions
 

package/lib/KenBurnsView.js

@@ -13,6 +13,7 @@ import React, {
   useEffect,
   useImperativeHandle,
   useRef,
+  useState,
 } from 'react';
 import PropTypes from 'prop-types';
 import {
@@ -26,6 +27,17 @@ import {
 const DEFAULT_DURATION = 20000;
 const FILL_SCALE = 1.15;
 
+function getRandomCycle(zoomStart, zoomEnd, panXAmount, panYAmount) {
+  return {
+    scaleFrom: zoomStart + Math.random() * (zoomEnd - zoomStart),
+    scaleTo: zoomStart + Math.random() * (zoomEnd - zoomStart),
+    txFrom: -panXAmount + Math.random() * 2 * panXAmount,
+    txTo: -panXAmount + Math.random() * 2 * panXAmount,
+    tyFrom: -panYAmount + Math.random() * 2 * panYAmount,
+    tyTo: -panYAmount + Math.random() * 2 * panYAmount,
+  };
+}
+
 const KenBurnsView = forwardRef((props, ref) => {
   const {
     imageWidth,
@@ -43,14 +55,24 @@ const KenBurnsView = forwardRef((props, ref) => {
     ...rest
   } = props;
 
+  const w = imageWidth || 0;
+  const h = imageHeight || 0;
+  const panXAmount = w * panX;
+  const panYAmount = h * panY;
+
   const progress = useRef(new Animated.Value(0)).current;
   const animationRef = useRef(null);
+  const configRef = useRef({ zoomStart, zoomEnd, panXAmount, panYAmount });
+  configRef.current = { zoomStart, zoomEnd, panXAmount, panYAmount };
+
+  const [cycle, setCycle] = useState(() =>
+    getRandomCycle(zoomStart, zoomEnd, panXAmount, panYAmount),
+  );
+  const cycleRef = useRef(cycle);
+  cycleRef.current = cycle;
 
   const randomRef = useRef({
-    phase: Math.random(),
     durationFactor: 0.7 + Math.random() * 0.6,
-    panXSign: Math.random() > 0.5 ? 1 : -1,
-    panYSign: Math.random() > 0.5 ? 1 : -1,
   }).current;
 
   const stop = useCallback(() => {
@@ -60,32 +82,37 @@ const KenBurnsView = forwardRef((props, ref) => {
     }
   }, []);
 
-  const start = useCallback(() => {
-    stop();
-    progress.setValue(randomRef.phase);
-
+  const runNextCycle = useCallback(() => {
+    const { zoomStart: zs, zoomEnd: ze, panXAmount: pxa, panYAmount: pya } =
+      configRef.current;
+    const prev = cycleRef.current;
+    const nextTo = getRandomCycle(zs, ze, pxa, pya);
+    setCycle({
+      scaleFrom: prev.scaleTo,
+      scaleTo: nextTo.scaleTo,
+      txFrom: prev.txTo,
+      txTo: nextTo.txTo,
+      tyFrom: prev.tyTo,
+      tyTo: nextTo.tyTo,
+    });
+    progress.setValue(0);
     const d = Math.round(duration * randomRef.durationFactor);
+    animationRef.current = Animated.timing(progress, {
+      toValue: 1,
+      duration: d,
+      easing: Easing.inOut(Easing.quad),
+      useNativeDriver: true,
+    });
+    animationRef.current.start(({ finished }) => {
+      if (finished) runNextCycle();
+    });
+  }, [duration, progress, randomRef.durationFactor]);
 
-    animationRef.current = Animated.loop(
-      Animated.sequence([
-        Animated.timing(progress, {
-          toValue: 1,
-          duration: d,
-          easing: Easing.inOut(Easing.quad),
-          useNativeDriver: true,
-        }),
-        Animated.timing(progress, {
-          toValue: 0,
-          duration: d,
-          easing: Easing.inOut(Easing.quad),
-          useNativeDriver: true,
-        }),
-      ]),
-      {resetBeforeIteration: false},
-    );
-
-    animationRef.current.start();
-  }, [duration, progress, stop, randomRef]);
+  const start = useCallback(() => {
+    stop();
+    progress.setValue(0);
+    runNextCycle();
+  }, [progress, runNextCycle, stop]);
 
   useImperativeHandle(
     ref,
@@ -110,24 +137,19 @@ const KenBurnsView = forwardRef((props, ref) => {
     };
   }, [autoStart, start, stop]);
 
-  const w = imageWidth || 0;
-  const h = imageHeight || 0;
-  const panXAmount = w * panX * randomRef.panXSign;
-  const panYAmount = h * panY * randomRef.panYSign;
-
   const translateX = progress.interpolate({
     inputRange: [0, 1],
-    outputRange: [-panXAmount, panXAmount],
+    outputRange: [cycle.txFrom, cycle.txTo],
   });
 
   const translateY = progress.interpolate({
     inputRange: [0, 1],
-    outputRange: [-panYAmount, panYAmount],
+    outputRange: [cycle.tyFrom, cycle.tyTo],
   });
 
   const scale = progress.interpolate({
     inputRange: [0, 1],
-    outputRange: [zoomStart, zoomEnd],
+    outputRange: [cycle.scaleFrom, cycle.scaleTo],
   });
 
   const innerSize = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-kenburns-view",
-  "version": "5.1.1",
+  "version": "5.2.0",
   "description": "KenBurns Image Effect for React Native",
   "main": "index.js",
   "scripts": {