Spark AR 是 Facebook 免费创作 AR 作品的平台，使用户能够为 Facebook 和 Instagram 创建交互式增强现实体验，超过 40 万名创作者，190个国家/地区，使用 Spark AR 来创作自己的AR作品

由于该软件无需任何编码知识即可使用，因此任何人现在都可以在 AR 世界中几乎没有经验地制作下一个疯狂式传播的 Instagram AR 特效，引领世界潮流。

专门的 AR 滤镜设计师单价甚至可达到 1000 美元到 3 万美元不等。

用平移手势移动录音机

使用录音机动画，我们现在可以添加交互性，让人使用效果来定位，缩放和旋转它。

加载手势模块

我们需要加载 touchgestures 模块以便能够检测触摸事件。

我们需要加载 touchgestures 模块以便能够检测触摸事件。在场景模块下面的一行中添加用于加载 touchgestures 模块的代码:

脚本代码

 const Animation = require('Animation'); // Existing code
 const Scene = require('Scene'); // Existing code
 const TouchGestures = require('TouchGestures');

访问平面跟踪器

为了移动录音机，我们将更新录音机所在的平面跟踪器的位置，所以我们首先需要在脚本中访问它。

在访问扬声器的代码下面添加寻找平面跟踪器的代码:

脚本代码

Promise.all([
    sceneRoot.findFirst('base_jnt'), // Existing code
    sceneRoot.findFirst('speaker_left_jnt'), // Existing code
    sceneRoot.findFirst('speaker_right_jnt'), // Existing code
    sceneRoot.findFirst('planeTracker0')
 ])
 .then(function(objects) {
    const base = objects[0]; // Existing code
    const speakerLeft = objects[1]; // Existing code
    const speakerRight = objects[2]; // Existing code
    const planeTracker = objects[3];

订阅平移手势

我们希望当使用该效果的人在屏幕上拖动手指时，平面跟踪器也能移动，这在 Spark AR Studio 中被称为平移手势。

下面的代码订阅了平移手势，这意味着任何检测到的都将调用这个函数并在其中执行代码。

脚本代码

 TouchGestures.onPan().subscribe(function(gesture) {

 });

onPan() 方法返回一个 EventSource ，然后我们用一个回调函数订阅这个 EventSource ，这个回调函数将在每次检测到平移手势时运行。

我们还将手势作为参数传递给回调函数，我们将在移动平面跟踪器时使用它。订阅 onPan() 的 EventSource 时传递的手势是一个 PanGesture 。

移动平面跟踪器

在回调函数中，我们现在可以添加代码来根据检测到的平移手势的位置和状态移动平面跟踪器。

在回调函数中添加移动平面跟踪器的代码:

脚本代码

 TouchGestures.onPan().subscribe(function(gesture) { // Existing code
   planeTracker.trackPoint(gesture.location, gesture.state);
 }); // Existing code

PlaneTracker 类的 trackPoint() 方法触发新的平面检测，更新 PlaneTracker 的位置。

我们使用平移手势的位置和状态作为平面跟踪器应该更新到的位置，这意味着平面跟踪器移动到 手势被检测到的位置。

脚本代码

const Animation = require('Animation'); 
 const Scene = require('Scene'); 
 const TouchGestures = require('TouchGestures'); 
  
 const sceneRoot = Scene.root; 
  
 // Existing code updated 
 Promise.all([ 
     sceneRoot.findFirst('base_jnt'), 
     sceneRoot.findFirst('speaker_left_jnt'), 
     sceneRoot.findFirst('speaker_right_jnt'), 
     sceneRoot.findFirst('planeTracker0') 
 ]) 
 .then(function(objects) { 
     const base = objects[0]; 
     const speakerLeft = objects[1]; 
     const speakerRight = objects[2]; 
     const planeTracker = objects[3]; 
      
     const baseDriverParameters = { 
         durationMilliseconds: 400, 
         loopCount: Infinity, 
         mirror: true 
     }; 
  
     const baseDriver = Animation.timeDriver(baseDriverParameters); 
     baseDriver.start(); 
  
     const baseSampler = Animation.samplers.easeInQuint(0.9,1); 
  
     const baseAnimation = Animation.animate(baseDriver,baseSampler); 
  
     const baseTransform = base.transform; 
  
     baseTransform.scaleX = baseAnimation; 
     baseTransform.scaleY = baseAnimation; 
     baseTransform.scaleZ = baseAnimation; 
      
     const speakerDriverParameters = { 
         durationMilliseconds: 200, 
         loopCount: Infinity, 
         mirror: true 
     }; 
  
     const speakerDriver = Animation.timeDriver(speakerDriverParameters); 
     speakerDriver.start(); 
  
     const speakerSampler = Animation.samplers.easeOutElastic(0.7,0.85); 
  
     const speakerAnimation = Animation.animate(speakerDriver,speakerSampler); 
      
     const speakerLeftTransform = speakerLeft.transform; 
  
     speakerLeftTransform.scaleX = speakerAnimation; 
     speakerLeftTransform.scaleY = speakerAnimation; 
     speakerLeftTransform.scaleZ = speakerAnimation; 
  
     const speakerRightTransform = speakerRight.transform; 
  
     speakerRightTransform.scaleX = speakerAnimation; 
     speakerRightTransform.scaleY = speakerAnimation; 
     speakerRightTransform.scaleZ = speakerAnimation; 
      
     TouchGestures.onPan().subscribe(function(gesture) { 
         planeTracker.trackPoint(gesture.location, gesture.state); 
     }); 
 });

保存你的脚本并返回 Spark AR Studio

处理 Capability 错误消息

回到 Spark AR Studio ，你会看到一个错误信息出现在控制台:

这是因为我们需要指定要检测的触摸手势。

要指定我们想要使用的触摸手势:

1. 从菜单栏单击“Project > Edit Properties”。
2. 选择Capabilities。
3. 通过单击旁边的箭头展开Touch Gestures功能。
4. 选中“Pan, Pinch and Rotate”旁边的复选框，然后单击“Done”。

缩放和旋转将在接下来的步骤中使用，所以我们现在添加它们可以节省时间。

清除控制台并重新启动体验以验证错误不再存在。

如果我们仍然有一个错误，那么它将出现在控制台后，我们重新启动。

预览设备

现在我们准备用新的手势输入预览效果。模拟器的功能有限，当它涉及到移动跟踪器和使用高级的触摸效果时就体现出来了，所以从现在开始，我们将在移动设备上预览体验。

在设备上预览最简单的方法是使用 Send to App 选项。

在设备上测试项目:

1. 单击Send To Device按钮。
2. 如果还没有，单击Send to App旁边的箭头来展开窗口。
3. 点击 Instagram Camera 或 Facebook Camera 旁边的Send按钮预览应用程序。

你现在可以用你的手指移动录音机在世界中的位置。