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

卡片点击翻转动效

HarmonyOS
2024-06-11 20:42:49
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
blue76

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

实现方案:

使用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
相关问题
对象类型检查,有人?求告知
227浏览 • 1回复 待解决
服务卡片java如何设置点击事件
7977浏览 • 1回复 待解决
如何通过卡片点击实现业务登录场景
672浏览 • 1回复 待解决
点击服务卡片如何跳转至指定的页面
1076浏览 • 1回复 待解决
api6如何实现点击桌面卡片弹出提示
1854浏览 • 1回复 待解决
鸿蒙中怎么实现动画翻转效果
8980浏览 • 2回复 待解决
有人知道关于页demo
435浏览 • 1回复 待解决
鸿蒙手表支持服务卡片
7485浏览 • 2回复 待解决
webview组件demo ,有人知道
459浏览 • 1回复 待解决
有人知道
82浏览 • 1回复 待解决
有人知道JS menu如何隐藏
3277浏览 • 1回复 待解决
SnapShot定位,有人知道怎么处理
428浏览 • 1回复 待解决
有人知道社区怎么预约直播
1429浏览 • 1回复 已解决
taskpool 使用问题,有人知道
456浏览 • 1回复 待解决
如何跳出ForEach,有人知道
769浏览 • 1回复 待解决
如何发送短信,有人知道?
748浏览 • 1回复 待解决
如何保存faultLogger ,有人知道
187浏览 • 1回复 待解决
鸿蒙卡片服务可以播放视频
4075浏览 • 1回复 待解决
服务卡片只能基于JAVA开发
2416浏览 • 1回复 待解决