HarmonyOS之帧动画数值动画属性动画和组合动画的效果实现

Posted 2021-07-03 Forever_wj

一、概述

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

二、帧动画

• 帧动画是利用视觉暂留现象，将一系列静止的图片按序播放，给用户产生动画的效果。
• 在“Project”窗口，打开“entry > src > main > resources > base > media”，添加一系列图片至“media”目录下：

• 在“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>

• 在 Java 代码中，获取动画资源：

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

• 创建一个组件用于承载帧动画：

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

• 启动动画：

	frameAnimationElement.start();

• 帧动画效果如图所示：

三、数值动画

• AnimatorValue 数值从 0 到 1 变化，本身与 Component 无关。开发者可以设置 0 到 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"/>

② 使用数值动画

• 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);
	}

③ 添加回调事件

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

④ 启动动画或对动画做其他操作

	animatorValue.start();

⑤ 数值动画效果

四、属性动画

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

① 声明 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"/>

② 使用属性动画

• 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);
	}

③ 启动动画或对动画做其他操作

• 在页面显示时启动动画：

	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());

④ 属性动画效果

四、动画集合

① 组合动画

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

	AnimatorGroup animatorGroup = new AnimatorGroup();

• 添加要按顺序或同时开始的动画：

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

• 启动动画或对动画做其他操作：

	animatorGroup.start();

② 灵活处理

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

	AnimatorGroup.Builder animatorGroupBuilder = animatorGroup.build();

• 按播放顺序添加多个动画：

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

• 启动动画或对动画做其他操作：

	animatorGroup.start();

• 动画集合效果如下：