react中你們都是通過什麼方式實現動畫的？

01-06

react中你們都是通過什麼方式實現動畫的

可參考 React 實現的整體動效方案：http://motion.ant.design/

謝邀，

首先 DOM 動畫的基本方案無非兩種

1. css3 動畫

2. Js 改 css

所有的前端動畫都是圍繞著兩個來，React 也不例外，不過都是在這兩者中平衡，下面是我能知道的一些方案：

最基本的，React 的官方文檔中的

react-addons-css-transition-group Animation | React ：對應 transitionName 通過 css 來實現動畫
react-addons-transition-group Animation | React : 根據 animation hook 來實現動畫，動畫的具體實現方式可以使用 jQuery，css3 或者其他動畫庫如 gsap

ant.design 的動畫方案 ant-motion http://motion.ant.design/#/components/animate?_k=dkcb1g

rc-animate GitHub - react-component/animate: anim react element easily ,基本的思路也是通過 hook + jQuery 的方式
TweenOne GitHub - react-component/tween-one: Animate One React Element
Queue-anim GitHub - react-component/queue-anim: Animate React Component in queue
... 其他 ScrollAnim BannerAnim

react-motion GitHub - chenglou/react-motion: A spring that solves your animation problems.

和 React 的設計更緊密的結合，將 Tween 作為組件，結果作為屬性傳遞到 style 中完成動畫

更具自己團隊的需求來參考設計，如果之前已有個人的動畫庫或者喜歡 jQuery，可以通過 hook 的方式，如果要效率，css3 應該是最好的選擇

最近應該會在 LeanReact - 知乎專欄中更新一篇動畫相關的文章，更新了過後再貼在這裡

React 並不能解決動畫的問題, 只能用於整理 DOM 操作的實現. 所以要實現動畫, 還是用的以往的方式, 只是通過 React 簡化一下寫法而已. 所以 CSS3 動畫, 連續操作 DOM 實現動畫, Canvas 動畫, 需要的時候還是自己上, 最多也就享受一下 DOM 操作的方便.

邀請我做什麼_(:з」∠)_ 我是玩 react native的呀。。。

提供一點思路，動畫說白了就是讓element的某些attribute根據一個函數曲線進行變化，僅此而已。

CSS3有animation，也不是很難，推薦用。

canvas實現的動畫。。。最近在玩這個，可以參考下Collie - High Performance Animation Library for Javascript；

react不太熟，畢竟RN和react還是有很大區別的。。

「動畫」我在這裡理解為animation(動態效果),如果我理解有誤請在評論中告知。:)

我最近正在入門React，遇到了同樣的疑惑。通過網上搜資料、問大神，目前有了一些非常粗淺的見解和一些有局限性的解決方案。

React里做動畫麻煩的原因大致是因為大多React的項目都是基於ES6(通過babel轉化成ES5)，而很多js的庫(尤其是做動態，動畫的庫)並沒有ES6的原生支持。目前我知道的解決方法有以下幾個，排序根據推薦程度由高到低：

1. React原生的animate Library，和Github上一些第三方的React Library可以用來解決一些基礎的，具體的動態效果。這個是最推薦的方法，但是對於一些複雜的,特定的動態效果存在很大的局限性

2. 盡量多用CSS3里的動態, CSS3有了很多動態效果的支持. 因此完全基於CSS3也可以做到很多酷炫的動態效果

3. 還有一種我不是特別推薦（雖然不推薦，然而我自己也在用）的方法。很多動態效果的庫是基於ES5 JS或者jQuery(基於ES5). 這些庫可以在DOM完全Load之後再Include。簡單來說，在Chrome里inspect element，這些庫(包括jQuery)應當在bundle.js之後Include,自己寫的customize js也可以Include在這裡

好在React非常熱門,有很大的community,相信第三方的React animate庫會越來越多. 並且會有越來越多的庫支持ES6. 所以前途是光明的. 如果把Angular2和React/Redux比較,我覺得前端的未來會在React

我最近業餘時間做了一個基於豆瓣電影 API 的小應用，其中大量的用到了 React 和 CSS Transition 動畫，有興趣的話可以在 Github 上 Star 或者 Fork 一下，或者直接在 Issue 裡面提問

MagicCube/movie-board: Re-design and implement Douban Movie with React and Redux.

在線演示地址（最好在桌面版的 Chrome 中瀏覽，沒有做瀏覽器適配，但是做了各種桌面端解析度的適配）：

THE BEST WAY TO EXPLORE MOVIES

贊，動畫都是操作樣式，可以直接把動畫使用 css3 來完成，使用的時候給元素添加 class 就可以了

提供一個學習資源：http://www.jikexueyuan.com/course/1589.html React 動畫效果實現。

傳統 web 動畫的兩種方式：

1. CSS3

2. JS: 使用 setInterval / setTimeout / requestAnimationFrame 不斷地修改 DOM 的 style 屬性產生動畫效果

對應到 react 中

1. CSS3：使用 ReactCSSTransitionGroup 來實現

2. JS: 仍然使用 setInterval / setTimeout / requestAnimationFrame，但不再是直接修改 DOM 的 style 屬性，而是修改某個 state 值，再把這個值作用在某個 component 的 style 上。

可以參考下Regular怎麼解決這個問題的。