javascript - Adobe Edge移动图像库

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

我想制作一个简单的图片库，当您向左滑动时会向前播放，而向右滑动时会反向播放。

这里的最大问题是，如何根据滑动方向告诉触摸事件执行不同的操作？

最佳答案

首先，您是对的，您想使用三个事件处理程序：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();
}

那么您将在这些图像上保留一些停止帧。

那只是一个例子，但希望它将帮助您前进。
祝好运！