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

科技回声

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

GitHubTwitter

首页

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

资源链接

HackerNews API原版 HackerNewsNext.js

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

Show HN: Velocity.js – Accelerated JavaScript animation

160 点作者 purpleturtle大约 11 年前

20 条评论

jnbiche大约 11 年前
It depresses me to no end that even with impressive engineering advances like this, any modestly graphical intensive app on the browser redlines my dual-core Intel laptop.<p>Similar graphics effects in QT or other native technologies not only do not redline my laptop, <i>they don&#x27;t even raise the core temperature a single degree</i>.<p>I get enthusiastic about cool JS technologies just like most devs, but I feel like we&#x27;re moving backwards.
评论 #7664680 未加载
评论 #7664307 未加载
评论 #7666316 未加载
TeeWEE大约 11 年前
Dont forget that CSS based animation is a declarative based animation framework while Velocity.js is using imperative code to animate (while the calls look declarative, the code in the framework has to be bundled with your js).<p>The advantage of the declarative approach, is that browser can improve the CSS animations in every browser update. Also, in theory, browsers could improve CSS animation in such a way that is is always faster than velocity.js.<p>You could for example make a CSS-animation to velocity.js compiler. Browser do this compilation (not to velicity.js but to native code&#x2F;operations) already. Thats why it surprises me that velocity.js is saying its faster than pure CSS animations.<p>Can somebody enlighten me on why this is the case?
评论 #7667963 未加载
nkozyra大约 11 年前
Wonderful.<p>This is one of those things that dogs me as a developer - accepting things <i>as they are</i>. It&#x27;s something we should all look out for.<p>If you&#x27;ve ever just tacitly, passively accepted something as potable if not ideal, you need to develop an internal &quot;Complacency Alert&quot; alarm. I know I do. For too long I&#x27;ve accepted that you either have to reinvent the wheel with javascript animations or accept what jQuery has to offer.<p>Hats off here.
评论 #7664651 未加载
isaacdl大约 11 年前
I&#x27;m really impressed by the level of documentation in the code[0]. Makes it fun to read.<p>[0]<a href="https://github.com/julianshapiro/velocity/blob/master/jquery.velocity.js" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;julianshapiro&#x2F;velocity&#x2F;blob&#x2F;master&#x2F;jquery...</a>
评论 #7664586 未加载
slajax大约 11 年前
We had Julian come by and demo this to our team a few weeks back. Totally awesome work he&#x27;s doing here. Great job Julian.
tambourine_man大约 11 年前
This blew me away. Never thought JS animations could be faster than CSS.<p>I&#x27;ll use it in my next project.
nevir大约 11 年前
Shouldn&#x27;t your comparison widget also have a pure CSS option?<p>Maybe I&#x27;m missing something, but I&#x27;m not seeing anything to back up the claims that this is more performant than pure CSS animations?
评论 #7664126 未加载
dcsan大约 11 年前
how does performance compare with famo.us? they&#x27;re also css haters, to quote<p>&gt; “We saw Javascript could do a raw game rendering engine, but we found a way to render an app and pass that render to the GPU, skipping all the things that we were waiting on the browser companies to fix. We found a way to bypass it by having a direct mathematical conversation with the GPU.”<p>IMHO famo.us seems more oriented toward taking over the whole app and providing a view-level API, where velocity is more for animating page DOM elements? For some basic things like delay: the velocity API [1] seems a lot simpler than the equiv [2] with famo.us, whereas famous has things like a &quot;Grid&quot; or ScrollView out of the box.<p>[1] <a href="http://julian.com/research/velocity/#delay" rel="nofollow">http:&#x2F;&#x2F;julian.com&#x2F;research&#x2F;velocity&#x2F;#delay</a> [2] <a href="http://stackoverflow.com/questions/23330771/how-to-add-a-delay-to-a-famous-transition" rel="nofollow">http:&#x2F;&#x2F;stackoverflow.com&#x2F;questions&#x2F;23330771&#x2F;how-to-add-a-del...</a>
评论 #7664853 未加载
评论 #7666124 未加载
voltagex_大约 11 年前
Congratulations:<p><pre><code> Content Blocked (content_filter_denied) Content Category: &quot;Suspicious&quot; </code></pre> Any idea why? (I&#x27;m fairly sure my organisation doesn&#x27;t curate the blocklist, only purchases it)
评论 #7664743 未加载
flockonus大约 11 年前
I wonder if other people also see the jitters in this demo when the box is returning to left? <a href="http://cdpn.io/pLAxF" rel="nofollow">http:&#x2F;&#x2F;cdpn.io&#x2F;pLAxF</a> (click the red box)
daemonk大约 11 年前
JQuery should just implement velocty.js&#x27; animation functions?
评论 #7663948 未加载
kylebrown大约 11 年前
Can I just get a link to the demo please? There&#x27;s no reason I should have to watch a youtube video in order to see a javascript demo.
评论 #7667011 未加载
ArtDev大约 11 年前
I am definitely going to use it on my next project that needs any animation at all. Nice work.
leo_mck大约 11 年前
Should the 3D demo work on IE11? It started fine but then broke, on desktop and wp8.1.
macca321大约 11 年前
Any reason you can&#x27;t just overwrite .animate and have existing code use it?
评论 #7667970 未加载
leeoniya大约 11 年前
any thoughts on how it compares to the CSS transitions polyfill [1], speedwise?<p>[1] <a href="https://github.com/rstacruz/jquery.transit" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;rstacruz&#x2F;jquery.transit</a>
评论 #7663939 未加载
oe大约 11 年前
The playground seems broken (stuck on &quot;Let&#x27;s play...&quot;)
评论 #7665620 未加载
lightblade大约 11 年前
Thanks for proving what I long suspected.
itistoday2大约 11 年前
Nice, how does this compare with Greensock&#x27;s performance? Is it better, or about the same?
评论 #7664610 未加载
goldenkey大约 11 年前
<p><pre><code> &quot;Because transitions aren&#x27;t natively controlled by JavaScript (they are merely triggered by JavaScript), the browser does not know how to optimize transitions in sync with the JavaScript code that manipulates them.&quot; </code></pre> The above voodoo talk is quite a disservice. It&#x27;s immediately obvious that the dev does not know how v8 and the dom&#x2F;CSS&#x2F;rendering engine are tied together. The fact that the CSS transition is triggered by JS has no bearing on speed or optimization.<p>Secondly, most importantly, JS based fps-style animations eat CPU, and battery power of portable devices. On the other hand, CSS transitions are only getting better. Most CSS transitions are GPU optimized and light on CPU usage. A web page should not be strangling the v8 engine for graphical animation that could instead be GPU-bound. This library is clever but a step in the wrong direction. The dev could have contributed to WebKit CSS key frame animation acceleration instead.<p>Thirdly, JS animations cannot handle the sheer amount of particles that CSS transitions can. For instance, take Ana Tudors box-shadow particle hack, and look at how performing it is through GPU acceleration.<p><a href="http://codepen.io/thebabydino/pen/shtGe" rel="nofollow">http:&#x2F;&#x2F;codepen.io&#x2F;thebabydino&#x2F;pen&#x2F;shtGe</a>
评论 #7664034 未加载
评论 #7664311 未加载
评论 #7664039 未加载