基于ArkTS的运行入场动画
本期笔者将以一个轻量Demo的开发流程为例,与笔者独特探求如何利于ArkTS消费运行的入场动画。
接着,在工程文件目录中关上目录:Demo/entry/src/resources/base/profile/main_pages,参与Second页面的门路消息。留意,字符串'pages/Index’前面的逗号不能漏写。
@Entry@Componentstruct Index {@State message: string = '主页面'build() {Row() {Column() {Text(this.message).fontSize(40).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%').backgroundColor('#F1F1F1')}}
理想上,这段代码来自于Index.ets, 咱们只不过是将Index.ets的代码拷贝至Second.ets中后,修正了变量message的初值,并改换了页面的背风景。因为Second.ets所治理的页面在此次的开发案例中不是主角,所以咱们繁难设计一下它的UI就足够了。
参与图片资源
Before coding,咱们须要参与一份图片资源到工程的指定目录内。
在工程文件目录中关上目录:Demo/entry/src/main/resources/rawfile, 参与一张恣意的图片(可以在IDE中将待参与的图片资源间接粘贴至rawfile目录下,也可以在文件资源治理器中经过文件门路关上rawfile目录并参与图片资源),将其命名为logo1。当然,图片的格局没有要求,只需在之后的步骤中能被正确援用即可。
在编辑器中关上Index.ets(此页面将作为入场页面), 删除Column组件内关于Text组件的代码块,削减一个新的Image件和一个新的Text组件,并填充它们的UI属性,关系代码如下。其中,新增的Image组件所援用的图片资源是上一个步骤中所参与的logo1.jpg。
@Entry@Componentstruct First {@State message: string = 'Hello World'build() {Row() {Column() {//删除页面初始化时自动带有的Text组件, 参与一个新的image件和一个新的Text组件Image($rawfile('logo1.jpg')).height(120).width(120)Text('Brunhild').fontSize(20).fontWeight(FontWeight.Bold).margin({top:7})}.width('100%')}.height('100%')}}
至此,咱们已成功对Index.ets的页面UI绘制。接上去,咱们须要为这两个新添的组件设置与属性动画无关的属性。属性动画(animation)是ArkUI提供的最基础和罕用的动画性能之一,它的性能逻辑是,当组件的规划属性(譬如位置,大小,背风景彩)出现变动时,组件会依照已设置好的动画参数,从原有的规划形态过渡到变动后的规划形态,而这个过渡的拟延续环节便是用户所见到的动画。在这个基础上,咱们可以制造一个繁难的运行入场动画成果。
所触及的两个关键属性区分是translate属性和animation属性。
理想上,系统为每个被渲染的组件都设置属于它的相对坐标系。这个坐标系是一个平面直角坐标系,并且,相关于屏幕,X坐标轴正方向水平向右,Y坐标轴正方向竖直向下。当一个组件的translate属性被设置时,它的实践位置会跟着translate属性而偏移。比如,一个原本位于屏幕中央的组件,更改其translate属性为{x:100,y:0}后,其位置会相对屏幕中央往右平移100px。
animation属性的可供设置的参数如下所示,每个参数都会在不同维度影响动画的最终成果
/*** Animation duration, in ms.* @since 7*//*** Animation duration, in ms.* @form* @since 9*/duration?: number;/*** Animation playback speed. A larger value indicates faster animation playback, and a smaller value indicates slower* animation playback. The value 0 means that there is no animation.* @since 7*/tempo?: number;/*** Animation curve.* @type { string | Curve}* @since 7*//*** Animation curve.* @type { string | Curve | ICurve}* @form* @since 9*/curve?: Curve | string | ICurve;/*** Animation playback mode. By default, the animation is played from the beginning after the playback is complete.* @since 7*/delay?: number;/*** Animation playback mode. By default, the animation is played from the beginning after the playback is complete.* @since 7*/iterations?: number;/*** Animation playback mode. By default, the animation is played from the beginning after the playback is complete.* @since 7*//*** Animation playback mode. By default, the animation is played from the beginning after the playback is complete.* @form* @since 9*/playMode?: PlayMode;/*** Callback invoked when the animation playback is complete.* @since 7*//*** Callback invoked when the animation playback is complete.* @form* @since 9*/onFinish?: () => void;
接上去,咱们为组件参与关键属性。
首先,定义变量translateY_Logo,同时设置Image组件的translate属性和animation属性。
@Entry@Componentstruct First {......@State translateY_Logo:number = -200//定义一个用@state润色的number型变量translateY_Logobuild() {Row() {Column() {//删除页面初始化时自动带有的Text组件, 参与一个新的image件和一个新的Text组件Image($rawfile('logo1.jpg')).height(120).width(120)//参与关键属性.translate({y:this.translateY_Logo}).animation({//播放时长(ms)duration:2000,//播放速度tempo:1,//播放曲线,所选用的是‘快出慢入’curve:Curve.FastOutSlowIn,//提前(ms)delay:500,//循环次数(-1为有限循环)iterations:1,//播放形式playMode:PlayMode.Normal})......}.width('100%')}.height('100%')}}
接着,定义变量translateY_Title,同时设置Text组件的translate属性和animation属性。
@Entry@Componentstruct First {......@State translateY_Title:number = 200//定义一个用@state润色的number型变量translateY_Titlebuild() {Row() {Column() {//删除页面初始化时自动带有的Text组件, 参与一个新的image件和一个新的Text组件......Text('Brunhild').fontSize(20).fontWeight(FontWeight.Bold).margin({top:7})//参与关键属性.translate({y:this.translateY_Title}).animation({delay:500,duration:2000,curve:Curve.FastOutSlowIn,tempo:1,})}.width('100%')}.height('100%')}}
页面起始形态的成果如下,可以看到,设置translate属性后,Image组件往Y轴负方向偏移,Text组件则往Y轴正方向偏移。
最后,咱们为Text组件参与onAppear回调。onAppear可以被了解为一个事情监听器,当一个绑定了onAppear的组件装载于显示器时,onAppear回调将被触发,口头onAppear()中所传入的操作语句。换句话说,Text组件在参与onAppear属性后,当此Text组件出现时(笔者也不分明这个出现是如何定义的),onAppear立刻触发,口头已写入的函数参数(即λ表白式中的内容)。
在如下代码中,笔者为Text组件参与了onAppear回调,导入了router模块,并写入了关系操作语句:首先,扭转Image组件和Text组件的translate属性,激活属性动画;之后,设置定时器(每4秒口头一次性),使得系统在属性动画完结后口头页面跳转(跳转至Second页面);最后,销毁先前设置的定时器。
import router from '@ohos.router';//导入router模块@Entry@Componentstruct First {......@State translateY_Title:number = 200//定义一个用@state润色的number型变量translateY_Titlebuild() {Row() {Column() {//删除页面初始化时自动带有的Text组件, 参与一个新的image件和一个新的Text组件......Text('Brunhild').fontSize(20).fontWeight(FontWeight.Bold).margin({top:7})//参与关键属性.translate({y:this.translateY_Title}).animation({delay:500,duration:2000,curve:Curve.FastOutSlowIn,tempo:1,})//参与onAppear回调.onAppear(()=>{//扭转属性参数this.translateY_Logo = 0this.translateY_Title = 0//设置定时器let id = setInterval(()=>{//打印日志console.info('router to Second')//页面跳转router.pushUrl({url:'pages/Second'})//定时器口头之后立刻销毁clearInterval(id)},0,[])})}.width('100%')}.height('100%')}}
至此,一个关于入场动画的Demo便成功了。