动画开发指导

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

帧动画

帧动画是利用视觉暂留现象，将一系列静止的图片按序播放，给用户产生动画的效果。

  1. 在“Project”窗口，打开“entry > src > main > resources > base > media”，添加一系列图片至“media”目录下。

    img

  2. 在“graphic”目录下，新建“animation_element.xml”文件，在XML文件中使用animation-list标签来配置图片资源，duration用来设置显示时长，单位为毫秒。oneshot表示是否只播放一次。

    <?xml version="1.0" encoding="utf-8"?><animation-list xmlns:ohos="http://schemas.huawei.com/res/ohos"                ohos:oneshot="false">    <item ohos:element="$media:01" ohos:duration="100"/>    <item ohos:element="$media:02" ohos:duration="100"/>    <item ohos:element="$media:03" ohos:duration="100"/>    <item ohos:element="$media:04" ohos:duration="100"/>    <item ohos:element="$media:05" ohos:duration="100"/>    <item ohos:element="$media:06" ohos:duration="100"/>    <item ohos:element="$media:07" ohos:duration="100"/>    <item ohos:element="$media:08" ohos:duration="100"/>    <item ohos:element="$media:09" ohos:duration="100"/>    <item ohos:element="$media:10" ohos:duration="100"/>    <item ohos:element="$media:11" ohos:duration="100"/>    <item ohos:element="$media:12" ohos:duration="100"/></animation-list>

  3. 在Java代码中，获取动画资源。

    FrameAnimationElement frameAnimationElement = new FrameAnimationElement(getContext(), ResourceTable.Graphic_animation_element);

  4. 创建一个组件用于承载帧动画。

    Component component = new Component(getContext());component.setWidth(500);component.setHeight(500);component.setBackground(frameAnimationElement);

  5. 启动动画。

    frameAnimationElement.start();

    动画效果如图所示：

    图1 帧动画效果 img

数值动画

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

  1. 声明AnimatorValue。

    Java方式：

    AnimatorValue animatorValue = new AnimatorValue();

    XML方式：在resource/base/animation文件夹下声明名为“animator_value.xml”的XML文件。但是，目前XML方式只支持delay和duration属性，其他属性均需通过Java代码设置，因此建议采用Java方式。

    <?xml version="1.0" encoding="UTF-8" ?><animator xmlns:ohos="http://schemas.huawei.com/res/ohos"                  ohos:delay="1000"                  ohos:duration="2000"/>

  2. 使用数值动画。

    Java方式：设置变化属性。

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

    XML方式：解析XML数值动画文件并使用。

    AnimatorScatter scatter = AnimatorScatter.getInstance(getContext());Animator animator = scatter.parse(ResourceTable.Animation_animator_value);if (animator instanceof AnimatorValue) {    AnimatorValue animatorValue = (AnimatorValue) animator;    animatorValue.setLoopedCount(2);    animatorValue.setCurveType(Animator.CurveType.BOUNCE);}

  3. 添加回调事件。

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

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

    animatorValue.start();

    动画效果如图所示：

    图2 数值动画效果 img

属性动画

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

  1. 声明AnimatorProperty。

    Java方式：

    AnimatorProperty animatorProperty = image.createAnimatorProperty();

    XML方式：在resource/base/animation文件夹下声明名为“animator_property.xml”的XML文件。但是，目前XML方式只支持delay和duration属性，其他属性均需通过Java代码设置，因此建议采用Java方式。

    <?xml version="1.0" encoding="UTF-8" ?><animatorProperty xmlns:ohos="http://schemas.huawei.com/res/ohos"                  ohos:delay="500"                  ohos:duration="2500"/>

  2. 使用属性动画。

    Java方式：设置变化属性，可链式调用。

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

    XML方式：解析XML属性动画文件并使用。

    AnimatorScatter scatter = AnimatorScatter.getInstance(getContext());Animator animator = scatter.parse(ResourceTable.Animation_animator_property);if (animator instanceof AnimatorProperty) {    AnimatorProperty animatorProperty = (AnimatorProperty) animator;    animatorProperty.setTarget(component);    animatorProperty.moveFromX(50).moveToX(1000).rotate(90).alpha(0).setLoopedCount(5);}

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

    • 在页面显示时启动动画

      image.setBindStateChangedListener(new Component.BindStateChangedListener() {    @Override    public void onComponentBoundToWindow(Component component) {        animatorProperty.start();    }
    @Override    public void onComponentUnboundFromWindow(Component component) {        animatorProperty.stop();}});

    • 在点击事件中启动动画

      image.setClickedListener(component -> animatorProperty.start());

    动画效果如图所示：

    图3 属性动画效果 img

动画集合

如果需要使用一个组合动画，可以把多个动画对象进行组合，并添加到使用AnimatorGroup中。AnimatorGroup提供了两个方法：runSerially() 和 runParallel()，分别表示动画按顺序开始和动画同时开始。（注：动画集合暂不支持XML使用方式。）

  1. 声明AnimatorGroup。

    AnimatorGroup animatorGroup = new AnimatorGroup();

  2. 添加要按顺序或同时开始的动画。

    // 4个动画按顺序播放animatorGroup.runSerially(am1, am2, am3, am4);// 4个动画同时播放animatorGroup.runParallel(am1, am2, am3, am4);

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

    animatorGroup.start();

为了更加灵活处理多个动画的播放顺序，例如一些动画顺序播放，一些动画同时播放，Java UI框架提供了更方便的动画Builder接口：

  1. 声明AnimatorGroup.Builder。

    AnimatorGroup.Builder animatorGroupBuilder = animatorGroup.build();

  2. 按播放顺序添加多个动画。

    // 4个动画的顺序为: am1 -> am2/am3 -> am4animatorGroupBuilder.addAnimators(am1).addAnimators(am2, am3).addAnimators(am4)

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

    animatorGroup.start();

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

    图4 动画集合效果 img

相关实例

针对动画开发，有以下示例工程可供参考：

  • Animation

    本示例演示了帧动画、数值动画、属性动画和组合动画的实现。

results matching ""

    No results matching ""