如何实现动画转场效果

动画转场效果

HarmonyOS
2024-05-26 12:09:11
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
liqi399

本文主要讲述动画的转场效果,通过路由从页面A跳转到页面B,会存在路由间的页面转场效果,页面B中的组件C、D均存在动画转场效果,想要的效果为页面跳转时,页面转场效果消失,组件C、D的转场效果消失,只有在点击时组件C、D的动画转场效果才出现。

使用的核心API

animation

animateTo

pageTransition

组件内转场

核心代码解释

1. 组件之间的动画转场效果,可直接通过animation和animateTo进行动画的效果,animation和animateTo最大的区别在于animation是属性,而animateTo是函数。

2. 通过使用stack布局,页面跳转后,先将组件C展示在页面上,进行点击后,组件D覆盖组件C,来回依次交替并加上动画效果即可实现组件间的转场效果。

3. 对于页面的转场效果,最主要的是设置pageTransition,对于页面的进入和退出均设置禁止转场即可    PageTransitionExit({ type: RouteType.None, duration: 0 }),PageTransitionEnter({ type: RouteType.None, duration: 0 })

页面A 
import router from '@ohos.router'; 
 
@Entry 
@Component 
struct Index { 
  @State message: string = 'Hello World'; 
 
  build() { 
    Row() { 
      Column() { 
        Button('点我吧') 
          .onClick(()=>{ 
            router.pushUrl({ 
              url:'pages/Page1' 
            }) 
          }) 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
}
页面B 
@Entry 
@Component 
struct ComponentTransition { 
  @State flag: boolean = true; 
  @State value: AnimateParam = { 
    duration: 0, curve: Curve.Linear 
  } 
 
  pageTransition() { 
    PageTransitionExit({ type: RouteType.None, duration: 0 }) 
    PageTransitionEnter({ type: RouteType.None, duration: 0 }) 
  } 
 
  build() { 
    Stack({ alignContent: Alignment.Bottom }) { 
      if (this.flag) { 
        ComponentChild1({ flag: $flag, value: $value }) 
          .transition(TransitionEffect.move(TransitionEdge.END) 
            .animation(this.value)) 
      } 
      if (!this.flag) { 
        ComponentChild2({ flag: $flag }) 
          .transition(TransitionEffect.move(TransitionEdge.END) 
            .animation({ duration: 500, curve: Curve.Linear })) 
      } 
    }.height('100%').width('100%') 
  } 
} 
 
@Component 
struct ComponentChild1 { 
  @Link flag: boolean 
  @Link value: AnimateParam 
 
  build() { 
    Column() { 
      Text('aaa').fontSize('50') 
        .onTouch(() => { 
          this.value = { 
            duration: 1000, curve: Curve.Linear 
          } 
        }) 
        .onClick(() => { 
          animateTo({ duration: 1000 }, () => { 
            this.flag = !this.flag; 
          }) 
        }) 
    }.width('100%').height(('100%')).backgroundColor(Color.White) 
  } 
} 
 
@Component 
struct ComponentChild2 { 
  @Link flag: boolean 
 
  build() { 
    Column() { 
      Image($r('app.media.icon')) 
        .width('100%') 
        .height(200) 
        .onClick(() => { 
          animateTo({ duration: 1000 }, () => { 
            this.flag = !this.flag; 
          }) 
        }) 
    }.width('100%').height(('100%')).backgroundColor(Color.White) 
  } 
}

实现效果

适配的版本信息

IDE:DevEco    Studio 4.0.3.600

SDK:HarmoneyOS    4.0.10.11

分享
微博
QQ
微信
回复
2024-05-27 15:58:19
相关问题
属性动画如何实现宽高动画效果
649浏览 • 1回复 待解决
如何全局设置页面转场动画
328浏览 • 1回复 待解决
文字动画效果如何实现
790浏览 • 0回复 待解决
panGesture结合动画实现fling效果
392浏览 • 1回复 待解决
请问如何去掉ability的转场动画
9792浏览 • 2回复 待解决
鸿蒙中怎么实现动画翻转效果
8924浏览 • 2回复 待解决
ArkUI转场动画可以改颜色吗?
593浏览 • 1回复 待解决
转场动画,谁有好的方案吗?
174浏览 • 1回复 待解决
自定义弹窗自定义转场动画
436浏览 • 1回复 待解决
如何实现星级评分效果
57浏览 • 1回复 待解决
canvas如何实现水印效果
400浏览 • 1回复 待解决
求助动画效果问题有懂的吗?
3001浏览 • 1回复 待解决
鸿蒙如何实现动画值变化
8140浏览 • 1回复 待解决
求教ArkUI如何实现组合动画
4223浏览 • 1回复 待解决
图片模糊效果如何实现
346浏览 • 1回复 待解决
如何等效实现JSONObejct效果
260浏览 • 1回复 待解决
如何通过Progress实现loading效果
41浏览 • 1回复 待解决
如何实现组件水波纹动画案例
444浏览 • 1回复 待解决