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

卡片点击翻转动效

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
相关问题
对象类型检查,有人?求告知
566浏览 • 1回复 待解决
HarmonyOS 如何实现旋转动
304浏览 • 1回复 待解决
服务卡片java如何设置点击事件
9432浏览 • 1回复 待解决
如何通过卡片点击实现业务登录场景
1676浏览 • 1回复 待解决
点击服务卡片如何跳转至指定的页面
2178浏览 • 1回复 待解决
HarmonyOS 页面跳转动
125浏览 • 1回复 待解决
有人知道关于页demo
703浏览 • 1回复 待解决
鸿蒙手表支持服务卡片
8419浏览 • 2回复 待解决
api6如何实现点击桌面卡片弹出提示
3059浏览 • 1回复 待解决
HarmonyOS能否监听到设备翻转
306浏览 • 1回复 待解决
有人知道发布页demo
764浏览 • 1回复 待解决
clientid相关问题,有人知道
1703浏览 • 1回复 待解决
如何获取windowStage,有人知道
366浏览 • 1回复 待解决
如何实现振动,有人知道
1102浏览 • 2回复 待解决
导包报错,有人知道原因
1005浏览 • 1回复 待解决
如何保存faultLogger ,有人知道
546浏览 • 1回复 待解决
如何发送短信,有人知道?
1841浏览 • 1回复 待解决
webview组件demo ,有人知道
747浏览 • 1回复 待解决
如何跳出ForEach,有人知道
1949浏览 • 1回复 待解决