阅读本文可对一个 HTML5 自定义组件示例有所了解。

本文说明如何创建自定义组件。第一个示例说明图像组件(同时随 Animate CC 提供)的构成、框架的内容以及开发过程中涉及的步骤。第二个示例说明如何包装任一现有的 UI 组件(如 jQueryUI)并将其导入 Animate CC 中。

  1. 创建 DOM 图像组件

    创建一个名为“My Components”的类别。 

    a. 首先在 <HTML5Components> 文件夹下创建一个名为 mycomponents 的文件夹

    b. 下载附加的 myimage.zip 文件并解压缩

        mycomponents 文件夹下的内容。

    下载

    c. 重新启动 Animate。

mycomponents 文件夹内部的目录结构

现在,您应当可以在“组件”文件夹中看到一个名为“My Components”的新类别,在该类别下看到一个名为“My Image”的新组件。您可以将其拖放到舞台上,设置图像源属性,然后发布影片,便可以看到这个自定义组件生效了。 

组件元数据 - components.js

Components.js

请注意,该类别设置为 CATEGORY_ MY_ COMPONENTS。各属性的名称使用的键也类似。这些键用于类别名称的本地化字符串。如果打开 locale 文件夹中的 strings.json,将看到以下条目。

注意:

编辑此文件时最常见的错误是数组最后一个元素的尾部加上了不必要的逗号。

类别详细信息

icon 字段的值设为 Sp_Image_Sm。如果转至 assets 文件夹,您会看到下面这两个 png 文件的前缀都是 Sp_Image_Sm。

icon 字段的值

它们分别是深色 UI 图标和浅色 UI 图标。

components.json 中 source 字段的值设为 src/myimage.js。 

(function($) {    

// Register a component with the className: my.Image,
	// and prototype with the following overrides 
	// getCreateOptions
	// getCreateString
	// getProperties
	// getAttributes
   	$.anwidget("my.Image", {
        	options: {
			'visible': true,
			'position': 'absolute'
        	},
		_props: ["left", "top", "width", "height", "position", "transform-origin", "transform"],
		
_attrs: ["id", "src", "alt", "class", "border"],
		
// Return a unique ID with the prefix image
		// _widgetID is a global declared in anwidget
		// This id is used only if the user has not set any instance ID for the component in Animate CC
		// Otherwise the user configured name is used
		getCreateOptions: function() {
			return $.extend(this.options, { 'id': "image" + _widgetID++ });
		},
		
// Return the string for creating the DOM element
		// For image we just need to create the <img> tag
		getCreateString: function() {
			return "<img>";
		},
		
// Set of configurable properties
		getProperties: function() {
			return this._props;
		},
		
// Set of configurable attributes
		getAttributes: function() {
			return this._attrs;
		}    
	});   
})(jQuery);

参照代码中的注释会更容易理解。 

您可以随意查看随 Animate 提供的其他组件的源代码。大多数情况下,您可以从其中一个着手,然后根据自己的需要进行配置。

包装 jQuery-UI 组件

这部分说明如何包装 jQuery-UI 小部件并在 Animate CC 中使用它。包装任何其他 UI 框架中的任何其他现有组件时,均可使用同样的概念。

我们来了解一下 Animate CC 附带的打包 DatePicker 组件,它是一个 jQuery UI 小部件。下载并解压缩下面这个归档文件的内容,将它作为参考。

下载

将内容解压缩后的结构

名为 jquery-ui-1.12.0 的文件夹是 jQuery UI 框架的源,其中包含原始 DatePicker 小部件及其图像和 css 等资源。像任何其他 HTML5 组件一样,可以在 Animate CC 中包装并使用这些组件。这仅对本地预览是必需的,在发布设置中使用“托管库”时,可以选择是否使用 cdn 下载相关的源。 

Components.js

有两个默认的相关项,jQuery 和 anwidget.js。由于 anwidget.js 不在 CDN 中,因此对同一资源没有任何 CDN 条目。

之后的条目用于从 jquery UI 加载 datepicker 小部件所需的其他资源。同样,如果要包装任何其他库中的任何小部件,可以为同一资源指定一组相关项。这些相关项将在组件初始化之前下载。

在 properties 部分中,我们只提供了一个名为 label 的属性,它绑定到 datepicker 组件的 label 属性。同样,我们还可以提供其他属性以便用户能够在 Animate 创作环境中进行配置。在运行时,每个这样的属性将作为实例的 options 数组中的一个键/值对来提供。我们可以提取出配置好的值然后在运行时应用它。

主源文件:src/datepicker.js

与本示例不同的部分

  1. getCreateString:

    来自 jQuery-UI 的 datepicker 小部件接受这样一个输入文本元素,然后在运行时将其转换为一个 datepicker 元素。因此,我们会相应地初始化 DOM。

  2. attach:

    对于这个小部件需要覆盖此函数。每当有元素附加到 DOM 时,便会调用此 API。但是,由于下层运行时(本例为 createjs)的工作方式,此 API 在某个帧范围内可能会被多次调用。

    我们会记住下层元素的附加状态,然后调用基类的附加 API(使用 this._superApply(arguments))。如果这是第一次将元素附加到父 DOM,我们将使用下层的 jQuery-UI 小部件的调用,将组件的 DOM 转换为一个 datepicker。请参阅 - https://jqueryui.com/datepicker/

    大多数 javascript 小部件的工作方式都类似。您可以使用同一方法来包装选择的任一组件,然后再以同一方式将其引入 Animate CC 中。

  3. Update:我们会覆盖 update,将 css 属性 (properties) 应用于容器 div,将特性 (attributes) 应用于真正的 DOM 元素。

    注意:

    在覆盖 attach、detach 或 update 这样的 API 时,需评估基类的默认实现并在适当时候调用基础实现,否则组件初始化可能会失败。

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略