OpenHarmony3.1中的轉場動畫
作者：蒙娜麗寧
本文會學習如何設置OpenHarmony的轉場動畫，主要包括頁面的轉場動畫和組件的轉場動畫。
本文會學習如何設置OpenHarmony的轉場動畫，主要包括頁面的轉場動畫和組件的轉場動畫。所謂轉場動畫，是指在兩個頁面之間切換或組件顯示/隱藏等操作時以動畫效果展現。下圖是本文案例的主界面。點擊每一個按鈕，會展示特定的轉場動畫。
1、底部滑入動畫
這種動畫效果可以讓A頁面切換到B頁面時，B頁面從底端往上展現。這是通過slide方法設置的動畫效果，代碼如下：
pageTransition() {
// 頁面入場組件：SlideEffect.Bottom 設置到入場時表示從下邊滑入，出場時表示滑出到下邊。
PageTransitionEnter({ duration: 600, curve: Curve.Smooth })
.slide(SlideEffect.Bottom)
// 頁面退場組件：SlideEffect.Bottom 設置到入場時表示從下邊滑入，出場時表示滑出到下邊。
PageTransitionExit({ duration: 600, curve: Curve.Smooth })
.slide(SlideEffect.Bottom)
}
動畫完成，會顯示下圖的頁面：
2、頁面自定義轉場1
下面的代碼可以通過不同的特效方法自定義轉場動畫，例如，通過opacity方法設置透明度動畫，通過scale方法設置縮放動畫。這段代碼讓頁面進場時透明度從0.2變到1，尺寸比例從0（未顯示）變到原始大小（1）。
pageTransition() {
// 頁面入場組件
PageTransitionEnter({ duration: 600, curve: Curve.Smooth })
.opacity(0.2) //入場時候透明度從0.2到1
.scale({ x: 0, y: 0 }) //入場時x、y軸縮放從0變化到1
// 頁面退場組件
PageTransitionExit({ duration: 600, curve: Curve.Smooth })
.translate({ x: 500, y: 500 }) //退場時x、y軸的偏移量為500
}
動畫完成，會顯示下圖的頁面：
3、頁面自定義轉場2
這也是一種自定義轉場動畫，用來控制Image組件的透明度。當入場時，Image的透明度會從0變到1（逐漸顯示），退場時Image的透明度會從1變到0（逐漸消失）。
@Entry
@Component
struct FullCustomTransition {
@State myProgress: number = 1
build() {
Stack() {
Image($rawfile('image1.jpg'))
.objectFit(ImageFit.Cover)
.width('100%')
.height('100%')
}
.width('100%')
.height('100%')
.opacity(this.myProgress)
.scale({ x: this.myProgress, y: this.myProgress })
.rotate({ x: 0, y: 0, z: 1, angle: 360 * this.myProgress })
}
pageTransition() {
// 頁面入場組件： 進場過程中會逐幀觸發onEnter回調，入參為動效的歸一化進度(0% -- 100%)
PageTransitionEnter({ duration: 800, curve: Curve.Smooth })
.onEnter((type: RouteType, progress: number) => {
this.myProgress = progress // 頁面入場式myProgress從0變化到1
})
// 頁面退場組件： 進場過程中會逐幀觸發onExit回調，入參為動效的歸一化進度(0% -- 100%)
PageTransitionExit({ duration: 800, curve: Curve.Smooth })
.onExit((type: RouteType, progress: number) => {
this.myProgress = 1 - progress //頁面退場式myProgress從1變化到0
})
}
}
動畫完成，會顯示下圖的頁面：
4、組件內轉場
這種動畫是針對組件的，而不是針對頁面的。既然是針對組件的，就需要對組件調用transition方法。下面的代碼對組件完成了插入和刪除動畫，也就是組件添加時x、y軸縮放從0.5變化到1，透明度從0到1。 組件移除時沿y軸旋轉360度，x、y軸縮放從1變化到0。完整的實現代碼如下：
@Component
struct ComponentItem {
build() {
Stack({ alignContent: Alignment.Center }) {
Image($rawfile('image3.png'))
.objectFit(ImageFit.Cover)
.width('100%')
.height(120)
.borderRadius(15)
}
.height(120)
.borderRadius(15)
.width('80%')
.padding({ top: 20 })
// 組件添加時x、y軸縮放從0.5變化到1，透明度從0到1
.transition({ type: TransitionType.Insert, scale: { x: 0.5, y: 0.5 }, opacity: 0 })
// 組件移除時沿y軸旋轉360度，x、y軸縮放從1變化到0，
.transition({ type: TransitionType.Delete, rotate: { x: 0, y: 1, z: 0, angle: 360 }, scale: { x: 0, y: 0 } })
}
}
@Entry
@Component
struct ComponentTransition {
@State private isShow: boolean= false
build() {
Column() {
if (this.isShow) {
ComponentItem()
}
ComponentItem()
Button("Toggle")
.onClick(() => {
//執行動效，動效時長600ms
animateTo({ duration: 600 }, () => {
this.isShow = !this.isShow;
})
})
.height(45)
.width(200)
.fontColor(Color.Black)
.backgroundColor('rgb(181,222,224)')
.margin({ top: 20 })
}
.padding({ left: 20, right: 20 })
.backgroundColor('#FFECECEC')
.height('100%')
.width('100%')
}
}
當點擊按鈕時，顯示按鈕的效果如下圖所示。
5、共享元素轉場
所有共享元素，就是指一個元素（組件）看起來屬于頁面A，又屬于頁面B，這個元素就成為共享元素。典型的應用按鈕是共享元素一開始以小圖顯示，然后點擊，會在整個頁面顯示。下圖是小圖的效果。
點擊后,會整屏顯示,效果如下圖所示:
這個功能由兩個ets文件完成，其中ShareItem.ets是小圖的，代碼如下，其中共享元素轉場屬性通過sharedTransition方法設置。
mport router from '@system.router'
@Entry
@Component
struct ShareItem {
build() {
Flex() {
Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
Stack() {
Image($rawfile('image2.jpg'))
// 設置共享元素轉場屬性
.sharedTransition('imageId', { duration: 600, curve: Curve.Smooth, delay: 100 })
.onClick(() => {
router.push({ uri: 'pages/SharePage' })
})
.objectFit(ImageFit.Cover)
.height('100%')
.width('100%')
.borderRadius(15)
}
.height('100%')
.width('100%')
Text('點擊查看共享元素轉場動效')
.fontSize(20)
.fontColor(Color.Black)
.fontWeight(FontWeight.Regular)
.margin({ left: 10, right: 10 })
}
.height(120)
.backgroundColor('rgb(181,222,224)')
.borderRadius(15)
.margin({ top: 20 })
}
.width('100%')
.padding({ left: 16, right: 16 })
.backgroundColor('#FFECECEC')
}
}
另外一個頁面是SharePage，用于顯示大圖，代碼如下，點擊圖像，同樣可以切換回小圖（ShareItem）。
@Entry
@Component
struct SharePage {
build() {
Stack() {
Image($rawfile('image2.jpg'))
// 設置共享元素轉場屬性
.sharedTransition('imageId', { duration: 1000, curve: Curve.Smooth, delay: 100 })
.objectFit(ImageFit.Cover)
.width('100%')
.height('100%')
}
.width('100%')
.height('100%')
}
}
責任編輯：jianghua
來源：
鴻蒙社區
