FVS組件框架動畫屬性

1. FVS大屏組件存在兩種動畫：組件框架動畫，組件内容動畫。

2. 組件内容動畫：指組件内容本身的平滑過度，如下圖1所示。具體設定本文不贅述，詳情請參見：圖表互動屬性 。

3. 組件框架動畫：指的是頁面切換時，頁面中組件進入和退出的動态效果設定。如下圖2所示。本文主要介紹的即是這部分內容。

1. FVS大屏範本中的組件支持多個合并成組合，組合動效需要單獨設定，設定方法與組件動效一緻。

2. FVS大屏範本中存在平滑過渡動畫效果，轉場動效将有移動轉場效果。

3. 若同時設定了【組件動效】、【組合動效】和【平滑過渡】，那麽優先級排序為【平滑過渡】→【組合動效】→【組件動效】。

4. 優先級最高的設定生效，優先級低的均不生效。

1

設定方法。

1. FVS大屏範本中的任意組件都可以設定動畫，包括出現動畫和消失動畫。

2. 選中頁面中的組件，點擊配置欄中的【動畫】，點擊【動效設定】按鈕，即可設定組件動畫。如下圖1所示。

3. 每個組件都可以設定進入動效和退出動效：當從上一頁切換到下一頁時，上一頁組件的退出動效和下一頁組件的進入動效生效。當從下一頁切換到上一頁時，上一頁組件的退出動效和下一頁組件的進入動效反向生效。如下圖2所示。

4. 設定項的具體配置如下表所示。

2

效果預覽。

1. 無動畫切換效果如下圖1所示。

2. 淡入淡出切換效果如下圖2所示。

3. 左右滑動切換效果如下圖3所示。

4. 上下滑動切換效果如下圖4所示。

1. FVS 提供【平滑過渡】功能。

1

設定方法-生效機制。

1. A 頁面和 B 頁面相鄰，且 A 頁面和 B 頁面中存在名稱完全一緻的組件。

2. 如需從 A 頁面平滑過渡到 B 頁面，則開啓 B 頁面的【平滑過渡】按鈕。

3. 如需從 B 頁面平滑過渡到 A 頁面，則開啓 A 頁面的【平滑過渡】按鈕。

2

設定方法-設定按鈕。

1. 選中需要設定【平滑過渡】效果的頁面。

2. 點擊配置欄的【過渡】按鈕。

3. 開啓【平滑過渡】按鈕。

4. 即可設定過渡時間，單位為【毫秒】。

5. 如果上一頁與當前頁存在【同名稱的組件】，轉場動效将有移動轉場效果，但上一頁中該組件的【退出動效】将失效。

注：若兩個同名組件的型別不同，可能會對組件内容動畫産生影響。

3

範例。

1. 背景：頁面1中有一個柱形圖組件名叫【範例組件】，進入動效為【淡入】，退出動效為【淡出】。如下圖1所示。頁面2中有一個柱形圖組件名叫【範例組件】，進入動效為【向左進入】，退出動效為【向右退出】。如下圖2所示。

2. 場景一：如果不開啓【平滑過渡】，四個進出動效均生效。如下圖3所示。

3. 場景二：如果給【頁面2】開啓【平滑過渡】，當從頁面1切換到頁面2時，頁面1中柱形圖的退出動效【淡出】和頁面2中柱形圖的進入動效【向左進入】均失效，改為移動轉場效果。如下圖4所示。

4. 場景三：如果給【頁面1】開啓【平滑過渡】，當從頁面2切換到頁面1時：頁面2中柱形圖的退出動效和頁面1中柱形圖的進入動效均失效，改為移動轉場效果。如下圖5所示。