🎬️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)
}
