HarmonyOS 页面转场时,页面要模糊

页面转场时,页面要逐渐模糊。代码在 entry模块的 pages/MainPage 和 pages/MarketPage,这两个页面做转场。进入和退出都要有模糊效果。

退出时,缩回去,最后图标也要由模糊慢慢变清晰。

HarmonyOS
2025-01-09 14:32:59
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
fox280

可以参考如下代码,使用blur属性控制模糊效果,可参考

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-image-effect-V5

@State blurNum: number = 0
PageTransitionEnter({
  type: RouteType.Push,
  duration: Const.OPEN_CLOSE_SCALE_DURATION,
  // 要满足前后两个动画平滑过度,
  // 记前一个贝塞尔曲线P2点为P2,后一个贝塞尔曲线P1点为P1'
  // 假设前后两个动画的时长分别为t1、t2
  // 则加上时间后的表达式应满足:(-P2+1)t1=P1't2
  // => P2t1 + P1't2 = t1
  curve: curves.cubicBezierCurve(0.1, 0.1, 0.40, 1.0)
})
  .scale({
    x: this.x,
    y: this.x,
    // x: 0.3,
    // y: 0.3,
    z: 0,
    centerX: this.centerX,
    centerY: this.centerY,
  })
  .onEnter((type, number) => [
    this.blurNum = (1 - number) * 10
  ])
PageTransitionExit({
  type: RouteType.Pop,
  duration: Const.OPEN_CLOSE_SCALE_DURATION,
  // curve: Curve.EaseOut
  curve: curves.cubicBezierCurve(0.0, 0.0, 0.8, 0.8)
})
  .scale({
    x: this.x,
    y: this.x,
    // x: 0.3,
    // y: 0.3,
    z: 0,
    centerX: this.centerX,
    centerY: this.centerY,
  })
  .onExit((type, number) => {
    this.blurNum = number * 10
  })


build() {
  Column() {
  }
  .blur(this.blurNum)
  .height('100%')
  .width('100%')
  .backgroundColor(Color.White)
  .renderFit(RenderFit.RESIZE_CONTAIN)
}
分享
微博
QQ
微信
回复
2025-01-09 16:54:13
相关问题
HarmonyOS 页面内的组件转场动画
706浏览 • 1回复 待解决
HarmonyOS Refresh和页面转场动画demo
292浏览 • 1回复 待解决
如何全局设置页面转场动画
884浏览 • 1回复 待解决
半模态转场来实现弹框样式的页面
1262浏览 • 1回复 待解决