TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Principles for smooth web animations

198 点作者 julianshapiro超过 8 年前

11 条评论

chrismorgan超过 8 年前
The most important principle for current technologies is #1, “Don’t change any properties besides opacity or transform!”<p>Hopefully everyone will start copying the approach Servo uses in its WebRender engine which is basically treating the browser rendering as though it were a game, using the GPU for rendering <i>everything</i>; therefore guidelines like this become obsolete.<p>This applies to a slightly lesser extent with #2, “Hide content in plain sight.” #3 is also obsolete in Servo, as is #7, mostly.
评论 #12888463 未加载
评论 #12888479 未加载
评论 #12889387 未加载
amelius超过 8 年前
It is rather disappointing that with the current state of technology we need to go through such hoops to get smooth animations.<p>Also, there is completely no handle on keeping the animations smooth as webpages become more complicated and do (perhaps unrelated) updates while animations are running.
Kenji超过 8 年前
#11: Your user&#x27;s browser has the final say in all matters of timing. Whatever you do, ultimately, if the browser decides that something has to be computed on your main JS thread while you are trying to hit frames and timings, you&#x27;re screwed. Source: Making multiple HTML5 games with the intention of having them render at 60 fps and not missing a single frame.
评论 #12887921 未加载
oneeyedpigeon超过 8 年前
OK, so <i>now</i> I know why tweening&#x27;s called that, and I feel like the biggest idiot in the world :-&#x2F;
评论 #12887962 未加载
dyeje超过 8 年前
Google&#x27;s Material motion guidelines are also great material for people looking to use web animations.<p><a href="https:&#x2F;&#x2F;material.google.com&#x2F;motion&#x2F;material-motion.html#material-motion-what-makes-a-good-transition" rel="nofollow">https:&#x2F;&#x2F;material.google.com&#x2F;motion&#x2F;material-motion.html#mate...</a>
评论 #12888291 未加载
TeeWEE超过 8 年前
Wow i just went and logged in to <a href="https:&#x2F;&#x2F;gyrosco.pe&#x2F;.." rel="nofollow">https:&#x2F;&#x2F;gyrosco.pe&#x2F;..</a>. Too many animations. Its making me wait for content to show up, lots of animations everywhere causing a lot of congnitive load. And an options to delete your account is not there.<p>I think animations are very much over used on that site. The article is fine. But dont do too much animations! Keep congnitive load small!
ec109685超过 8 年前
The article was awesome. I am not sure, however, the heavy animation helps gyroscope.pe&#x27;s user experience, though.
pier25超过 8 年前
Off topic... but what are you using for JS animations these days?<p>I&#x27;ve been using GSAP for almost a decade since the Flash days.
aorth超过 8 年前
Speaking of smooth animations, the blog post is hosted on Medium, and I&#x27;ve always admired Medium&#x27;s image zoom thing because it&#x27;s so smooth!
idlewords超过 8 年前
The smoothest animation is the one you don&#x27;t do.<p>In the best case, web animations just cause bloat and burn through your battery. In the (common) worst case, they stutter or break or cause things to on the page to hang while they load.<p>Just don&#x27;t do it. Your website doesn&#x27;t need to look like a mobile app.
评论 #12889420 未加载
simooooo超过 8 年前
Very very nice article