【鸿蒙ArkUI实战开发】基于ArkUI的动效能力

最新推荐文章于 2024-10-26 10:58:15 发布

「已注销」

最新推荐文章于 2024-10-26 10:58:15 发布

阅读量929

点赞数 20

分类专栏：移动开发鸿蒙开发 HarmonyOS 文章标签： harmonyos 开源 c语言组件化开发 arkts ArkUI 自定义控件

本文链接：https://blog.csdn.net/HarmonyOSMN/article/details/140359154

版权

场景一：使用属性动画完成登录的动效

效果图

方案

控制输入框的宽度和显隐状态实现第一段动画，输入框的缩放动画完成后onFinish隐藏输入框，同时展示加载动画。

核心代码


Column() {

LoadingProgress()

.width(60)

.height(60)

}

.width(80)

.height(80)

.borderRadius(40)

.backgroundColor(Color.White)

.justifyContent(FlexAlign.Center)

.position({ x: 90, y: 0 })

.opacity(this.loadingOpacity)

.animation({

duration: 300,

playMode: PlayMode.Alternate,

expectedFrameRateRange: {

min: 20,

max: 120,

expected: 90,

}

})

TextInput({ text: $$this.username, placeholder: "请输入用户名", controller: this.controller })

.placeholderColor("#D4D3D1")

.backgroundColor("#ffffff")

.width(this.inputWidth)

.height(40)

.visibility(this.inputVisibility)

.border({

width: {

left: 0,

right: 0,

top: 0,

bottom: 1

},

color: { bottom: Color.Gray },

radius: { topLeft: this.inputRadius, topRight: this.inputRadius },

style: { bottom: BorderStyle.Solid }

})

.id("username")

.defaultFocus(true)

.animation({

duration: 300,

playMode: PlayMode.Alternate,

onFinish: () => {

if (this.isLogin) {

this.inputVisibility = Visibility.Hidden;

this.loadingOpacity = 1;

this.isLogin = false;

}

},

expectedFrameRateRange: {

min: 20,

max: 120,

expected: 90,

}

})

场景二：使用Navigation完成不同的转场动画。

效果图

方案

配置完自定义的转场动画，然后将name指定的NavDestination页面信息入栈。

核心代码


// PageOne.ets

Button('动画1', { stateEffect: true, type: ButtonType.Capsule })Button('动画0', { stateEffect: true, type: ButtonType.Capsule })

.width('80%')

.height(40)

.margin(20)

.onClick(() => {

CustomTransition.getInstance().registerNavParam(this.pageId, (isPush: boolean, isExit: boolean) => {

}, (isPush: boolean, isExit: boolean)=> {

}, (isPush: boolean, isExit: boolean) => {

}, 200);

this.pageInfos.pushPathByName('pageTwo', null) //将name指定的NavDestination页面信息入栈，传递的数据为param

})

Button('动画1', { stateEffect: true, type: ButtonType.Capsule })

.width('80%')

.height(40)

.margin(20)

.onClick(() => {

CustomTransition.getInstance().registerNavParam(this.pageId, (isPush: boolean, isExit: boolean) => {

this.myScale = isExit ? 1 : 1.2;

}, (isPush: boolean, isExit: boolean)=> {

this.myScale = isExit ? 1.2 : 1;

}, (isPush: boolean, isExit: boolean) => {

this.myScale = 1;

}, 200);

this.pageInfos.pushPathByName('pageThree', null) //将name指

最低0.47元/天解锁文章