The latest articles on DEV Community by Saumay Paul (@saumaypaul20). https://dev.to/saumaypaul20 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F444207%2Fbd96fa08-0ada-4134-b22c-b756175c8d3e.jpeg https://dev.to/saumaypaul20 en Saumay Paul Wed, 22 May 2024 19:34:06 +0000 https://dev.to/saumaypaul20/rotatepusle-animation-in-react-native-19n4 https://dev.to/saumaypaul20/rotatepusle-animation-in-react-native-19n4 <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs8m48mo8w9dvehwlpkyk.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs8m48mo8w9dvehwlpkyk.png" alt="Rotate/Pusle Animation in React Native"></a></p> <p>I implemented a continuous rotation and pulsing animation for an image using React Native's <code>Animated</code> API. This small gist demonstrates how to create smooth, looping animations that can enhance the visual appeal of mobile applications.</p> <h3> Project Overview </h3> <p>In this project, an image is animated to rotate continuously and pulse (scale up and down) simultaneously. Here’s a breakdown of how I achieved this:</p> <h3> Code Explanation </h3> <ol> <li> <p><strong>Setting Up the Animated Values:</strong></p> <ul> <li> <code>rotateValue</code>: Controls the rotation of the image.</li> <li> <code>pulseValue</code>: Controls the pulsing effect (scaling) of the image.</li> </ul> </li> <li> <p><strong>Starting the Animations:</strong></p> <ul> <li> <strong>Rotation Animation:</strong> <ul> <li>Wrapped in <code>Animated.loop</code> to ensure it repeats indefinitely.</li> <li>Uses Animated.sequence to create a smooth rotation effect.</li> <li>Animated.timing changes rotateValue from 0 to 1 over 4000 milliseconds and from 1 to 2 over another 4000 milliseconds, creating a full rotation every 8000 milliseconds.</li> <li>The Easing.linear function ensures a consistent rotation speed.</li> </ul> </li> </ul> </li> </ol> <ul> <li> <strong>Pulse Animation:</strong> <ul> <li>Also wrapped in <code>Animated.loop</code> to repeat indefinitely.</li> <li>Uses <code>Animated.sequence</code> with two <code>Animated.timing</code> calls to scale the image up to 1.5x its size and back down to its original size over 2000 milliseconds (1000 ms for scaling up and 1000 ms for scaling down).</li> </ul> </li> </ul> <ol> <li> <strong>Combining Transformations:</strong> <ul> <li>Applied to an <code>Animated.View</code> containing the image.</li> <li>Transformations include <code>translateX</code>, <code>translateY</code> (for spiral effect), <code>rotate</code>, and <code>scale</code>.</li> </ul> </li> </ol> <h3> Code Snippet </h3> <div class="ltag_gist-liquid-tag"> </div> <p>You can view the full code on GitHub Gist: <a href="https://gist.github.com/saumaypaul20/ce77c19b02b83ef2e3c4421f4f506738" rel="noopener noreferrer">LINK</a></p> <p>You can view the demo on Expo Snack: <a href="https://snack.expo.dev/@saumay.paul/intrigued-blue-crackers" rel="noopener noreferrer">LINK</a></p> <h3> Conclusion </h3> <p>This project showcases how powerful and flexible the <code>Animated</code> API in React Native can be for creating engaging user interfaces. Animations like these can significantly improve user experience by adding a layer of interactivity and visual feedback.</p> <p>Feel free to check out the code, and I'd love to hear your thoughts and feedback! 🌟</p> javascript reactnative animation mobile