It was always interesting to me on how in animation and CGI, the characters are animated so well, that they move in a very "physics"y, real-life-y sort of way. In other words, they don't infinitely accelerate and then stop incredibly abruptly. Instead, they move like humans and animals do, in a very continuous manner. In fact, I always thought that during animation, a lot of kinematics and force body diagrams were used on the characters in order to make sure they accurately simulate what actual animals move like.
el-refai
This acceleration and deceleration is very important for not only modeling actions but also using them in real life. For example, having a robot at does not properly accelerate or decelerate generates very jerky actions at both ends of the movement which is dangerous and unrealistic.
j-nn
By incorporating ease in and ease out, animators can mimic the natural movement patterns observed in the physical world, resulting in animations that feel more fluid, lifelike, and engaging to the viewer. They're widely applied across various animation styles and platforms, from 2D to 3D simulations, contributing to the creation of compelling and also immersive digital experiences.
In case anyone was interested in some math & C-implementations for their own projects, here are a few from stack overflow! Namely bezier, quadratic, and parametrized— I think these are fairly trivial to derive but the link has some interesting context & could be helpful for implementation!
I think ease-in/ease-out could be implemented by using sin or cos curves in relation to time. The rate at which an object travels in its trajectory could be modeled with sin and cos curves, giving it sudden acceleration or deceleration.
OnceLim
Ease-In and Ease-out is an important and cool way of implementing not just CGI but also designing websites. Recently, I was contemplating on what animation to implement for an inline expansion slot using CSS, and I concluded on using ease-in/ease-out. When using only ease-in or only ease-out, it seemed like the animation was "clipped" in mid-animation.
angelajyzhang
I first learned about ease-in and ease-out movement through Figma, similar to how user OnceLim mentions that it's also an important aspect of frontend web development. It's cool to see how that transfers to computer graphics.
It was always interesting to me on how in animation and CGI, the characters are animated so well, that they move in a very "physics"y, real-life-y sort of way. In other words, they don't infinitely accelerate and then stop incredibly abruptly. Instead, they move like humans and animals do, in a very continuous manner. In fact, I always thought that during animation, a lot of kinematics and force body diagrams were used on the characters in order to make sure they accurately simulate what actual animals move like.
This acceleration and deceleration is very important for not only modeling actions but also using them in real life. For example, having a robot at does not properly accelerate or decelerate generates very jerky actions at both ends of the movement which is dangerous and unrealistic.
By incorporating ease in and ease out, animators can mimic the natural movement patterns observed in the physical world, resulting in animations that feel more fluid, lifelike, and engaging to the viewer. They're widely applied across various animation styles and platforms, from 2D to 3D simulations, contributing to the creation of compelling and also immersive digital experiences.
E.x. For my CS180 face morphing project I implement sigmoid interpolation (vs linear)
In case anyone was interested in some math & C-implementations for their own projects, here are a few from stack overflow! Namely bezier, quadratic, and parametrized— I think these are fairly trivial to derive but the link has some interesting context & could be helpful for implementation!
https://stackoverflow.com/questions/13462001/ease-in-and-ease-out-animation-formula
I think ease-in/ease-out could be implemented by using sin or cos curves in relation to time. The rate at which an object travels in its trajectory could be modeled with sin and cos curves, giving it sudden acceleration or deceleration.
Ease-In and Ease-out is an important and cool way of implementing not just CGI but also designing websites. Recently, I was contemplating on what animation to implement for an inline expansion slot using CSS, and I concluded on using ease-in/ease-out. When using only ease-in or only ease-out, it seemed like the animation was "clipped" in mid-animation.
I first learned about ease-in and ease-out movement through Figma, similar to how user OnceLim mentions that it's also an important aspect of frontend web development. It's cool to see how that transfers to computer graphics.