一、概述
FVS大屏組件存在兩種動畫：組件框架動畫，組件内容動畫。
組件内容動畫：指組件内容本身的平滑過度，如下圖1所示。具體設定本文不贅述，詳情請參見：圖表互動屬性 。
組件框架動畫：指的是頁面切換時，頁面中組件進入和退出的動态效果設定。如下圖2所示。本文主要介紹的即是這部分內容。
二、優先級
FVS大屏範本中的組件支持多個合并成組合，組合動效需要單獨設定，設定方法與組件動效一緻。
FVS大屏範本中存在平滑過渡動畫效果，轉場動效将有移動轉場效果。
若同時設定了【組件動效】、【組合動效】和【平滑過渡】，那麽優先級排序為【平滑過渡】→【組合動效】→【組件動效】。
優先級最高的設定生效，優先級低的均不生效。
三、普通組件動畫
1
設定方法。
FVS大屏範本中的任意組件都可以設定動畫，包括出現動畫和消失動畫。
選中頁面中的組件，點擊配置欄中的【動畫】，點擊【動效設定】按鈕，即可設定組件動畫。如下圖1所示。
每個組件都可以設定進入動效和退出動效：當從上一頁切換到下一頁時，上一頁組件的退出動效和下一頁組件的進入動效生效。當從下一頁切換到上一頁時，上一頁組件的退出動效和下一頁組件的進入動效反向生效。如下圖2所示。
設定項的具體配置如下表所示。
配置項 | 簡介 |
|---|---|
進入動效 | 定義：組件出現時的動态效果。 支持設定：無、淡入、向右進入、向左進入、向上進入、向下進入。 預設值：【淡入】。 |
動效時長 | 定義：開始動畫的持續時長。 單位：毫秒。 預設值：【1000】。 |
進入時機 | 定義：組件什麽時候開始出現。 支持設定：在上一頁開始切換時立即進入、在上一頁開始切換時延遲X秒後進入、在上一頁完全消失後立即進入、在上一頁完全消失後延遲X秒後進入。 預設值：在上一頁開始切換時立即進入。 |
退出動效 | 定義：組件消失時的動态效果。 支持設定：無、淡出、向左退出、向右退出、向上退出、向下退出。 預設值：【淡出】。 |
動效時長 | 定義：消失動畫的持續時長。 單位：毫秒。 預設值：【1000】。 |
退出時機 | 定義：組件什麽時候開始消失。 支持設定：在當前頁切換時立即退出、在當前頁切換時延遲X秒後退出。 預設值：在當前頁切換時立即退出。 |
2
效果預覽。
無動畫切換效果如下圖1所示。
淡入淡出切換效果如下圖2所示。
左右滑動切換效果如下圖3所示。
上下滑動切換效果如下圖4所示。
四、平滑過渡
FVS 提供【平滑過渡】功能。
1
設定方法-生效機制。
A 頁面和 B 頁面相鄰，且 A 頁面和 B 頁面中存在名稱完全一緻的組件。
如需從 A 頁面平滑過渡到 B 頁面，則開啓 B 頁面的【平滑過渡】按鈕。
如需從 B 頁面平滑過渡到 A 頁面，則開啓 A 頁面的【平滑過渡】按鈕。
2
設定方法-設定按鈕。
選中需要設定【平滑過渡】效果的頁面。
點擊配置欄的【過渡】按鈕。
開啓【平滑過渡】按鈕。
即可設定過渡時間，單位為【毫秒】。
如果上一頁與當前頁存在【同名稱的組件】，轉場動效将有移動轉場效果，但上一頁中該組件的【退出動效】将失效。
注：若兩個同名組件的型別不同，可能會對組件内容動畫産生影響。
3
範例。
背景：頁面1中有一個柱形圖組件名叫【範例組件】，進入動效為【淡入】，退出動效為【淡出】。如下圖1所示。頁面2中有一個柱形圖組件名叫【範例組件】，進入動效為【向左進入】，退出動效為【向右退出】。如下圖2所示。
場景一：如果不開啓【平滑過渡】，四個進出動效均生效。如下圖3所示。
場景二：如果給【頁面2】開啓【平滑過渡】，當從頁面1切換到頁面2時，頁面1中柱形圖的退出動效【淡出】和頁面2中柱形圖的進入動效【向左進入】均失效，改為移動轉場效果。如下圖4所示。
場景三：如果給【頁面1】開啓【平滑過渡】，當從頁面2切換到頁面1時：頁面2中柱形圖的退出動效和頁面1中柱形圖的進入動效均失效，改為移動轉場效果。如下圖5所示。
