javascript - Adobe Edge 移动图像库

Question

我正在使用 Adob​​e Edge Animate 创建我网站的大部分内容，但我也想制作一个移动版本，因此显然我想使用 onTouch 事件而不是 onClick 事件。我似乎找不到任何关于如何使用触摸事件的好信息，因为我以前从未使用过它们。

我想做一个简单的图片库，当你向左滑动时向前播放，向右滑动时向后播放。

这里最大的问题是，我如何告诉触摸事件根据滑动的方向做不同的事情？

Answer 1

首先，你是对的，你想使用三个事件处理程序：touchstart、touchmove、touchend

您可能采取的一种方法是将用户手指的起始位置与结束位置进行比较。尽管代码会根据您要检测的手指数量而有所不同，但我将概述一种您可以适应的基本方法。为了检测一根手指，请在“touchstart”事件处理程序中输入以下内容：

var xStart = e.originalEvent.touches[0].pageX;
sym.setVariable('xStart', xStart);

这会将第一根手指的起始 x 位置存储在一个变量中，然后使其可由其他事件处理程序全局访问。然后可能在“touchend”事件处理程序中做同样的事情。使用一些逻辑来比较两个值。

xStart = sym.getVariable('xStart');
var xEnd = e.originalEvent.touches[0].pageX;

if (xEnd > xStart)
{
    sym.playReverse();
}
else if (xEnd < xStart)
{
    sym.play();
}

然后你会有一些停止帧来保存这些图像。

这只是一个例子，但希望它会帮助你开始。祝你好运！