Transforms and translations are what power animations are in software, and fundamentally all that motion is about velocity, acceleration and interpolation.In this week's podcast, Barry Bird talks to Courtney Hemphill, a partner and tech lead at Carbon Five. With over ten years of experience in software development, Hemphill has done full stack development for both startup and enterprise companies. Hemphill's presentation at QCon New York was entitled Algorithms for Animation.
Key Takeaways
- We are moving closer to natural user interfaces, and this is something software engineers across the board need to consider when they are developing programs.
- More and more you are seeing the cutting edge companies using animation to help people see where things lie within an interface, and be able to map out where the things they might need are.
- Transforms and translations are what power animations are in software, and fundamentally all that motion is about velocity, acceleration and interpolation.
- If you are trying to get someone to engage with your program or platform, you want enough animation to keep them engaged, but not so much that it confuses them.
- Testing is essential: If you don't know what's wrong, you don't know how to fix it.
Subscribe on:
Notes
Why Developers Should Care About Creating Animations
- 1m:05s - The interfaces we interact with in software are becoming more dynamic.
- 1m:30s - We are moving closer to natural user interfaces, and this is something software engineers across the board need to consider when they are developing programs. You don't just have a pointer and a mouse and a keyboard- you can squish and stretch things, using your fingers and your hands.
- 1m:55s - Animations need to feel real, and that is all based in Math and Physics.
- 2m:15s - The animations you see on websites have always been an opportunity for us to have a more fundamental learning about what the program does without needing a lot of instruction.
- 2m:38s - Animation functions almost as a way for people to discover and explore an interface so they can interact and engage with it more easily.
The Importance of Animation Resembling Reality
- 3m:00s - If you've ever put on an Oculus Rift and experienced "judder" and felt immediately sick, that's the most extreme version.
- 3m:31s - If a computer is running slowly and you see frames dropped, you are sensing something underlying that is not right, and you immediately distrust it.
- 3m:42s - The further away you get from something that is smooth, the more you start to mistrust the platform and the data behind it.
Natural Textures vs Cartoon-Like Textures
- 4m:28s - We are still working with a digital device, so it's difficult to represent something that has a tactile element to it, whereas with animation we're ok with a 2D screen representing real-world movement.
- 5m:10s - More and more you are seeing the cutting edge companies using animation to help people see where things lie within an interface, and be able to map out where the things they might need are.
- 6m:25s - Fundamentally, humans felt that the things they were using were a digital device and should be representative of a 2D digital world.
- 6m:50s - What you now see has been elevated more, and is this notion of animation and motion within an interface.
Effective Navigation with Animation
- 7m:35s - Snapchat is one of the most popular programs, and if you try to find any sort of navigational rule you will fail miserably. It just works, and more than anything it's playful.
- 8m:10s - Every action that you take with Snapchat has a representative motion-animation response from the program that gives a little bit more information.
- 8m:24s - There are some rules that people say are best practices, but some people have thrown those completely out and been very successful in doing so.
Math in Creating Animations
- 8m:53s - Transforms and translations are what power animations are in software, and fundamentally all that motion is about velocity, acceleration and interpolation. What you layer on top of the interpolation function is where things get really interesting.
- 9m:26s - It gets very complex very quickly but for people to understand just the basis of all of it it is just around acceleration, velocity and the percent change.
- 10m:04s - We don't live in a linear world, we live in a world that's got torque and yaw and friction, and all sorts of weird physics that act upon motion. You can't just have linear motion; you've got to bring in the effects of gravity and bring Newtonian physics into animation.
Becoming Proficient in Animation
- 13m:13s - When you start learning about animations, you start to see that everything has a framework, everything has magic. If you think about Ruby on Rails, Rails adds a lot of magic to what is underneath it. Physics engines do effectively the same thing.
- 13m:47s - If you start by understanding the core components, and then you layer the nuances on top of it, you start to get into the Unity and Unreal engines and you can have more power to manipulate and understand how to have greater effect within those physics engines and frameworks, because you have that core understanding.
- 14m:28s - You can get far by just playing; the frameworks take care of a lot of the math, but you will benefit greatly if you have the foundational knowledge of what it's all built upon.
Common Mistakes Illustrating Complicated Ideas with Animation
- 17m:15s - Doing too much at once- humans find it very difficult to keep track of more than four moving things of note in an interface.
- 17m:35s - If you are trying to get someone to engage with your program or platform, you want enough animation to keep them engaged, but not so much that it confuses them.
- 18m:22s - You can put something into an interface, you can design it, you can build it; but you have to put it in front of an end user. You can have measured it and seen the performance be perfect across all the machines, you've done user testing- but you need to have the person the program is intended for play around. They are the only ones who can tell you "This is too much, I am confused."
- 20m:15s - It's very tricky to represent data within an animated framework. You can show things moving in a way, but it might confuse people more than their ability to sit down to a static graph, and have the opportunity to digest it themselves.
Best Practices
- 25m:28s - Test often. Make sure your frames per second are keeping with the 60 frames-per-second or faster realm to prevent jank.
- 25m:41s - If we're talking about browser-based animations, you'll want to consider the opportunity to push things to the GPU and off the CPU.
- 26m:21s - Make sure you analyse your heap, garabge collection, frames/seccond and so on.
- 28m:12s - You have to weigh how much animation you want and how performant you want it to look against who your end users are.
Companies mentioned
Products mentioned
