Create a Bouncing Ball Animation | Part 2 | SVGator

Welcome to our channel. These tutorials are for SVGator - the most advanced SVG animation creator: https://www.svgator.com

Your teacher today: Matt Gordon of https://www.g5designs.art/

In this tutorial, you will learn how to create a convincing bounce animation in SVGator. This technique can be extended to other illustrations, allowing you to replicate the process.

00:00 Expanding the Animation Timeline
01:06 Creating the Motion Path
02:22 Refining the Path for Natural Arcs
04:32 Attaching the Ball to the Motion Path
06:42 Adding Squash and Stretch for Realism
08:02 Adding Rotation for Extra Realism
15:32 Applying Easing for Natural Motion
22:35 Polishing and Refining

Here's a detailed guide on how to create a convincing bounce animation, emphasizing the most critical steps.

Expanding the Animation Timeline
Extend the animation timeline to 4 seconds for enough space for the ball to fall, bounce, and roll out smoothly.

Creating the Motion Path
Position the ball outside the frame and use the Pen Tool to create a path, marking key points where the ball lands, with bounces becoming progressively smaller.

Refining the Path for Natural Arcs
Refine the motion path using the Node Tool, adjusting the handles for smooth arcs, with each bounce getting smaller and closer together to reflect diminishing energy.

Attaching the Ball to the Motion Path
Attach the ball to the path using the "Set Motion Path" function and adjust keyframe spacing for natural bounce timing, with faster downward motion and slower peaks.

Adding Squash and Stretch for Realism
Add squash and stretch effects by stretching the ball on descent, squashing it on impact, and stretching it again as it rebounds, with subtle changes for each bounce.

Adding Rotation for Extra Realism
Rotate the ball slightly with each bounce, reducing rotation as it slows down and increasing it when the ball rolls to match its horizontal movement.

Applying Easing for Natural Motion
Apply Ease-In Cubic for falling, Ease-Out Cubic for rising, and smooth Ease-In for squash/stretch, then fine-tune the easing graph for smooth and realistic motion.

Polishing and Refining
Play back the animation, adjusting keyframe spacing, easing curves, and timing to refine the bounce, and add details like rotation for added realism.

Subscribe: https://www.youtube.com/channel/UC0MXZwZer6zQ6VR1NuA4cKQ?sub_confirmation=1

Let's connect:
Facebook: https://www.facebook.com/svgator
Instagram: https://www.instagram.com/svgatorapp/
Twitter: https://twitter.com/SVGatorApp
LinkedIn: https://www.linkedin.com/company/svgator

SVGator is an online SVG (Scalable Vector Graphics) animation creator.

Скачать видео