Ant Motion動效插件分析

• 2019 年 11 月 23 日
• 筆記

Ant Motion動效插件分析

一、原理分析

特效是通過組件內部的js和css兩者共同控制。

通過調用封裝的組件，部署組件DOM結構和其上面的參數完成動畫效果的添加，同時用戶可以更改組件的參數以及自定義組件的樣式來實現所需要的展示效果。

使用起來比較方便，應用場景明確有針對性，但是工作量大，適合團隊開發。

二、方案分析

（1）：第一種方案是可以嘗試在110項目的基礎上以類似Ant Motion的特效製作成組件，封裝組件的dom節點和樣式，以及添加一些組件的事件，初步可以添加一些類似彈窗特效，表格增刪特效，按鈕點擊特效之類。

例：<QueueAnim type={['right', 'left']} ease={['easeOutQuart', 'easeInOutQuart']}></QueueAnim>

（2）：第二種方案可以用只封裝動畫效果的方法製作動效組件庫，純css樣式組件。通過給要加動效的元素添加指定的class類名來展示特效。比如hover添加了指定類名(如:hv-fadeIn)的元素時執行動效。

例：<div class="hv-fadeIn"></div>

（3）：第三種方案可以製作一個純js組件，動效樣式通過用戶自定義。通過封裝的方法給元素綁定特效，可以兼顧到hover和click兩中交互效果，也可以只執行一次設定的動效。

例：go函數參數：綁定元素，觸發方式option(hover/click)，動畫效果(分為transition和animation兩種)，動畫時間，執行過渡的線性效果(支援cubic-bezier)，動效完成回調函數，延遲時間  go(dom元素,option,{ css屬性：css值},transitionDuration(單位：毫秒),transitionTiming,transitionend回調函數,transitionDelay單位：毫秒);  go(dom元素,option,keyframesName,animationDuration,animationTiming,animationend回調函數,animationDelay單位：毫秒);

三、主流動態分類

hover/點擊特效：(hover類特效更適用於PC端，因為移動設備中並沒有滑鼠指針，移動端適合用點擊類效果)

（1）：元素的2D變換(放大縮小；扭動彈跳；晃動變形)  （2）：元素背景的填充與文字顏色變化  （3）：icon圖標變換  （4）：shadow陰影特效(元素升高地面出現陰影)  （5）：按鈕特效（button的點擊交互；radio之類的單選複選框選中效果）  （6）：彈出特效（select下拉框的拉開收起特效；dialog/modal彈框特效）

其它特效：

（1）：出場特效（可以用於一些項目首頁，滾動到對應樓層時添加出場動畫，執行各種過渡組合特效）  （2）：元素添加/刪除特效(如：項目中一些表格列表和分支的創建和刪除可以適用)