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

科技回声

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

GitHubTwitter

首页

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

资源链接

HackerNews API原版 HackerNewsNext.js

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

Anime.js – A lightweight JavaScript animation library

604 点作者 doodlesdev将近 2 年前

27 条评论

JulianGarnier将近 2 年前
Hi, I&#x27;m the creator of Anime.js. Firstly, thank you for the submission. I honestly didn&#x27;t anticipate being featured on the homepage of HN without any major update to the library! To those wondering why the project hasn&#x27;t been updated recently, it&#x27;s simply because I&#x27;ve been working on a new version (V4) for the last two years. The core library has been completely rewritten, I&#x27;m currently in the testing and documentation phase and should be ready for release by this summer.<p>Some of the new features of V4 include:<p>* Improved performance: The library has been entirely rewritten with performance optimization and low memory usage in mind.<p>* New ESM Module first API: Import only what you need and benefit from improved tree shaking.<p>* Better timelines: New options for animation positioning, allowing looping animations in timelines and improved parameters inheritance.<p>* Additive animations: A new tween composition mode that lets you smoothly blend concurrently running animations.<p>* Variable framerate: Specify different framerates for each animation or set it globally.<p>* New callbacks: onTick, onLoop, onRender, etc.<p>* Value modifiers: A function to modify or alter the behavior of the numerical values of the animated property value before rendering.<p>* Animate from: Animation from a given value to the current target value.<p>* Improved documentation: A new design with enhanced animations demos and more in-depth explanations.<p>* Unit tests<p>And much more! I can&#x27;t wait to share it with you!
评论 #36448173 未加载
评论 #36528350 未加载
评论 #36524878 未加载
评论 #36447646 未加载
评论 #36449844 未加载
alin23将近 2 年前
One less known use case for this is creating animated UI demos, which as a dev I find harder to do using video editing software.<p>I used it to create the simple demo on the rcmd frontpage: <a href="https:&#x2F;&#x2F;lowtechguys.com&#x2F;rcmd" rel="nofollow noreferrer">https:&#x2F;&#x2F;lowtechguys.com&#x2F;rcmd</a><p>This is the code, where I&#x27;m just animating elements of an SVG I previously created with Sketch: <a href="https:&#x2F;&#x2F;github.com&#x2F;FuzzyIdeas&#x2F;lowtechguys&#x2F;blob&#x2F;main&#x2F;src&#x2F;rcmd&#x2F;index.plim#L211-L379">https:&#x2F;&#x2F;github.com&#x2F;FuzzyIdeas&#x2F;lowtechguys&#x2F;blob&#x2F;main&#x2F;src&#x2F;rcmd...</a><p>I&#x27;m also doing the same thing for the Lunar frontpage: <a href="https:&#x2F;&#x2F;lunar.fyi&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;lunar.fyi&#x2F;</a><p>But because Lunar&#x27;s demo is a lot more resource intensive, I pre-rendered it into a video, and heavily optimized it for each screen size, in H.265, WEBM and H.264.<p>One of the biggest hurdles in Lunar&#x27;s case was how to make the video have transparent regions. With Anime.js you are able to animate individual elements, placed around static text and buttons, which you can&#x27;t do with videos.<p>Alpha support in videos is not so good, so I had to create a full-page video (in both portrait and landscape) with the right background color, and placed it as a background layer with a low z-index.<p>Finding the right video compression parameters to avoid background grain was not easy.
评论 #36450473 未加载
评论 #36444844 未加载
评论 #36445487 未加载
geenat将近 2 年前
Mostly obsolete with CSS tweening.<p>You can do non-blocking animation timelines without any library if you use async javascript.<p><pre><code> &lt;html&gt; &lt;body&gt; &lt;div&gt;Click me to change color every second, then remove. &lt;script&gt; &#x2F;&#x2F; Locality of Behavior me = document.currentScript.parentElement; me.addEventListener(&quot;click&quot;, async event =&gt; { me = event.target me.style.transition = &quot;background 1s&quot; await sleep(1000) me.style.background = &quot;red&quot; await sleep(1000) me.style.background = &quot;green&quot; await sleep(1000) me.style.background = &quot;blue&quot; await sleep(1000) me.style.background = &quot;none&quot; await sleep(1000) me.remove() }) const sleep = ms =&gt; new Promise(r =&gt; setTimeout(r, ms)); &lt;&#x2F;script&gt; &lt;&#x2F;div&gt; &lt;&#x2F;body&gt; &lt;&#x2F;html&gt; </code></pre> If you like this, you may also want to check out: <a href="https:&#x2F;&#x2F;github.com&#x2F;gnat&#x2F;surreal">https:&#x2F;&#x2F;github.com&#x2F;gnat&#x2F;surreal</a>
评论 #36444059 未加载
评论 #36447191 未加载
评论 #36442921 未加载
评论 #36444191 未加载
评论 #36442828 未加载
评论 #36452859 未加载
评论 #36444593 未加载
marban将近 2 年前
Related: <a href="https:&#x2F;&#x2F;www.theatrejs.com" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.theatrejs.com</a> <a href="https:&#x2F;&#x2F;rive.app" rel="nofollow noreferrer">https:&#x2F;&#x2F;rive.app</a> <a href="https:&#x2F;&#x2F;greensock.com" rel="nofollow noreferrer">https:&#x2F;&#x2F;greensock.com</a> <a href="https:&#x2F;&#x2F;motion.dev" rel="nofollow noreferrer">https:&#x2F;&#x2F;motion.dev</a>
评论 #36443728 未加载
评论 #36443955 未加载
评论 #36444891 未加载
评论 #36443511 未加载
评论 #36443017 未加载
评论 #36443027 未加载
impoppy将近 2 年前
&gt;anime.js &gt;look inside &gt;no anime<p><a href="https:&#x2F;&#x2F;i.kym-cdn.com&#x2F;photos&#x2F;images&#x2F;original&#x2F;002&#x2F;515&#x2F;832&#x2F;ee7.jpg" rel="nofollow noreferrer">https:&#x2F;&#x2F;i.kym-cdn.com&#x2F;photos&#x2F;images&#x2F;original&#x2F;002&#x2F;515&#x2F;832&#x2F;ee7...</a>
rapiz将近 2 年前
For simple use cases, I found animate.css[1] very handy.<p>[1] <a href="https:&#x2F;&#x2F;animate.style&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;animate.style&#x2F;</a>
评论 #36445746 未加载
Torn将近 2 年前
Looks like a project with 45k stars, where the latest update was Oct 2020. Why the HN post without a submission comment? Slick site I guess?
评论 #36442427 未加载
评论 #36442443 未加载
评论 #36461148 未加载
bboygravity将近 2 年前
Cool. We&#x27;re finally back at the creativity level of Macromedia Flash websites a few decades ago.
评论 #36444138 未加载
评论 #36444420 未加载
评论 #36443899 未加载
brigadier132将近 2 年前
Very cool, are there any comparisons with other animation libraries like gsap (which is proprietary)?
评论 #36442399 未加载
jabradoodle将近 2 年前
Awesome looking website, though the documentation hijacking my back button was awful.
评论 #36444994 未加载
Lacerda69将近 2 年前
Thanks for making this! I used it before and it is very good. Can recommend it for everyone who needs slick js animations.
sktrdie将近 2 年前
Now that css is getting a linear() function we can get all kinds of spring&#x2F;bounce&#x2F;elastic animations that we couldn&#x27;t before (hence why we resorted to JS). <a href="https:&#x2F;&#x2F;twitter.com&#x2F;JoshWComeau&#x2F;status&#x2F;1660684634340962305" rel="nofollow noreferrer">https:&#x2F;&#x2F;twitter.com&#x2F;JoshWComeau&#x2F;status&#x2F;1660684634340962305</a><p>Once this lands stable in all browser we can say goodbye to JS library animations (rightly so since they block the main thread).
评论 #36444967 未加载
leeoniya将近 2 年前
probably better:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;nextapps-de&#x2F;fat">https:&#x2F;&#x2F;github.com&#x2F;nextapps-de&#x2F;fat</a><p><a href="https:&#x2F;&#x2F;github.com&#x2F;jeremyckahn&#x2F;shifty">https:&#x2F;&#x2F;github.com&#x2F;jeremyckahn&#x2F;shifty</a>
parentheses将近 2 年前
That demo animation is so mesmerizing. Great work!
评论 #36443550 未加载
Dwedit将近 2 年前
My concern is that the CPU usage is very high when you are not actively interacting with the site. So if you leave the tab open, then go do something else, you will be wasting a lot of CPU resources.<p>The only real way around that would be to put in a 5FPS cap after a minute of idle time (no mouse movements or scrolling), and additional culling for things that have scrolled out of view.
评论 #36472133 未加载
satvikpendem将近 2 年前
Anime is nice, however you should likely use Framer Motion these days if using React or Motion One if not (both are by the same creator but for different use cases).
评论 #36443400 未加载
评论 #36453696 未加载
timetraveller26将近 2 年前
No waifu in the front page, very disappointed.
dylan604将近 2 年前
Anime is such a specific use, and this is disappointing for anyone with that use in mind. Naming things is hard I guess????
评论 #36442975 未加载
评论 #36442524 未加载
评论 #36447400 未加载
评论 #36442882 未加载
shaneofalltrad将近 2 年前
Anyone recommend a good animation library to create 3D builds for watches as an example as I need it to be very detailed? I am about to start investigating and this is looking really interesting for the purpose.
评论 #36442979 未加载
评论 #36443519 未加载
评论 #36444268 未加载
评论 #36442744 未加载
toldyouso2022将近 2 年前
I loved these libraries when I used to freelance, clients were so happy to see things move and they are so easy to implement
ChrisArchitect将近 2 年前
(2017)<p>anything new here lately?
评论 #36442633 未加载
TheRealSenex将近 2 年前
arrived expecting quick hentai generation. departed disappointed.
emilsedgh将近 2 年前
Anime.js is pretty fantastic. Lovely API. Well done Julian.
评论 #36447411 未加载
valenterry将近 2 年前
I deduct points for 1.) not showing a noscript message when JS is disabled and 2.) using the name &quot;anime&quot; which is commonly used for, well, Japanese anime.
mmanfrin将近 2 年前
What a great landing page.
评论 #36447416 未加载
naveensky将近 2 年前
amazing landing page, the animations are really slick !!
robofanatic将近 2 年前
Awesome