Ant Motion動(dòng)效語言& React 框架動(dòng)效解決方案
Ant Motion 是從螞蟻金服的 Ant Design 中提煉出來的動(dòng)效語言。它不僅僅是動(dòng)效語言，同時(shí)也是一套 React 框架動(dòng)效解決方案，提供了單項(xiàng)，組合動(dòng)畫，以及整套解決方案，幫助開發(fā)者更容易的在項(xiàng)目中使用動(dòng)效。
Ant Motion 能做什么 ？
通過 React 標(biāo)簽，以簡(jiǎn)單的配置即可完成想要的動(dòng)畫，可以快速的實(shí)現(xiàn)不同組合的動(dòng)畫效果，更好的提高你的工作效率。
動(dòng)效 Demo
列表的增刪間的動(dòng)畫;
詳細(xì)說明的切換動(dòng)效;
列表交換位置的動(dòng)效;
圖片詳細(xì)縮略間的切換動(dòng)效;
動(dòng)效語言
Ant Motion 在界面里主要是來加強(qiáng)體驗(yàn)舒適度、描述層級(jí)關(guān)系、增加界面活力、反饋與意向等功能性的動(dòng)效。詳情查看
動(dòng)效組件
rc-tween-one 單元素動(dòng)效執(zhí)行組件
這是個(gè)對(duì)單個(gè)元素標(biāo)簽做動(dòng)效的組件，可以執(zhí)行所有樣式動(dòng)畫，包括 transform3d，模糊等效果，還可以完成貝塞爾曲線動(dòng)畫，具體參數(shù)請(qǐng)參見 API
rc-animate 樣式進(jìn)出場(chǎng)組件
對(duì)單個(gè)元素根據(jù)狀態(tài)進(jìn)行動(dòng)畫顯示隱藏，需結(jié)合 css 或其它第三方動(dòng)畫類一起使用；具體參數(shù)請(qǐng)參見 API
rc-queue-anim 隊(duì)列進(jìn)出場(chǎng)組件
通過簡(jiǎn)單的配置對(duì)一組元素添加串行的進(jìn)場(chǎng)動(dòng)畫效果。具體參數(shù)請(qǐng)參見 API
rc-scroll-anim 隨滾動(dòng)執(zhí)行效果組件
通過簡(jiǎn)單的配置，對(duì)頁面里的元素添加隨滾動(dòng)條滾動(dòng)的動(dòng)畫。具體參數(shù)請(qǐng)參見 API
rc-banner-anim banner 切換效果組件
通過簡(jiǎn)單的配置, 就能讓你的 banner 動(dòng)起來。 具體參數(shù)請(qǐng)參見 API
首頁的解決方案
這是以 Ant Motion 的 React 組件遵從 Ant Design 的視覺規(guī)范來完成的 demo 頁面，可靈活又快速的配置出你想要的首頁模板。
主要提供了單元素示例與配置完后的整頁示例。
Develop
安裝
npm install
啟動(dòng)：
npm start