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

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

數(shù)值動(dòng)畫（AnimatorValue）

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

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. 啟動(dòng)動(dòng)畫或?qū)?dòng)畫做其他操作。

   animator.start();

AnimatorGroup 動(dòng)畫效果如圖所示：

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

屬性動(dòng)畫（AnimatorProperty）

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

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. 啟動(dòng)動(dòng)畫或?qū)?dòng)畫做其他操作。

   animator.start();

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

   animator.setTarget(button2);

動(dòng)畫效果如圖所示：

圖2 屬性動(dòng)畫效果

動(dòng)畫集合（AnimatorGroup）

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

1. 聲明 AnimatorGroup。

   AnimatorGroup animatorGroup = new AnimatorGroup();

1. 添加要按順序或同時(shí)開始的動(dòng)畫。

   // 4個(gè)動(dòng)畫按順序播放
   animatorGroup.runSerially(am1, am2, am3, am4);
   // 4個(gè)動(dòng)畫同時(shí)播放
   animatorGroup.runParallel(am1, am2, am3, am4);

1. 啟動(dòng)動(dòng)畫或?qū)?dòng)畫做其他操作。

   animatorGroup.start();

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

1. 聲明 AnimatorGroup Builder。

   AnimatorGroup.Builder animatorGroupBuilder = animatorGroup.build();

1. 按播放順序添加多個(gè)動(dòng)畫。

   // 4個(gè)動(dòng)畫的順序?yàn)? am1 -> am2/am3 -> am4
   animatorGroupBuilder.addAnimators(am1).addAnimators(am2, am3).addAnimators(am4)

1. 啟動(dòng)動(dòng)畫或?qū)?dòng)畫做其他操作。

   animatorGroup.start();

動(dòng)畫集合的動(dòng)畫效果如下：

圖3 動(dòng)畫集合效果