【木棉花】基于ArkTS的应用入场动画 原创 精华

木棉花_小蓝
发布于 2023-10-13 22:07
浏览
0收藏

前言

相信读者对应用入场动画并不陌生。当用户打开某个应用时,应用得到响应,与此同时其在屏幕中所渲染的第一个画面通常是它的入场动画。当然,应用响应后所抛出的不一定是动画,它也可以是一个静态的页面,不过不论是动画还是静态页面,它们所起到的功能是相同的——在后台完成应用中的重要模块的初始化,贴出开发团队的slogen,亦或展示一些甲方的产品推广广告。

本期笔者将以一个轻量Demo的开发流程为例,与笔者共同探索如何利于ArkTS生产应用的入场动画。


【木棉花】基于ArkTS的应用入场动画-鸿蒙开发者社区

正文

创建工程

打开DevEco Studio(开发工具的版本必须支持API9),创建一个新的project,相关勾选如下


【木棉花】基于ArkTS的应用入场动画-鸿蒙开发者社区


【木棉花】基于ArkTS的应用入场动画-鸿蒙开发者社区

添加新页面

成功创建工程后,在工程文件目录中打开目录:Demo/entry/src/main/ets/pages, 接着右击page,选择New>TypeScript ArkTS File, 创建一个新的ArkTS文件,并将其命名为Second


【木棉花】基于ArkTS的应用入场动画-鸿蒙开发者社区


【木棉花】基于ArkTS的应用入场动画-鸿蒙开发者社区


接着,在工程文件目录中打开目录:Demo/entry/src/resources/base/profile/main_pages,添加Second页面的路径信息。注意,字符串'pages/Index’后面的逗号不能漏写。


【木棉花】基于ArkTS的应用入场动画-鸿蒙开发者社区


编写新页面的UI

在编辑器中打开新创建的Second.ets,添加如下代码:

@Entry
@Component
struct 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就足够了。

Second.ets的最终预览效果如下:


【木棉花】基于ArkTS的应用入场动画-鸿蒙开发者社区

编写入场页面的UI

加入图片资源

Before coding,我们需要添加一份图片资源到工程的指定目录内。

在工程文件目录中打开目录:Demo/entry/src/main/resources/rawfile, 添加一张任意的图片(可以在IDE中将待添加的图片资源直接粘贴至rawfile目录下,也可以在文件资源管理器中通过文件路径打开rawfile目录并添加图片资源),将其命名为logo1。当然,图片的格式没有要求,只要在之后的步骤中能被正确引用即可。


【木棉花】基于ArkTS的应用入场动画-鸿蒙开发者社区

添加组件

在编辑器中打开Index.ets(此页面将作为入场页面), 删除Column组件内关于Text组件的代码块,增添一个新的Image件和一个新的Text组件,并填充它们的UI属性,相关代码如下。其中,新增的Image组件所引用的图片资源是上一个步骤中所添加的logo1.jpg。


@Entry
@Component
struct 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%')
  }
}

预览器效果如下

【木棉花】基于ArkTS的应用入场动画-鸿蒙开发者社区


至此,我们已完成对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
@Component
struct First {
  
 	 ......

  @State translateY_Logo:number = -200    //定义一个用@state修饰的number型变量translateY_Logo

  build() {
    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
@Component
struct First {

		......

  @State translateY_Title:number = 200    //定义一个用@state修饰的number型变量translateY_Title

  build() {
    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轴正方向偏移


【木棉花】基于ArkTS的应用入场动画-鸿蒙开发者社区


最后,我们为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
@Component
struct First {

		......

  @State translateY_Title:number = 200    //定义一个用@state修饰的number型变量translateY_Title

  build() {
    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 = 0
            this.translateY_Title = 0
            
            //设置定时器
            let id = setInterval(()=>{
            	//打印日志
              console.info('router to Second')
              //页面跳转
              router.pushUrl({
                url:'pages/Second'
              })
              //定时器执行之后立即销毁
              clearInterval(id)
            },4000,[])
          })


      }
      .width('100%')
    }
    .height('100%')
  }
}


至此,一个关于入场动画的Demo便完成了。

预览效果如下


【木棉花】基于ArkTS的应用入场动画-鸿蒙开发者社区

结语

ArkTS的动画开发无疑是非常有趣的,如果读者想开发更加复杂的动画效果,不妨参考ArkTS的官方API文档,学习和玩转更多新奇的用法。文章所述仅代表个人理解,如有不足恳请读者不吝赐教。

【木棉花】基于ArkTS的应用入场动画-鸿蒙开发者社区


©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
Demo_51CTO_Animation.zip 477.55K 17次下载
已于2023-10-26 17:01:41修改
4
收藏
回复
举报
4条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

看动画效果很流畅

回复
2023-10-14 15:41:37
麻辣香锅配馒头
麻辣香锅配馒头

比文档讲的明了

回复
2023-10-16 10:14:08
wx5fbdcd61ccc0a
wx5fbdcd61ccc0a

你好,文章可以转载吗?转载平台是软件绿色联盟微信公众号,会在文末标准文章来源、作者、及原文链接

回复
2023-10-18 10:39:50
木棉花_小蓝
木棉花_小蓝

可以的

回复
2023-10-18 13:34:54
回复
    相关推荐