Book Image

Data Visualization with D3 and AngularJS

By : Erik Hanchett, Christoph Körner
Book Image

Data Visualization with D3 and AngularJS

By: Erik Hanchett, Christoph Körner

Overview of this book

Table of Contents (16 chapters)
Data Visualization with D3 and AngularJS
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Realistic animations with easing


Until now, we animated all attribute changes with the same time step size. However, all physical realistic animations are accelerated or decelerated; therefore, the animation over time is not linear anymore. If we want to create plausible and realistic animations, we have to adapt the linear step size with a nonlinear easing function.

Easing functions describe the change of a value over time, where value is the property that we want to animate. Let's imagine the transition of a ball from position 0 (left-hand side) to position 1 (right-hand side), the ball moves from left to right. If the ball moves with a constant speed from left to right, we call it a linear transition (or linear easing).

We can also visualize this. Let's assume that the whole animation takes 1 second and every 0.2 seconds we take a picture of the ball in the scene. We can see that the position changes linearly with a step size of 0.2 because of the constant speed. We can see this linear...