鸿蒙OH实战开发：悬浮窗拖拽和吸附动画

最新推荐文章于 2025-01-06 14:42:45 发布

原创

最新推荐文章于 2025-01-06 14:42:45 发布 · 607 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #position #openharmony #c语言 #c++ #鸿蒙开发 #ArkUI

📚往期学习笔录📝：

📝 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

📝 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

📝 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

📝 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

📝 记录一场鸿蒙开发岗位面试经历~

📝 持续更新中……

介绍

本示例使用position绝对定位实现应用内悬浮窗，并且通过animateTo结合curves动画曲线实现悬浮窗拖拽跟手和松手吸附边缘的弹性动画效果。

效果图预览

使用说明

按住悬浮窗可以拖拽，松开后悬浮窗自动靠左或靠右，如果悬浮窗超出内容区上下边界，自动吸附在边界位置。

实现思路

悬浮窗组件使用Stack嵌套video布局，使用属性position绝对定位使组件悬浮。

Stack({
   
    alignContent: Alignment.Bottom }) {
   
   
  Video({
   
   
    src: $rawfile('float_window_video.mp4'),
    controller: this.videoController
  })
    .controls(false)
    .autoPlay(true)
    .loop(true)
    .muted(true)
    .width($r('app.string.float_window_full_size'))
    .onClick(() => {
   
   
      this.videoController.requestFullscreen(true);
    })
    .borderRadius($r('app.string.ohos_id_corner_radius_default_l'))
  Text($r('app.string.float_window_live_text'))
    .width($r('app.string