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

科技回声

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

GitHubTwitter

首页

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

资源链接

HackerNews API原版 HackerNewsNext.js

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

Show HN: Create animations by dragging an element with your mouse

379 点作者 panphora超过 3 年前

24 条评论

panphora超过 3 年前
Hi HN,<p>This idea has been a dream of mine for years [0]. As a web developer, I never learned After Effects or any other complex animation software.<p>But I&#x27;ve always dreamed of creating interactive demos and animations just by using my natural mouse movements. It just feels right.<p>So last week I took a few days off from my main project to create Animatize [1], a proof-of-concept showing off the idea of using natural movement to create an animation.<p>I&#x27;d love to know what you think.<p>[0] <a href="http:&#x2F;&#x2F;motioncomicbuilder.storylog.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;motioncomicbuilder.storylog.com&#x2F;</a><p>[1] <a href="https:&#x2F;&#x2F;github.com&#x2F;panphora&#x2F;animatize" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;panphora&#x2F;animatize</a>
评论 #29931993 未加载
评论 #29924739 未加载
评论 #29931141 未加载
评论 #29931273 未加载
评论 #29932024 未加载
mrhektor超过 3 年前
This is such a cool project. Quick suggestion: would be nice to have some way of &quot;smoothening&quot; the animations; I think a simple interface for that would make it a lot more usable in practice. The human hand is a bit shaky :)<p>Anyway, bookmarked!
评论 #29931621 未加载
daenz超过 3 年前
This is what ergonomics looks like. Even small children can convey the movement of actors through space using similar techniques. It&#x27;s an extremely natural way to communicate how something moves. But we have lost that basic idea in favor of very precise animation tools and the complexity that comes with them.
评论 #29929142 未加载
评论 #29930086 未加载
uxamanda超过 3 年前
This is great! As someone who has dealt with After Effects (and Flash) this feels like a great stepping stone tool.<p>Looking at the output code, it seems like you could have an edit mode that displays the Animation History as numbered &quot;dots&quot; on the background to let someone click and move or remove a dot. Then you start to expose things like time between dots, and soon enough you&#x27;ve taught the basics of tweeting. :-)
评论 #29929217 未加载
评论 #29931773 未加载
cercatrova超过 3 年前
Didn&#x27;t you also start doing 31 launches in January? How&#x27;s that been going? I see animatize is one of your projects.<p><a href="https:&#x2F;&#x2F;31launches.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;31launches.com&#x2F;</a>
评论 #29929273 未加载
can16358p超过 3 年前
Remindes me of the video Inventing on Principle by Bret Victor.
评论 #29929237 未加载
Linkd超过 3 年前
Love it, but this needs to be able to output GIFs I can easily copy and share on slack, etc. (Unless I missed out how to do that entirely?)
评论 #29927901 未加载
评论 #29929328 未加载
评论 #29928340 未加载
cuttysnark超过 3 年前
This is great. Do you have plans to expand the controls or animation options? For example, adding pauses, or additional animation types like scale or rotate. Thanks for sharing this project.
评论 #29929286 未加载
sarwech超过 3 年前
This is really cool. As others have said I&#x27;d love to see an option to output a GIF and additional animation options.
评论 #29929311 未加载
micheljansen超过 3 年前
Lovely! This reminds me to Cartooners [1], a related but totally different game&#x2F;toy that I lost many rainy days to as a kid. It was a DOS Application with a library of scenes and actors that you could use to put together short cartoons. When EA was still Electronic Arts...<p>Wondering if modern day equivalents exist. Has this space been swallowed up wholesale by Roblox or are these kinds of games still being made?<p>[1] <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=xmjRKd9E7Cw" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=xmjRKd9E7Cw</a>
toisanji超过 3 年前
Awesome work, this is a semi related project I built, but not really: <a href="https:&#x2F;&#x2F;concepts.jtoy.net&#x2F;" rel="nofollow">https:&#x2F;&#x2F;concepts.jtoy.net&#x2F;</a><p>How can I contact you?
ricardobeat超过 3 年前
Has anyone tried to create a modern version of Flash &#x2F; Director? Feels like those tools had already solved these problems nicely 20 years ago.
roguas超过 3 年前
This is amazing. I would use it. A lot of content creators would use it. Some would pay.<p>Keep going, I guarantee its going somewhere. I was thinking of making desktop app like that for myself. This being html5 makes it even better.
sucrose超过 3 年前
It&#x27;s broken for me, main.js¹ fails to load due to the server response: ERR_TOO_MANY_REDIRECTS<p>¹ <a href="https:&#x2F;&#x2F;animatize.com&#x2F;js&#x2F;main.js?v=131" rel="nofollow">https:&#x2F;&#x2F;animatize.com&#x2F;js&#x2F;main.js?v=131</a>
评论 #29937100 未加载
评论 #29931282 未加载
TuringTest超过 3 年前
Drawing and recording a line path following the movement of the pointer is an extremely simple interaction exercise, and one of the first you learn when programming games or in the demoscene. The sad thing is that, once the base logic is created, the platforms we use make it quite difficult and a lot of effort to transform it into a finished deliverable product.<p>This project is an interesting effect, but it would be great if doing such effort were simply the natural way to use the available tools.
howaboutnope超过 3 年前
&gt; Copy and paste this code into your website where you want this animation to appear<p>Sorry to go on a tangent (I think your project is awesome!), but this is why I love the web. <i>So much.</i>
rjtavares超过 3 年前
I make a lot of animations in python using matplotlib (and moviepy for editing)[1]. It works pretty well for data based stuff but requires a lot of trial and error and tricks to get the feel right.<p>There&#x27;s definitely space for a python based simple motion graphics package.<p>[1] An example: <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=Abo7NZZ8VHs" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=Abo7NZZ8VHs</a>
appliku超过 3 年前
That&#x27;s pretty cool. I always thought animation making should look like this, not million of layers and dots. GJ!
tehwebguy超过 3 年前
Very cool!<p>Does anyone know if something like this exists for video? Like &quot;motion tweening&quot; but with my mouse in real time?
评论 #29931434 未加载
评论 #29933777 未加载
ljm超过 3 年前
This is nice, it reminds me of how OpenShot Video handles animations by default.
pizzabearman超过 3 年前
I love the how quick and easy it gets right to the point
natovan超过 3 年前
Always thought about this too. Also interesting if this is possible as a plugin for Vegas or Premiere
indiantinker超过 3 年前
So cool! Congratulations
sam1234apter超过 3 年前
amazing tool - loving it so far