鸿蒙(HarmonyOS)应用开发实战——悬浮窗拖拽和吸附动画

最新推荐文章于 2024-10-11 15:54:06 发布

原创

最新推荐文章于 2024-10-11 15:54:06 发布 · 852 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #鸿蒙开发 #移动开发 #ArkUI #界面布局 #动画

往期知识点整理

鸿蒙（HarmonyOS）北向开发知识点记录~
被裁员后，踏上了鸿蒙开发求职之路
持续更新中……

介绍

本示例使用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.integer.float_window_content_border_radius'))
  Text($r('app.string.float_window_live_text'))
    .width($r('app.string.float_window_full_size'))
    .fontSize($r('app.string.ohos_id_text_size_body1'))
    .fontColor($r('app.color.o