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

卡片点击翻转动效

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
相关问题
对象类型检查,有人?求告知
690浏览 • 1回复 待解决
服务卡片java如何设置点击事件
9567浏览 • 1回复 待解决
HarmonyOS 如何实现旋转动
453浏览 • 1回复 待解决
如何通过卡片点击实现业务登录场景
1752浏览 • 1回复 待解决
HarmonyOS能否监听到设备翻转
413浏览 • 1回复 待解决
点击服务卡片如何跳转至指定的页面
2276浏览 • 1回复 待解决
有人知道关于页demo
774浏览 • 1回复 待解决
鸿蒙中怎么实现动画翻转效果
10520浏览 • 2回复 待解决
有人知道社区怎么预约直播
2920浏览 • 1回复 已解决
有人知道
666浏览 • 1回复 待解决
有人知道JS menu如何隐藏
4537浏览 • 1回复 待解决
taskpool 使用问题,有人知道
899浏览 • 1回复 待解决
webview组件demo ,有人知道
806浏览 • 1回复 待解决
如何保存faultLogger ,有人知道
636浏览 • 1回复 待解决
有人知道
234浏览 • 1回复 待解决
如何跳出ForEach,有人知道
2078浏览 • 1回复 待解决
SnapShot定位,有人知道怎么处理
992浏览 • 1回复 待解决
如何发送短信,有人知道?
1930浏览 • 1回复 待解决