HarmonyOS

文章40 |   阅读 20923 |   点赞0

来源:https://blog.csdn.net/forever_wj/category_11128883.html

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

x33g5p2x  于2022-03-07 转载在 其他  
字(5.2k)|赞(0)|评价(0)|浏览(522)
一、概述
  • 动画是组件的基础特性之一,精心设计的动画使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();
  • 动画集合效果如下:

五、完整示例

相关文章