鴻蒙OS 動畫開發(fā)指導(dǎo)

動畫是組件的基礎(chǔ)特性之一，精心設(shè)計的動畫使UI變化更直觀，有助于改進(jìn)應(yīng)用程序的外觀并改善用戶體驗。Java UI 框架提供了數(shù)值動畫（AnimatorValue）和屬性動畫（AnimatorProperty），并提供了將多個動畫同時操作的動畫集合（AnimatorGroup）。

數(shù)值動畫（AnimatorValue）

AnimatorValue 數(shù)值從 0 到 1 變化，本身與 Component 無關(guān)。開發(fā)者可以設(shè)置 0 到 1 變化過程的屬性，例如：時長、變化曲線、重復(fù)次數(shù)等，并通過值的變化改變組件的屬性，實現(xiàn)組件的動畫效果。

1. 聲明 AnimatorValue。

   AnimatorValue animator = new AnimatorValue();

1. 設(shè)置變化屬性。

   animator.setDuration(2000);
   animator.setDelay(1000);
   animator.setLoopedCount(2);
   animator.setCurveType(Animator.CurveType.BOUNCE);

1. 添加回調(diào)事件。

   animator.setValueUpdateListener(new AnimatorValue.ValueUpdateListener() {
       @Override
       public void onUpdate(AnimatorValue animatorValue, float value) {
           button.setContentPosition((int) (800 * value), button.getContentPositionY());
       }
   });

1. 啟動動畫或?qū)赢嬜銎渌僮鳌?/li>

   animator.start();

AnimatorGroup 動畫效果如圖所示：

圖1 數(shù)值動畫效果

屬性動畫（AnimatorProperty）

為 Component 的屬性設(shè)置動畫是非常常見的需求，Java UI 框架可以為 Component 設(shè)置某個屬性或多個屬性的動畫。

1. 聲明 AnimatorProperty。

   AnimatorProperty animator = button.createAnimatorProperty();

1. 設(shè)置變化屬性，可鏈?zhǔn)秸{(diào)用。

   animator.moveFromX(50).moveToX(1000).rotate(180).alpha(0).setDuration(2500).setDelay(500).setLoopedCount(5);

1. 啟動動畫或?qū)赢嬜銎渌僮鳌?/li>

   animator.start();

可以使用setTarget()改變關(guān)聯(lián)的Component對象。

   animator.setTarget(button2);

動畫效果如圖所示：

圖2 屬性動畫效果

動畫集合（AnimatorGroup）

如果需要使用一個組合動畫，可以把多個動畫對象進(jìn)行組合，并添加到使用 AnimatorGroup 中。AnimatorGroup 提供了兩個方法：runSerially() 和 runParallel()，分別表示動畫按順序開始和動畫同時開始。

1. 聲明 AnimatorGroup。

   AnimatorGroup animatorGroup = new AnimatorGroup();

1. 添加要按順序或同時開始的動畫。

   // 4個動畫按順序播放
   animatorGroup.runSerially(am1, am2, am3, am4);
   // 4個動畫同時播放
   animatorGroup.runParallel(am1, am2, am3, am4);

1. 啟動動畫或?qū)赢嬜銎渌僮鳌?/li>

   animatorGroup.start();

為了更加靈活處理多個動畫的播放順序，例如一些動畫順序播放，一些動畫同時播放，Java UI框架提供了更方便的動畫Builder接口：

1. 聲明 AnimatorGroup Builder。

   AnimatorGroup.Builder animatorGroupBuilder = animatorGroup.build();

1. 按播放順序添加多個動畫。

   // 4個動畫的順序為: am1 -> am2/am3 -> am4
   animatorGroupBuilder.addAnimators(am1).addAnimators(am2, am3).addAnimators(am4)

1. 啟動動畫或?qū)赢嬜銎渌僮鳌?/li>

   animatorGroup.start();

動畫集合的動畫效果如下：

圖3 動畫集合效果