HarmonyOS鸿蒙Next中原生相机录像开始/结束按钮动画如何实现的

请问HarmonyOS鸿蒙Next中原生相机 录像开始/结束 按钮动画如何实现的

cke_406.jpeg


更多关于HarmonyOS鸿蒙Next中原生相机录像开始/结束按钮动画如何实现的的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

参考如下代码，应该是你想要的效果

@Entry
@ComponentV2
struct AnimationDemo {
  @Local show: boolean = false;

  build() {
    Column() {
      //外边框
      Row() {
        Row()
          .width(this.show ? 40 : 80)
          .height(this.show ? 40 : 80)
          .backgroundColor(Color.Red)
          .borderRadius(this.show ? 10 : 80)
          .borderColor(this.show ? Color.Red : Color.White)
          .borderWidth(20)
      }
      .width(100)
      .height(100)
      .justifyContent(FlexAlign.Center)
      .backgroundColor(Color.Transparent)
      .borderRadius(100)
      .borderColor(Color.White)
      .borderWidth(2)
      .onClick(() => {
        animateTo({
          duration: 300
        }, () => {
          this.show = !this.show;
        });
      })
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.Gray)
  }
}

更多关于HarmonyOS鸿蒙Next中原生相机录像开始/结束按钮动画如何实现的的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个示例文本。

图片描述1

图片描述2

搜索一下官网示例仓库，有个Native录音的例子

可以给个链接吗，

相关信息：

  • 标题：无
  • 作者：无
  • 创建日期：无
  • 修改日期：无

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：BV1S4411E7LY/?p=17

https://gitee.com/harmonyos_samples/audio-native

这里面也没有任何动画效果啊，跑起来看了后，

有点像一镜到底动画的第一种情况-不新建容器的一镜到底，大致思路就是在点击的时候圆圈中的图片更改，尺寸更改，赋予图片一镜到底的动画，具体的你可以看下我写的一镜到底那篇文章

鸿蒙Next原生相机录像按钮动画通过ArkUI的动画能力实现。主要使用动画属性（animation属性）结合状态管理。点击时触发状态变更，启动预设的scale和opacity动画效果。动画参数在ets文件中定义，使用显式动画（如animateTo）或属性动画（如animation属性）驱动。具体实现可能涉及关键帧动画（KeyframeAnimation）或路径动画，通过ArkTS控制动画开始/结束的时序。按钮状态切换时伴随动画过渡效果，这是通过绑定的boolean变量控制动画执行流程实现的。

在HarmonyOS Next中，原生相机应用的录像按钮动画实现主要基于ArkUI的动画能力。核心实现方案如下：

  1. 使用自定义组件构建按钮UI，通常包含内外两层圆形结构：
@Component
struct RecordButton {
  @State isRecording: boolean = false
  // 其他状态变量
}
  1. 关键动画实现技术：
  • 通过属性动画(animateTo)实现缩放效果
  • 结合关键帧动画实现状态切换时的平滑过渡
  • 使用状态变量控制动画触发时机
  1. 典型动画逻辑示例：
animateTo({
  duration: 300,
  curve: Curve.EaseInOut
}, () => {
  this.scale = this.isRecording ? 0.8 : 1.0
  this.borderWidth = this.isRecording ? 10 : 0
})
  1. 状态切换处理：
  • 开始录像时：外圈收缩+内矩形圆角变化
  • 结束录像时：恢复圆形+外圈扩展
  1. 性能优化：
  • 使用硬件加速
  • 避免不必要的重绘
  • 合理设置动画时长(通常200-300ms)

这种实现方式充分利用了HarmonyOS的声明式UI和动画框架，确保了流畅的视觉效果。

回到顶部