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

科技回声

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

GitHubTwitter

首页

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

资源链接

HackerNews API原版 HackerNewsNext.js

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

React-Move – Animate anything in React

255 点作者 tannerlinsley大约 8 年前

16 条评论

mlsarecmg大约 8 年前
I really wonder why Facebooks own react-native-animated, which also works for regular React isn&#x27;t more popular. It&#x27;s easily the most simple, efficient and powerful. It does not re-render components, you can pass &quot;native&quot; animated values instead of wrapping stuff into functions. It has support for friction springs, time-based easings, interpolations, gestures and so on.<p>Examples:<p><a href="https:&#x2F;&#x2F;www.webpackbin.com&#x2F;bins&#x2F;-KfKys3S2mgEH9UsE8GL" rel="nofollow">https:&#x2F;&#x2F;www.webpackbin.com&#x2F;bins&#x2F;-KfKys3S2mgEH9UsE8GL</a><p><a href="http:&#x2F;&#x2F;react-springy-parallax.surge.sh&#x2F;" rel="nofollow">http:&#x2F;&#x2F;react-springy-parallax.surge.sh&#x2F;</a><p>API examples:<p><a href="http:&#x2F;&#x2F;animatedjs.github.io&#x2F;interactive-docs&#x2F;" rel="nofollow">http:&#x2F;&#x2F;animatedjs.github.io&#x2F;interactive-docs&#x2F;</a>
评论 #14148637 未加载
评论 #14146837 未加载
nathan_f77大约 8 年前
<p><pre><code> [&#x27;red&#x27;, &#x27;blue&#x27;, &#x27;yellow&#x27;].find((d, i) =&gt; i === Math.round(Math.random() * 2)) </code></pre> That&#x27;s not a safe way to pick a random color from an array.<p>`Math.round(Math.random() * 2)` might produce the following sequence: 2, 2, 0. The find callback is called with 0, 1, 2, so it returns nothing.<p>Maybe they were going for:<p><pre><code> [&#x27;red&#x27;, &#x27;blue&#x27;, &#x27;yellow&#x27;][Math.round(Math.random() * 2)] </code></pre> If they intended for `undefined` or `null` to be a valid result, then it would be better to write:<p><pre><code> [&#x27;red&#x27;, &#x27;blue&#x27;, &#x27;yellow&#x27;, null][Math.round(Math.random() * 3)] </code></pre> Haha, I submitted a PR: <a href="https:&#x2F;&#x2F;github.com&#x2F;tannerlinsley&#x2F;react-move&#x2F;pull&#x2F;1" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;tannerlinsley&#x2F;react-move&#x2F;pull&#x2F;1</a>
评论 #14146018 未加载
评论 #14145978 未加载
drcode大约 8 年前
This looks great, but I still prefer the model of react-motion for most use cases. The main difference between the two is that react-move uses preset durations, whereas react-motion uses a physics model where the durations are dynamic at runtime, directly following from the physics calculations.<p>react-motion: <a href="https:&#x2F;&#x2F;github.com&#x2F;chenglou&#x2F;react-motion" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;chenglou&#x2F;react-motion</a>
评论 #14145288 未加载
dechov大约 8 年前
Cool— quite similar to one we developed: <a href="https:&#x2F;&#x2F;github.com&#x2F;two-n&#x2F;join-transition" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;two-n&#x2F;join-transition</a><p>This sort of declarative transition comes in handy for us all the time. Two features I don&#x27;t see yet in React-Move that we find useful is a prop for more precise control over the staggering (orderBy), and custom interpolation (interpolate).
评论 #14145249 未加载
评论 #14148849 未加载
untog大约 8 年前
How does performance compare to CSS transitions? Every animation framework I&#x27;ve tried has been a failure by comparison, even though CSS transitions are a nightmare to work with a lot of the time.<p>(an aside, but boasting about a 12KB minified size for an animation library baffles me. That&#x27;s huge!)
评论 #14145238 未加载
评论 #14145227 未加载
danappelxx大约 8 年前
I wonder if it would be possible to get &quot;dynamic&quot; (state-dependent) animations such as these but by generating keyframed CSS animations and injecting them into the styles. I&#x27;m no guru but I think this would give you the absolute best of both worlds?
评论 #14146247 未加载
评论 #14145456 未加载
iamleppert大约 8 年前
This library is a thin wrapper around d3-interpolate, and looking at the source doesn&#x27;t appear to provide much (any?) value.<p>Use the d3 stuff directly, or a good tweening library that is well-suited and hardware accelerated for your platform.
评论 #14158013 未加载
评论 #14157803 未加载
chrisco255大约 8 年前
Will this work for React Native?
评论 #14146681 未加载
评论 #14146508 未加载
评论 #14148709 未加载
评论 #14145452 未加载
DenisM大约 8 年前
Demos are unwatchable on iPhone.
评论 #14144935 未加载
nperez大约 8 年前
This benefits highly from spread attributes imo <a href="https:&#x2F;&#x2F;pastebin.com&#x2F;nSFHh0NK" rel="nofollow">https:&#x2F;&#x2F;pastebin.com&#x2F;nSFHh0NK</a>
bhurlow大约 8 年前
imagining what a non-deterministic animation library would be like :) ...
评论 #14145215 未加载
longlho大约 8 年前
cool library, but the frame rate drop is pretty bad.
评论 #14145206 未加载
bostonvaulter2大约 8 年前
Does the 12KB include all the dependencies?
评论 #14145203 未加载
spiderfarmer大约 8 年前
This demo site &#x2F; storybook is 4.3 Mb. Not a great demo then.
gibbitz大约 8 年前
Eww... animation details in my state? Why?
评论 #14145072 未加载
评论 #14144795 未加载
notliketherest大约 8 年前
How to install? &quot;yarn install ....&quot;<p>God dammit.
评论 #14145577 未加载