目錄
1. 屬性動(dòng)畫(huà)
組件的某些通用屬性變化時(shí)，可以通過(guò)屬性動(dòng)畫(huà)實(shí)現(xiàn)漸變過(guò)渡效果，提升用戶體驗(yàn)。
- 支持的屬性包括width、height、backgroundColor、opacity、scale、rotate、translate等。
@Entry
@Component
struct Index {
@State
widthSize: number = 100
@State
heightSize: number = 40
build() {
Column({ space: 15 }) {
Button('元素動(dòng)畫(huà)')
.width(this.widthSize)
.height(this.heightSize)
.onClick(() => {
this.widthSize = 200
this.heightSize = 100
})
.animation({
// 動(dòng)畫(huà)時(shí)間
duration: 1000,
// 執(zhí)行次數(shù)
iterations: -1,
// 動(dòng)畫(huà)曲線
curve: Curve.Ease,
// 延時(shí)時(shí)間
delay: 1000,
// 播放模式
playMode: PlayMode.Alternate
})
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
}
}
2. 顯示動(dòng)畫(huà)
提供全局animateTo顯式動(dòng)畫(huà)接口來(lái)指定由于閉包代碼導(dǎo)致的狀態(tài)變化插入過(guò)渡動(dòng)效。
@Entry
@Component
struct Index {
@State
heightSize: number = 40
build() {
Column() {
Text('一級(jí)菜單')
.height(40)
.onClick(() => {
animateTo({
duration: 200
}, () => {
this.heightSize = this.heightSize === 40 ? 0 : 40
})
})
Column() {
Text('一級(jí)菜單')
.height(this.heightSize)
Text('一級(jí)菜單')
.height(this.heightSize)
}
}
.backgroundColor('#069')
}
}
3. 元素共享轉(zhuǎn)場(chǎng)
當(dāng)路由進(jìn)行切換時(shí)，可以通過(guò)設(shè)置組件的 sharedTransition 屬性將該元素標(biāo)記為共享元素并設(shè)置對(duì)應(yīng)的共享元素轉(zhuǎn)場(chǎng)動(dòng)效。
38.ec831dd9.gif
- Index.ets
import router from '@ohos.router'
@Entry
@Component
struct Index {
build() {
Row({ space: 15 }) {
Column({ space: 10 }){
Image($rawfile('apple.png'))
.width('100%')
.aspectRatio(1)
.sharedTransition('apple', { duration: 500 })
Text('鳴春谷 正宗甘肅特產(chǎn)花牛水果蘋(píng)果 【天水直發(fā)】 4.5-5斤中果A(約13-16個(gè))')
.sharedTransition('text', { duration: 500 })
}
.padding(15)
.width('50%')
.onClick(() => {
router.pushUrl({
url: 'pages/DetailPage'
})
})
}
.width('100%')
}
}
- DetailPage.ets
@Entry
@Component
struct DetailPage {
build() {
Column({ space: 15 }) {
Column({ space: 10 }){
Image($rawfile('apple.png'))
.width('100%')
.aspectRatio(1)
.sharedTransition('apple', { duration: 500 })
Text('鳴春谷 正宗甘肅特產(chǎn)花牛水果蘋(píng)果 【天水直發(fā)】 4.5-5斤中果A(約13-16個(gè))')
.fontSize(18)
.sharedTransition('text', { duration: 500 })
}
.padding(15)
}
.height('100%')
.width('100%')
}
}
4. 拖動(dòng)手勢(shì)-阻尼和磁吸
拖動(dòng)手勢(shì)（PanGesture）
- 拖動(dòng)手勢(shì)用于觸發(fā)拖動(dòng)手勢(shì)事件，滑動(dòng)達(dá)到最小滑動(dòng)距離（默認(rèn)值為5vp）時(shí)拖動(dòng)手勢(shì)識(shí)別成功。
實(shí)現(xiàn)下拉刷新效果：
1.使用 Stack 堆疊下拉刷新容器和列表容器
2.使用手勢(shì)事件 PanGesture 實(shí)現(xiàn)拖動(dòng)列表容器
3.使用 animateTo 實(shí)現(xiàn)磁吸動(dòng)畫(huà)效果
4.拖動(dòng)距離超出閥值，模擬開(kāi)啟加載效果，控制文字顯示和動(dòng)畫(huà)
import promptAction from '@ohos.promptAction'
@Entry
@Component
struct Index {
@State
translateY: number = 0
@State
text: string = '下拉即可刷新'
@State
loading: boolean = false
ease (originValue: number = 0) {
const space = 60
const damp = 0.3
if ( originValue > space ) {
return space + ( originValue - space ) * damp
}
return originValue
}
build() {
Stack({ alignContent: Alignment.Top }) {
Row() {
if (this.loading) {
LoadingProgress()
.width(32)
.aspectRatio(1)
}
Text(this.text)
.fontColor('#999')
.width(100)
}
.height(100)
List() {
}
.backgroundColor('#fff')
.height('100%')
.width('100%')
.translate({ y: this.translateY })
.gesture(
PanGesture()
.onActionUpdate((event: GestureEvent) => {
this.translateY = this.ease(event.offsetY)
if ( this.translateY > 100 ) {
this.text = '釋放立即刷新'
}
})
.onActionEnd((event: GestureEvent) => {
if (this.translateY > 100) {
this.loading = true
this.text = '正在刷新中...'
animateTo({ duration: 300 }, () => {
this.translateY = 100
})
// 加載數(shù)據(jù)
setTimeout(() => {
this.loading = false
this.text = ''
animateTo({ duration: 300, onFinish: () => this.text = '下拉即可刷新' }, () => {
this.translateY = 0
})
promptAction.showToast({ message: '刷新成功' })
}, 2000)
} else {
animateTo({ duration: 300 }, () => {
this.translateY = 0
})
}
})
)
}
.height('100%')
.width('100%')
.backgroundColor('#f3f4f5')
}
}
