HarmonyOS 鸿蒙Next中搜索框怎么实现丝滑过渡动画？

HarmonyOS 鸿蒙Next中搜索框怎么实现丝滑过渡动画？ 比如流心播放器的搜索框。

点击搜索框时，左侧按钮往左滑，右侧按钮往右滑，该如何实现？

cke_279.png

转场后。

cke_467.png


更多关于HarmonyOS 鸿蒙Next中搜索框怎么实现丝滑过渡动画？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

演示动画：

cke_676.gif

核心代码：

// 左边按钮
.transition(TransitionEffect.opacity(0)
  .combine(TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.START),
    TransitionEffect.move(TransitionEdge.START)))
  .animation({ duration: 500, curve: Curve.Ease }))
// 或者极简版（可能有点难理解）
.transition(TransitionEffect.OPACITY.animation({ duration: 500, curve: Curve.Ease })
  .combine(TransitionEffect.move(TransitionEdge.START))
)

// 搜索框
.layoutWeight(1)

// 右边按钮
.transition(TransitionEffect.opacity(0)
  .combine(TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.END),
    TransitionEffect.move(TransitionEdge.END)))
  .animation({ duration: 500, curve: Curve.Ease }))
// 或者极简版（可能有点难理解）
.transition(TransitionEffect.OPACITY.animation({ duration: 500, curve: Curve.Ease })
  .combine(TransitionEffect.move(TransitionEdge.END))
)

更多动画效果可以查看：出现/消失转场-转场动画。

完整代码：

@Entry
@ComponentV2
struct SearchPage {
  @Local is_edit: boolean = false
  private searchController: SearchController = new SearchController()

  // 使用 @Monitor 监听 is_edit 变化
  @Monitor('is_edit')
  onIsEditChanged(mon: IMonitor) {
    if (!mon.value()?.now) {
      this.searchController.stopEditing()
    }
  }

  build() {
    Column() {
      Row({ space: 15 }) {
        // 左侧按钮 - 左滑出现消失
        if (!this.is_edit) {
          Button({ type: ButtonType.Circle, stateEffect: true }) {
            SymbolGlyph($r('sys.symbol.close_sidebar'))
          }
          .transition(TransitionEffect.OPACITY.animation({ duration: 500, curve: Curve.Ease })
            .combine(TransitionEffect.move(TransitionEdge.START))
          )
          .borderRadius(16)
          .clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.8 })
          .width(40)
          .height(40)
          .backgroundColor($r('sys.color.multi_color_aux_09'))
        }

        // 搜索框
        Search({
          placeholder: '搜索...',
          controller: this.searchController
        })
          .layoutWeight(1)
          .onEditChange((isEditing: boolean) => {
            this.getUIContext().animateTo({ duration: 500, curve: Curve.Ease }, () => {
              this.is_edit = isEditing
            })
          })

        // 右侧按钮 - 右滑出现消失
        if (!this.is_edit) {
          Button({ type: ButtonType.Circle, stateEffect: true }) {
            SymbolGlyph($r('sys.symbol.text_and_arrow_down'))
          }
          .transition(TransitionEffect.OPACITY.animation({ duration: 500, curve: Curve.Ease })
            .combine(TransitionEffect.move(TransitionEdge.END))
          )
          .borderRadius(16)
          .clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.8 })
          .width(40)
          .height(40)
          .backgroundColor($r('sys.color.multi_color_aux_06'))
        }
      }
      .width('100%')
      .padding(10)
    }
    .onClick(() => {
      if (this.is_edit) {
        this.getUIContext().animateTo({ duration: 300, curve: Curve.Ease }, () => {
          this.is_edit = false
        })
      }
    })
    .width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next中搜索框怎么实现丝滑过渡动画？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，搜索框的丝滑过渡动画可通过ArkUI的动画属性实现。使用显式动画（animateTo）或属性动画（animation）修饰器，结合状态变量（@State）控制搜索框的宽度、透明度或位置变化。例如，通过点击事件触发状态改变，在animateTo中配置动画参数（如duration、curve），实现展开/收起时的平滑过渡效果。

在HarmonyOS Next中实现搜索框的丝滑过渡动画，核心是使用ArkUI的动画API和状态管理。针对你描述的“点击搜索框时，左侧按钮左滑，右侧按钮右滑”的效果，可以通过以下步骤实现：

1. 核心思路 使用@State装饰器管理搜索框的激活状态（isSearchActive）。当状态改变时，触发按钮的位移动画和搜索框的宽度变化动画。

2. 关键实现代码示例

// 使用@State管理状态
@State isSearchActive: boolean = false

build() {
  Row() {
    // 左侧按钮（如返回按钮）
    Image($r('app.media.icon_back'))
      .width(40)
      .height(40)
      .offset({ x: this.isSearchActive ? -100 : 0 }) // 状态变化时向左偏移
      .animation({ duration: 300, curve: Curve.EaseOut }) // 添加动画

    // 搜索框主体
    TextInput()
      .width(this.isSearchActive ? '100%' : '80%') // 激活时宽度扩展
      .animation({ duration: 300, curve: Curve.EaseOut })
      .onClick(() => {
        this.isSearchActive = true // 点击激活搜索状态
      })

    // 右侧按钮（如搜索图标）
    Image($r('app.media.icon_search'))
      .width(40)
      .height(40)
      .offset({ x: this.isSearchActive ? 100 : 0 }) // 状态变化时向右偏移
      .animation({ duration: 300, curve: Curve.EaseOut })
  }
  .padding(10)
  .backgroundColor(Color.White)
}

3. 动画细节优化

  • 曲线（Curve）：使用Curve.EaseOut、Curve.EaseInOut或Curve.Spring（弹性曲线）可使动画更自然。
  • 同步动画：确保按钮位移与搜索框宽度变化的动画时长和曲线一致，避免割裂感。
  • 交互扩展：可通过onEditChange监听输入状态，在输入完成后将isSearchActive置为false，触发收回动画。

4. 进阶实现 若需要更复杂的路径动画或组合动画，可使用animateTo显式动画：

animateTo({ duration: 300, curve: Curve.EaseOut }, () => {
  this.isSearchActive = true // 在此闭包内所有状态变化将同步动画
})

此方案通过状态驱动UI更新，结合ArkUI的内置动画，即可实现流畅的过渡效果。动画参数可根据实际视觉效果调整。

回到顶部