首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

HarmonyOS Next 悬浮窗拖拽吸附动画

介绍本示例使用position绝对定位实现应用内悬浮窗,并且通过animateTo结合curves动画曲线实现悬浮窗拖拽跟手和松手吸附边缘的弹性动画效果。...效果图预览使用说明按住悬浮窗可以拖拽,松开后悬浮窗自动靠左或靠右,如果悬浮窗超出内容区上下边界,自动吸附在边界位置。...this.offsetY = event.touches[0].y; break; }手指移动时,获取触摸点相对于应用窗口左上角的X和Y坐标,通过计算设置悬浮窗的position坐标实现拖拽...手指抬起时,通过判断悬浮窗中心在水平方向位于窗口中心的左侧或右侧设置悬浮窗靠左或靠右,如果悬浮窗超出内容区上下边界,则将悬浮窗设置在边界位置,使用curves.springMotion弹性动画曲线实现吸附边界时的弹性动画效果

9420
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    js事件高级:拖拽

    什么是拖拽 拖拽就是在某一个对象上,当鼠标按下去之后,拖着对象走,松开鼠标时,对象位置变成拖拽的位置 简单拖拽 1.实现简单的拖拽功能 2.当拖拽对象到网页边缘时,会停留在边缘 实现代码 <!..._吸附 1.在实现简单拖拽的基础上给拖拽对象一个区域范围 2.拖拽吸附:在靠近父级边缘时自动吸附在父级边缘 实现代码 <!...var t = oEvent.clientY - disY; //判断div是否移处可视页面的边缘 //拖拽靠近父级边缘时自动吸附...带框拖拽拖拽的另一种形式,拖动时,跟着移动的是对象的虚线框,虚线框就是对象将要拖移到达的位置 实现代码 <!...var t = oEvent.clientY - disY; //判断div是否移处可视页面的边缘 //拖拽靠近父级边缘时自动吸附

    9.4K20
    领券