HarmonyOS interface router scale pageTransition SlideEffect.Left ArkTS ArkUI

沐叔2024-05-24 9:09

🎬️create

typescript 复制代码

@Component
export  default struct TitleBar {
   build(){
     Row(){
       Text('transition')
         .fontSize('30fp')
         .fontColor(Color.White)
     }
     .width('100%')
     .height('8%')
     .backgroundColor('#4169E1')
     .padding({left:10})

   }

}

🎞️interface

typescript 复制代码

export  interface IList{
  title:string;
  url :string;
}

typescript 复制代码

  @State listData:IList[]=[ //  @State listData:Array<IList>=[
    {
      title:'in',
      url:'pages/home1'
    },
    {
    title:'scale',
    url:'pages/home2'
    },
    {
      title:'small',
      url:'pages/home3'
    },
    {
      title:'in',
      url:''
    }
  ]

💡foreach

typescript 复制代码

   ForEach(this.listData,( item: IList,index?:number)=>{

          //listitem
          Button({type:ButtonType.Capsule}){
            Text(item.title)
              .fontSize('35fp')
              .fontColor(Color.White)
          }
          //...
          })

🔦router

typescript 复制代码

import router from '@ohos.router'

📼mainpage

typescript 复制代码

  "pages/home1"

📹️onclick

typescript 复制代码

 .onClick(()=>{
            //router
            router.pushUrl({url:item.url})
          })

📺️setInterval

typescript 复制代码

//home1  page1
import  router from '@ohos.router'
@Entry
@Component
struct Index {

  @State TOTAL_TIME:number = 6;//s
  @State FIRST_CT:number =3;//s

  aboutToAppear(){
    //timer
   let timer=   setInterval(()=>{
      this.TOTAL_TIME--;
      if(this.TOTAL_TIME===0){
        //end
        router.pushUrl({
          url:"pages/Index"
        })
        clearInterval(timer);
      }
    },1000)
  }


  build() {

      Column() {
        Row() {
          if(this.TOTAL_TIME>this.FIRST_CT){
              //1
            Image($r('app.media.t2'))
              .objectFit(ImageFit.Contain)
          }else if(this.TOTAL_TIME<this.FIRST_CT) {
              //2
            Image($r('app.media.bc'))
              .objectFit(ImageFit.Contain)
              .width('30%')
            Text(' - m - ')
              .fontSize('30fp')
          }

        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)

          // Text('in')
          //   .fontSize('50fp')
      }
      .width('100%')


  }
}

📽️TransitionEnter scale

typescript 复制代码

//home2 page2
  @State scale1: number = 1
  @State opacity1: number = 1
//...
   Column()
.scale({ x: this.scale1 }).opacity(this.opacity1)
//...
 pageTransition() {
    PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
      .onEnter((type: RouteType, progress: number) => {
        this.scale1 = 1
        this.opacity1 = progress
      }) // onEnter (0% -- 100%)
    PageTransitionExit({ duration: 1500, curve: Curve.Ease })
      .onExit((type: RouteType, progress: number) => {
        this.scale1 = 1 - progress
        this.opacity1 = 1
      }) // onExit (0% -- 100%)
  }

🎥SlideEffect.Left

typescript 复制代码

  pageTransition() {
    PageTransitionEnter({ duration: 1200 })
      .slide(SlideEffect.Left)
    PageTransitionExit({ delay: 100 })
      .translate({ x: 100.0, y: 100.0 })
      .opacity(0)
  }