Popmotion动画(二) Pointer tracking 指针跟踪

最新推荐文章于 2024-06-01 09:45:50 发布

chendm_dage

最新推荐文章于 2024-06-01 09:45:50 发布

阅读量555

点赞数

分类专栏： popmotion 文章标签： popmotion 动画

本文链接：https://blog.csdn.net/qq_35072703/article/details/80423227

版权

本文深入探讨了Popmotion库中的Pointer跟踪功能，讲解如何利用指针跟踪实现拖拽效果。通过监听DOM事件，结合Pointer操作接口，处理鼠标和触摸输入，创建可重用的单轴拖动代码。文章还介绍了如何解决拖动元素定位问题，并预告下篇将涉及速度检测及自然交互效果的创建。

摘要由CSDN通过智能技术生成

Pointer tracking指针跟踪

指针跟踪是用户界面的一个重要组成部分
Drag & drop, scrolling galleries, measuring touch scroll speed是一些显而易见的实例

在本篇中，将看到如何监听action转换成DOM事件流
然后，我们将看看如何用指针动作跟踪鼠标和触摸动作，然后使用该指针的移动来拖动DOM元素

popmotion提供llisten action来监听DOM事件

import { listen } from 'popmotion';

它将接受事件名称作为空格分隔的字符串，这意味着您可以使用单个listen侦听多个事件

listen(document, 'mousedown touchstart')
  .start((e) => console.log(e));

由于listen是一个action,同样的也同样拥有一些链式方法

例如，下面是如何制作一个只有在有两个以上的触摸时才会触发的TouchMove监听器

listen(document, 'touchmove')
  .filter(({ touches }) => touches.length >= 2)
  .start((e) => /* This event has more than 2 touches! */);

Pointer操作提供了一个通用接口，用于与单点鼠标和触摸输入交互(对于多点触摸，multitouch提供多点操作)

关注

专栏目录