How to rotate a canvas object following mouse move event with easing?

Question

I am not sure if I have used the right word here. I guess easing means it does not follow the mouse immediately but with some delay?

At the moment the iris is rotati

Answer 1

As far as I know, with h5 canvas, you may need to write the ease functions yourself. However, css3 animations have several built-in ease functions, you can write .foo {transition: bottom 1s ease} and when .foo elements' bottom style property changes, they'll move in the velocities defined by the ease function. See: https://developer.mozilla.org/en-US/docs/Web/CSS/transition https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions .

Also, check out these amazing animated BB-8 s(built with css animations): http://codepen.io/mdixondesigns/pen/PPEJwz http://codepen.io/Chyngyz/pen/YWwYGq http://codepen.io/bullerb/pen/gMpxNZ