• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

鸿蒙OS 动画开发指导

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

动画是组件的基础特性之一,精心设计的动画使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 数值动画效果

属性动画(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 属性动画效果

动画集合(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 动画集合效果


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
鸿蒙OS 可见即可说开发指导发布时间:2022-02-02
下一篇:
鸿蒙OS DependentLayout发布时间:2022-02-02
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap