High Performance Animations

Paul Lewis 和 Paul Irish为你解析哪些动画效果可以达到60FPS的速率,而哪些动画又可能让你的网页看起来很卡顿,遇到这些问题该咋办?各种动画的Library用起来很顺手,你知道背后工作原理么?


这里有几个视觉效果非常棒的过场动画,Demo 在文中有链接,虽然好的应用应该是简洁朴素的,但是如果你能结合自己的业务场景,为用户提供符合预期的过度动画,那么用户的产品体验肯定会上去的~

Better JavaScript animations with requestAnimationFrame

For a long time, timers and intervals have been the state of the art for JavaScript-based animations. While CSS transitions and animations make some animations easy for web developers, little has changed in the world of JavaScript-based animation over the years. That is, until Firefox 4 was released with the first way to improve JavaScript animations. But to fully appreciate the improvement, it helps to take a look at how animations have evolved on the web.



A developer's guide to rendering performance

When we look back over the history of web performance we see a heavy focus on reducing the number of requests and getting files to the browser quickly. Our platform has changed a lot, and while optimizing for network performance remains a crucial part of our jobs, we now have to broaden our performance horizons. Our users also expect smooth scrolling, animations and interactions, even on mobile devices. In short we need to deal with not just how quickly our sites and apps load, but also how quickly they run