介绍

利用ArkUI组件不仅可以实现属性变化引起的属性动画,也可以实现父组件状态变化引起子组件产生动画效果,这种动画为显式动画。效果如图所示:

相关概念

显式动画:提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。

属性动画:组件的某些通用属性变化时,可以通过属性动画实现渐变过渡效果,提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。

Slider:滑动条组件,通常用于快速调节设置值,如音量调节、亮度调节等应用场景。

完整示例

gitee源码地址

源码下载

动效示例(ArkTS).zip

环境搭建

我们首先需要完成HarmonyOS开发环境搭建,可参照如图步骤进行。

软件要求

DevEco Studio版本:DevEco Studio 3.1 Release。

HarmonyOS SDK版本:API version 9。

硬件要求

设备类型:华为手机或运行在DevEco Studio上的华为手机设备模拟器。

HarmonyOS系统:3.1.0 Developer Release。

环境搭建

1.  安装DevEco Studio,详情请参考下载和安装软件

2.  设置DevEco Studio开发环境,DevEco Studio开发环境需要依赖于网络环境,需要连接上网络才能确保工具的正常使用,可以根据如下两种情况来配置开发环境:

● 如果可以直接访问Internet,只需进行下载HarmonyOS SDK操作。

● 如果网络不能直接访问Internet,需要通过代理服务器才可以访问,请参考配置开发环境

3.  开发者可以参考以下链接,完成设备调试的相关配置:

使用真机进行调试

使用模拟器进行调试

代码结构解读

本篇Codelab只对核心代码进行讲解,对于完整代码,我们会在源码下载或gitee中提供。

├──entry/src/main/ets                // 代码区
│ ├──common
│ │ └──constants
│ │ └──Const.ets // 常量类
│ ├──entryability
│ │ └──EntryAbility.ts // 程序入口类
│ ├──pages
│ │ └──Index.ets // 动效页面入口
│ ├──view
│ │ ├──AnimationWidgets.ets // 动画组件
│ │ ├──CountController.ets // 图标数量控制组件
│ │ └──IconAnimation.ets // 图标属性动画组件
│ └──viewmodel
│ ├──IconItem.ets // 图标类
│ ├──Point.ets // 图标坐标类
│ └──IconsModel.ets // 图标数据模型
└──entry/src/main/resources // 资源文件

  

页面入口

页面入口由AnimationWidgets(动效组件)、CountController(动效图标数量控制组件)组成。

其中CountController通过Slider滑动控制quantity(动效图标数量);AnimationWidgets根据quantity展示相应数量的图标,点击组件按钮后通过在animateTo的event闭包函数中改变mainFlag状态,跟mainFlag相关的样式属性的变化都会产生动画效果。

// Index.ets
@Entry
@Component
struct Index {
@State quantity: number = Common.IMAGES_MIN;
@Provide iconModel: IconsModel = new IconsModel(this.quantity, Common.OFFSET_RADIUS); build() {
Column() {
// 动画组件
AnimationWidgets({
quantity: $quantity
})
// 图标数量控制组件
CountController({
quantity: $quantity
})
}
...
}
}

  

CountController组件通过Slilder滑动控制动效图标的数量,最少3个图标,最多6个图标。

// CountController.ets
@Component
export struct CountController {
@Link quantity: number; build() {
Column() {
Row() {
Text($r('app.string.count'))
.textStyle() Text(this.quantity)
.textStyle()
}
... Slider({
value: this.quantity,
min: Common.IMAGES_MIN,
max: Common.IMAGES_TOTAL,
step: 1,
style: SliderStyle.InSet
})
.blockColor(Color.White)
.selectedColor($r('app.color.SliderSelectColor'))
.showSteps(true)
.trackThickness($r('app.float.size_20'))
.onChange((value: number) => {
this.quantity = value;
})
...
}
}
}

  

显式动画

点击AnimationWidgets组件的中心图标,调用animateTo方法,在event回调方法中改变状态,从而对组件本身产生缩放动画,和图标位置变化的动画效果,效果如图所示:

在animationTo的回调中修改mainFlag状态,所有跟mainFlag状态相关的属性变化都会产生过渡动画效果。

// AnimationWidgets.ets
export struct AnimationWidgets {
@State mainFlag: boolean = false;
@Link @Watch('onQuantityChange') quantity: number;
@Consume iconModel: IconsModel; onQuantityChange() { // 监听图标数量的变化,并修改图标数据以及对应的坐标位置
this.iconModel.addImage(this.quantity);
} aboutToAppear() {
this.onQuantityChange();
} animate() {
animateTo(
{
delay: Common.DELAY_10,
tempo: Common.TEMPO,
iterations: 1,
duration: Common.DURATION_500,
curve: Curve.Smooth,
playMode: PlayMode.Normal
}, () => {
this.mainFlag = !this.mainFlag;
})
} build() {
Stack() {
Stack() {
ForEach(this.iconModel.imagerArr, (item: IconItem) => {
IconAnimation({
item: item,
mainFlag: $mainFlag
})
}, (item: IconItem) => JSON.stringify(item.index))
}
.rotate({
x: 0,
y: 0,
z: 1,
angle: this.mainFlag ? Common.ROTATE_ANGLE_360 : 0
}) ... Image(
this.mainFlag
? $r("app.media.imgActive")
: $r("app.media.imgInit")
)
.scale({
x: this.mainFlag ? Common.INIT_SCALE : 1,
y: this.mainFlag ? Common.INIT_SCALE : 1
})
.onClick(() => {
this.iconModel.reset(); // 重置图标激活状态
this.animate(); // 启动显式动画
})
...
}
}
}

  

属性动画

组件的通用属性发生变化时,可以创建属性动画进行渐变,提升用户体验。示例效果如图所示:

当组件由animation动画属性修饰时,如果自身属性发生变化会产生过渡动画效果。本示例中当点击小图标时会触发自身clicked状态的变化,所有跟clicked相关的属性变化(如translate、rotate、scale、opacity)都会被增加动画效果。

// IconAnimation.ets
export struct IconAnimation {
@Link mainFlag: boolean;
@ObjectLink item: IconItem; build() {
Image(this.item.image)
.width(Common.ICON_WIDTH)
.height(Common.ICON_HEIGHT)
.objectFit(ImageFit.Contain)
.translate(
this.mainFlag
? { x: this.item.point.x, y: this.item.point.y }
: { x: 0, y: 0 }
)
.rotate({
x: 0,
y: 1,
z: 0,
angle: this.item.clicked ? Common.ROTATE_ANGLE_360 : 0
})
.scale(
this.item.clicked
? { x: Common.SCALE_RATIO, y: Common.SCALE_RATIO }
: { x: 1, y: 1 }
)
.opacity(this.item.clicked ? Common.OPACITY_06 : 1)
.onClick(() => {
this.item.clicked = !this.item.clicked;
})
.animation(
{
delay: Common.DELAY_10,
duration: Common.DURATION_1000,
iterations: 1,
curve: Curve.Smooth,
playMode: PlayMode.Normal
}
)
}
}

  

根据图标数量计算图标位置。

// IconsModel.ets
import Common from '../common/constants/Const';
import IconItem from './IconItem';
import Point from './Point'; const TWO_PI: number = 2 * Math.PI; @Observed
export class IconsModel {
public imagerArr: Array<IconItem> = [];
private num: number = Common.IMAGES_MIN;
private radius: number; constructor(num: number, radius: number) {
this.radius = radius;
this.addImage(num);
} public addImage(num: number) {
this.num = num;
if (this.imagerArr.length === num) {
return;
}
if (this.imagerArr.length > num) {
this.imagerArr.splice(num, this.imagerArr.length - num);
} else {
for (let i = this.imagerArr.length; i < num; i++) {
const point = this.genPointByIndex(i);
this.imagerArr.push(new IconItem(i, Common.IMAGE_RESOURCE[i], false, point));
}
} this.refreshPoint(num);
} public refreshPoint(num: number) {
for (let i = 0; i < num; i++) {
this.imagerArr[i].point = this.genPointByIndex(i);
}
} public genPointByIndex(index: number): Point {
const x = this.radius * Math.cos(TWO_PI * index / this.num);
const y = this.radius * Math.sin(TWO_PI * index / this.num);
return new Point(x, y);
} public reset() {
for (let i = 0; i < this.num; i++) {
if (this.imagerArr[i].clicked) {
this.imagerArr[i].clicked = false;
}
}
}
}

  

总结

您已经完成了本次Codelab的学习,并了解到以下知识点:

1.  如何使用animateTo实现显式动画。

2.  如何使用animation为组件添加属性动画。

HarmonyOS属性动画开发示例(ArkTS)的更多相关文章

  1. android 开发 View _2_ View的属性动画ObjectAnimator ,动画效果一览

    支持:https://www.cnblogs.com/whoislcj/p/5738478.html translationX的效果: protected void onCreate(Bundle s ...

  2. Android开发——View动画、帧动画和属性动画详解

    0. 前言   Android动画是面试的时候经常被问到的话题.我们都知道Android动画分为三类:View动画.帧动画和属性动画. 先对这三种动画做一个概述: View动画是一种渐进式动画,通过图 ...

  3. IOS开发-属性动画和关键帧动画的使用

    CAMediaTiming是一个协议(protocol),CAAnimation是所有动画类的父类,但是它不能直接使用,应该使用它的子类. 继承关系: CoreAnmiation 核心动画 简写CA ...

  4. android 开发 View _3_ View的属性动画ValueAnimator

    ValueAnimator ValueAnimator继承自抽象类Animator.要让属性动画渐变式地更改对象中某个属性的值,可分两步操作:第一步,动画需要计算出某一时刻属性值应该是多少:第二步,需 ...

  5. Android开发属性动画

    普通动画效果和属性动画效果区别: 普通动画效果的动画播放后只是产生了视觉欺骗,并没有移动真实的控件. 属性动画直接真实的移动控件 AnimationSet动画: TextView t1 = (Text ...

  6. 【属性动画示例】Property Animation

    MainActivity 属性动画常用操作 // 可操控的属性有:alpha:x/y:scaleX/scaleY:rotation/rotationX/rotationY:transitionX/tr ...

  7. Android开发实战之补间动画和属性动画

    说起动画,其实一点也不陌生,在使用一款app的时候为了优化用户体验,多多少少的,都会加入动画. 安卓中的动画,分为两大类:补间动画和属性动画.本篇博文会详细介绍总结这两大动画,希望本篇博文对你的学习和 ...

  8. 第三部分:Android 应用程序接口指南---第四节:动画和图形---第一章 属性动画及动画与图形概述

    第1章 属性动画及动画与图形概述 Android提供了一系列强大的API来把动画加到UI元素中,以及绘制自定义的2D和3D图像中去.下面的几节将综述这些可用的API以及系统的功能,同时帮你做出最优的选 ...

  9. HarmonyOS三方件开发指南(15)-LoadingView功能介绍

    目录: 1. LoadingView组件功能介绍2. Lottie使用方法3. Lottie开发实现4.<HarmonyOS三方件开发指南>系列文章合集 1. LoadingView组件功 ...

  10. 使用属性动画 — Property Animation

    属性动画,就是通过控制对象中的属性值产生的动画.属性动画是目前最高级的2D动画系统. 在API Level 11中添加.Property Animation号称能控制一切对象的动画,包括可见的和不可见 ...

随机推荐

  1. 轻量级NuGet—BaGet

    1. 介绍 BaGet是一个轻量级的包管理服务.有些时候公司或者个人不希望某一些包进行公开,那么就需要使用私有的包管理服务程序,该服务是用.netcore进行编写的(感谢开发者为社区做出的共享) Gi ...

  2. Java 小案列 this关键字使用+构造器 +方法+调用

    1 package com.bytezero.thistest; 2 3 public class Boy 4 { 5 private String name; 6 private int age; ...

  3. 协议CAN&报文&仲裁

    简介 物理层 CAN 协议提供了 5 种帧格式来传输数据 数据链路层 中数据帧和遥控帧有标准格式和扩展格式两种,标准格式有 11 位标识符(ID),扩展格式有 29 个标识符(ID)  显性0,隐性1 ...

  4. 逆向通达信Level-2 续七 (调试内置WebView)

    通过窗口找WebView,打开DevTool调试 在WebView hack入控制台.那个,我已经打开了DevTool,算了. 通过pad面板找WebView. 逆向通达信Level-2 续十一 (无 ...

  5. Django_文件下载

    一.小文件下载 1.视图 views.py 三种方式实现,任选其一 (1)使用HttpResponse # 导入模块from django.shortcuts import HttpResponse ...

  6. CodeForces Hello 2024 个人题解(A~C)

    A. Wallet Exchange 时间限制: 1秒 内存限制: 256兆 输入: 标准输入 输出: 标准输出 Alice and Bob are bored, so they decide to ...

  7. drf(初始drf,restfull规范 ,CBV、APIView、Request源码)

    一 web开发模式 # 前后端混合开发(前后端不分离):通过模版语法,在服务器上处理好html的内容(组合字符串),返回给浏览器一堆字符串(字符串封装到respons对象里),浏览器在渲染 # 前后端 ...

  8. BWO白鲸优化算法

    白鲸算法 ​ 白鲸算法(BWO)是一种新的元启发式算法,是一种基于群体的算法,其灵感来自于白鲸的行为,包括游泳,猎物和鲸落.在BWO的数学模型中构建了勘探,开发和鲸落阶段,并在开发阶段利用Levy飞行 ...

  9. css实现按钮点击水波纹效果和两边扩散效果

    废话少说,先上代码了,复制到html中即可使用 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> & ...

  10. NF-ResNet:去掉BN归一化,值得细读的网络信号分析 | ICLR 2021

    论文提出NF-ResNet,根据网络的实际信号传递进行分析,模拟BatchNorm在均值和方差传递上的表现,进而代替BatchNorm.论文实验和分析十分足,出来的效果也很不错.一些初始化方法的理论效 ...