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

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

HarmonyOS

十根玉米

2024-05-26 16:21:42

浏览

回答 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%') 
  } 
}

2024-05-27 21:47:51

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

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

订阅鸿蒙技术特刊，精选内容抢先看