有没有人来挑战HarmonyOS鸿蒙Next ArkUI方舟提爱思模仿SwiftUI做翻牌效果

有没有人来挑战HarmonyOS鸿蒙Next ArkUI方舟提爱思模仿SwiftUI做翻牌效果 在小红书看到一个用swiftUI做的翻卡片动效，据说只要几行代码。

我用ArkUI Stage模式花了400多行才实现一个类似的。

ArkUI要如何才能用最少的代码实现这个效果呢？

动效要点:

  • 牌堆有按下的动效
  • 发牌时会翻转
  • 最上面牌先出去
  • 文字渐隐出现/隐藏

我增加了几点:

  • 发牌时可以选择背面还是正面
  • 发牌时最上面牌先出去,回收时依次回来,最下面牌先回来,最上面牌后回来
  • 单张牌点击翻转效果

我的实现效果(ArkUI, stage模式, API9)

(中间有打断动画效果展示)

cke_2295.gif


更多关于有没有人来挑战HarmonyOS鸿蒙Next ArkUI方舟提爱思模仿SwiftUI做翻牌效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

HarmonyOS鸿蒙Next的ArkUI框架支持通过声明式UI和状态管理来实现类似SwiftUI的翻牌效果。你可以使用@State和@Binding来管理卡片的翻转状态，并通过Animation组件实现平滑的过渡效果。具体实现步骤如下：

  1. 定义卡片状态：使用@State变量来管理卡片的正面和背面状态。
  2. 创建卡片视图：使用Stack组件来叠加卡片的正面和背面视图，通过if条件语句控制显示哪一面。
  3. 添加动画效果：使用Animation组件为卡片的翻转添加旋转动画，可以通过rotate3d或rotateY来实现3D翻转效果。
  4. 处理用户交互：通过onClick事件监听用户的点击操作，触发卡片状态的切换和动画的播放。

示例代码如下：

@Entry
@Component
struct FlipCardExample {
  @State isFlipped: boolean = false

  build() {
    Column() {
      Stack() {
        if (!this.isFlipped) {
          Text('正面')
            .fontSize(30)
            .backgroundColor(Color.Blue)
            .width(200)
            .height(300)
        } else {
          Text('背面')
            .fontSize(30)
            .backgroundColor(Color.Red)
            .width(200)
            .height(300)
        }
      }
      .onClick(() => {
        this.isFlipped = !this.isFlipped
      })
      .animation({ duration: 500, curve: Curve.EaseInOut })
      .rotateY(this.isFlipped ? 180 : 0)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

这段代码实现了一个简单的翻牌效果，点击卡片时会在正面和背面之间切换，并伴有旋转动画。

更多关于有没有人来挑战HarmonyOS鸿蒙Next ArkUI方舟提爱思模仿SwiftUI做翻牌效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


使用HarmonyOS的ArkUI框架，你可以轻松实现类似SwiftUI的翻牌效果。首先，利用@State或@Observed装饰器管理卡片的翻转状态。然后，通过Stack组件叠加卡片的正面和背面，并使用Animation组件实现平滑的翻转动画。最后，通过Gesture组件监听点击事件，触发翻转逻辑。ArkUI的声明式语法与SwiftUI非常相似，开发者可以快速上手并实现复杂的UI效果。

回到顶部