codecamp

鸿蒙OS 动画开发指导

动画是组件的基础特性之一,精心设计的动画使UI变化更直观,有助于改进应用程序的外观并改善用户体验。Java UI 框架提供了数值动画(AnimatorValue)和属性动画(AnimatorProperty),并提供了将多个动画同时操作的动画集合(AnimatorGroup)。

数值动画(AnimatorValue)

AnimatorValue 数值从 0 到 1 变化,本身与 Component 无关。开发者可以设置 0 到 1 变化过程的属性,例如:时长、变化曲线、重复次数等,并通过值的变化改变组件的属性,实现组件的动画效果。

  1. 声明 AnimatorValue。

   AnimatorValue animator = new AnimatorValue();

  1. 设置变化属性。

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

  1. 添加回调事件。

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

  1. 启动动画或对动画做其他操作。

   animator.start();

AnimatorGroup 动画效果如图所示:

图1 数值动画效果 img

属性动画(AnimatorProperty)

为 Component 的属性设置动画是非常常见的需求,Java UI 框架可以为 Component 设置某个属性或多个属性的动画。

  1. 声明 AnimatorProperty。

   AnimatorProperty animator = button.createAnimatorProperty();

  1. 设置变化属性,可链式调用。

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

  1. 启动动画或对动画做其他操作。

   animator.start();

可以使用setTarget()改变关联的Component对象。

   animator.setTarget(button2);

动画效果如图所示:

图2 属性动画效果 img

动画集合(AnimatorGroup)

如果需要使用一个组合动画,可以把多个动画对象进行组合,并添加到使用 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. 启动动画或对动画做其他操作。

   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. 启动动画或对动画做其他操作。

   animatorGroup.start();

动画集合的动画效果如下:

图3 动画集合效果 img

鸿蒙OS DependentLayout
鸿蒙OS 可见即可说开发指导
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

鸿蒙OS 开发

鸿蒙OS 术语

鸿蒙OS Java API参考

鸿蒙OS ohos.aafwk.ability

鸿蒙OS ohos.aafwk.abilityjet.activedata

鸿蒙OS ohos.aafwk.content

鸿蒙OS java.lang

鸿蒙OS java.Util

鸿蒙OS java.Util class

鸿蒙OS ohos.data.dataability

鸿蒙OS ohos.data.dataability class

鸿蒙OS ohos.agp.components

鸿蒙OS ohos.agp.components interface

鸿蒙OS ohos.agp.components class

鸿蒙OS ohos.global.configuration

鸿蒙OS java.io

鸿蒙OS ohos.data.resultset

鸿蒙OS ohos.data.resultset interface

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }