利用代码扩展 Vuforia Studio 功能 > 在 Vuforia Studio 中使用 JavaScript > 显示和隐藏加载动画
  
显示和隐藏加载动画
1. 创建新的移动设备项目。
2. 在 2D 工作区上，将“表格布局”小组件拖放到工作区。
3. 单击“项目”窗格中的 row-1。
4. 在“详细信息”窗格中，单击两次“网格操作”下面的“添加列”。
5. 将以下小组件拖放到网格布局列中：
列
小组件
属性
1
按钮
在“文本”字段中输入 Start。
2
按钮
在“文本”字段中输入 Cancel。
3
进度环
取消选中“可见”复选框
* 
在本教程中，我们使用了即用型样式对按钮设置颜色。有关详细信息，请参阅主题。
6. 接着，创建一个新应用程序参数以绑定“进度环”小组件上的属性。在“数据”窗格中，单击“应用程序参数”旁边的绿色“+”图标。
7. 在“添加应用程序参数”窗口的“名称”字段中输入 spinnerVisible，然后单击“添加”。
8. 接着，将 spinnerVisible 应用程序参数与该进度环绑定，方法如下：将 spinnerVisible 旁边的绑定图标 拖放到“项目”窗格中的 spinner-1 上。
选择“选择绑定目标”窗口中的“可见”。
9. 单击“项目”窗格中的 Home.js。在 JavaScript 编辑器中输入以下内容：
$scope.hideSpinner = function() {
$scope.app.params.spinnerVisible = false;
};
$scope.start = function() {
$scope.app.params.spinnerVisible = true;
$scope.timeoutPromise = $timeout($scope.hideSpinner, 3000);
};
$scope.cancel = function() {
$timeout.cancel($scope.timeoutPromise);
};
10. 单击“项目”窗格中的“主页”返回工作区。
11. 选择“开始”按钮查看其属性。
12. 在“详细信息”窗格中，单击“单击”事件旁边的 JS 图标，然后在“表达式”框中输入以下内容：start();
单击该按钮时，将执行 start JavaScript 函数。
13. 选择“取消”按钮查看其属性。
14. 在“详细信息”窗格中，单击“单击”事件旁边的 JS 图标，然后在“表达式”框中输入以下内容：cancel();
单击该按钮时，将执行 cancel JavaScript 函数。
15. 单击“预览”。您现在单击“开始”按钮即可调用进度环。