卡片点击翻转动效,有人会吗?

卡片点击翻转动效

HarmonyOS
2024-06-11 20:42:49
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
踮脚在树梢上

点击图片进行翻转展示另外一张图片。

实现方案:

使用if进行切换显示图片 结合transition来实现翻转动效。

图形变换:

进行翻转动效需要用到rotate

链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-transformation-0000001815767724

实现过程:

1. 首先要确定卡片该沿哪个方向旋转。

例如本文实现的是沿着矢量(0,1,0)为旋转轴顺时针旋转180度。

2. 另一张图片延同一旋转轴反方向旋转相同度数。

3. transition 必须要和 animateTo 一起使用才能产生组件转场效果。

实现代码:

showAnimationTo(isShow:boolean) { 
  animateTo({ duration: 500, curve: Curve.FastOutSlowIn }, () => { 
    this.isShow = isShow 
  }) 
} 
 
Column() { 
  if (this.isShow) { 
    Image($r('app.media.startIcon')) 
      .width('100%') 
      .height('100%') 
      .borderRadius(30) 
      .transition(TransitionEffect.rotate({ 
        x: 0, 
        y: 1, 
        z: 0, 
        centerX: '50%', 
        centerY: '50%', 
        angle: 180 
      })) 
  } else { 
    Image($r('app.media.foreground')) 
      .width('100%') 
      .height('100%') 
      .borderRadius(30) 
      .backgroundColor(this.iconData.color) 
      .transition(TransitionEffect.rotate({ 
        x: 0, 
        y: 1, 
        z: 0, 
        centerX: '50%', 
        centerY: '50%', 
        angle: -180 
      })) 
  } 
} 
.onClick(() => { 
  this.showAnimationTo(true) 
})
分享
微博
QQ
微信
回复
2024-06-12 17:43:34
相关问题
对象类型检查,有人?求告知
1366浏览 • 1回复 待解决
HarmonyOS 卡片点击事件失效
1585浏览 • 1回复 待解决
HarmonyOS 横竖屏翻转卡顿
1036浏览 • 1回复 待解决
有人知道关于页demo
1653浏览 • 1回复 待解决
服务卡片java如何设置点击事件
11043浏览 • 1回复 待解决
HarmonyOS 字符串翻转如何实现
692浏览 • 1回复 待解决
如何获取windowStage,有人知道
1829浏览 • 1回复 待解决
有人知道发布页demo
1929浏览 • 1回复 待解决
如何实现振动,有人知道
2316浏览 • 2回复 待解决
导包报错,有人知道原因
2243浏览 • 1回复 待解决
clientid相关问题,有人知道
3019浏览 • 1回复 待解决
HarmonyOS 图片水平翻转问题
668浏览 • 1回复 待解决
如何通过卡片点击实现业务登录场景
2443浏览 • 1回复 待解决
HarmonyOS 如何实现旋转动
1428浏览 • 1回复 待解决
HarmonyOS 旋转动画效果
1047浏览 • 1回复 待解决
HarmonyOS 页面跳转动
1124浏览 • 1回复 待解决
charles抓包流程,有人知道
1545浏览 • 1回复 待解决
如何获取系统电量,有人知道
3074浏览 • 1回复 待解决