如何实现自定义应用入场动画

当用户打开某个应用时,应用得到响应,与此同时其在屏幕中所渲染的第一个画面通常是它的入场动画。当然,应用响应后所抛出的不一定是动画,它也可以是一个静态的页面,不过不论是动画还是静态页面,它们所起到的功能是相同的——在后台完成应用中的重要模块的初始化,贴出开发团队的logo。

HarmonyOS
2024-05-26 16:21:42
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
pfuchenlu

使用的核心API

Image

核心代码解释

1.增添一个新的Image件和一个新的Text组件,并填充它们的UI属性,相关代码如下

@Entry 
@Component 
struct First { 
   
  build() { 
    Row() { 
      Column() { 
  
       // 增加一个新的image件和一个新的Text组件 
         Image($r('app.media.app_icon')) 
          .height(120) 
          .width(120) 
  
        Text('Brunhild') 
          .fontSize(20) 
          .fontWeight(FontWeight.Bold) 
          .margin({ 
            top:7 
          }) 
  
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
}

2.接下来,为组件添加关键属性。

首先,定义变量 app_Logo,同时设置Image组件的translate属性和animation属性。

@Entry 
@Component 
struct First { 
         ...... 
  @State app_Logo:number = -200    //定义一个用@state修饰的number型变量app_Logo 
  
  build() { 
    Row() { 
      Column() { 
  
        //删除页面初始化时默认带有的Text组件, 增加一个新的image件和一个新的Text组件 
  
        Image($r('app.media.app_icon')) 
          .height(120) 
          .width(120) 
          //添加关键属性 
          .translate({ 
            y:this.app_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 app_Title:number = 200    //定义一个用@state修饰的number型变量app_Title 
  
  build() { 
    Row() { 
      Column() { 
        ...... 
        Text('Brunhild') 
          .fontSize(20) 
          .fontWeight(FontWeight.Bold) 
          .margin({ 
            top:7 
          }) 
          //添加关键属性 
          .translate({ 
            y:this.app_Title 
          }) 
          .animation({ 
            delay:500, 
            duration:2000, 
            curve:Curve.FastOutSlowIn, 
            tempo:1, 
          }) 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
}

最后,为Text组件添加onAppear回调。onAppear可以被理解为一个事件监听器,当一个绑定了onAppear的组件装载于显示器时,onAppear回调将被触发,执行onAppear()中所传入的操作语句。

import router from '@ohos.router';     //导入router模块 
  
@Entry 
@Component 
struct First { 
  @State app_Logo:number = -200    //定义一个用@state修饰的number型变量app_Logo 
  @State app_Title:number = 200    //定义一个用@state修饰的number型变量app_Title 
  
  build() { 
    Row() { 
      Column() { 
        //删除页面初始化时默认带有的Text组件, 增加一个新的image件和一个新的Text组件 
        Image($r('app.media.app_icon')) 
          .height(120) 
          .width(120) 
            //添加关键属性 
          .translate({ 
            y:this.app_Logo 
          }) 
          .animation({ 
            //播放时长(ms) 
            duration:2000, 
            //播放速度 
            tempo:1, 
            //播放曲线,所选择的是‘快出慢入’ 
            curve:Curve.FastOutSlowIn, 
            //延迟(ms) 
            delay:500, 
            //循环次数(-1为无限循环) 
            iterations:1, 
            //播放模式 
            playMode:PlayMode.Normal 
          }) 
  
        Text('HuaWei') 
          .fontSize(20) 
          .fontWeight(FontWeight.Bold) 
          .margin({ 
            top:7 
          }) 
            //添加关键属性 
          .translate({ 
            y:this.app_Title 
          }) 
          .animation({ 
            delay:500, 
            duration:2000, 
            curve:Curve.FastOutSlowIn, 
            tempo:1, 
          }) 
            //增加onAppear回调 
          .onAppear(()=>{ 
            //改变属性参数 
            this.app_Logo = 0 
            this.app_Title = 0 
  
            //设置定时器 
            let id = setInterval(()=>{ 
              //打印日志 
              console.info('router to Second') 
              //页面跳转 
              router.pushUrl({ 
                url:'pages/Second' 
              }) 
              //定时器执行之后立即销毁 
              clearInterval(id) 
            },4000,[]) 
          }) 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
}
分享
微博
QQ
微信
回复
2024-05-27 21:47:51
相关问题
自定义弹窗自定义转场动画
436浏览 • 1回复 待解决
refresh期望能够自定义loading动画
620浏览 • 1回复 待解决
弹窗打开、关闭动画是否支持自定义
819浏览 • 1回复 待解决
如何实现H5自定义事件
833浏览 • 1回复 待解决
自定义如何实现序列化
740浏览 • 1回复 待解决
如何自定义Component 属性
13506浏览 • 3回复 待解决
如何访问自定义文件?
355浏览 • 1回复 待解决
自定义弹窗如何嵌套使用
498浏览 • 1回复 待解决
如何自定义组件原型菜单
455浏览 • 1回复 待解决
如何自定义模拟Tabs组件
411浏览 • 1回复 待解决
ArkTs如何自定义容器组件?
1727浏览 • 1回复 待解决
如何实现一个自定义样式的toast提示
683浏览 • 1回复 待解决
自定义组件如何导出、引入?
963浏览 • 1回复 待解决
如何设置自定义弹窗位置
790浏览 • 1回复 待解决