自定义属性面板开发指南：公开属性声明、监听回调与基础类型配置

大家好，欢迎大家来到山海鲸的二次开发系列教程。我们前面给大家讲了一个属性的get和set，以及属性的变化之后该如何获取，这些都是针对山海鲸的内置属性的。如果说，我们希望在二开的代码中创建一些自己的属性，我们该怎么做呢？那么，这就要用到我们的自定义属性面板了。

1. 自定义属性面板的基本概念

我们首先来看一下二开文档中的自定义属性面板的基本概念。当我们在extension这个类里面写的任何公开属性，它都会变成一个自定义属性面板。像我们这里的abc，它是一个字符串，那么它就会变成一个输入框。

但是，如果说你不希望它生成属性面板的话，那么就把它定义成私有属性。这个是JS自己的语法，就是加个#即可。当然，我们直接用set、getter，也相当于是公开的，那么它也会生成一个自定义属性面板。

2. 监听变动

我们前面在预定义的内置属性里面，是怎么去监听变动的呢？我们是通过addEventListener，然后optionChange这样一个事件。那么对于我们的自定义属性，我们相对简单一些，我们只需要用onPropertyChanged这样的一个回调函数，就可以去监听它变动了。其中它全参是一个property，这是个字符串类型，它就是直接是你这个属性的名字，它也是个字符串。

3. 自定义属性的种类

我们再看一下自定义属性中一共有多少种自定义属性。我们这里写了12种，这里可能漏掉一种，还有一种是布尔值。这12种有相对简单的，比如说我们今天要讲的数字、字符串还有布尔；也有一些需要我们定义类的，比如说像是向量、下拉、字体、段落、颜色等等。当然还有一些更加复杂的，和我们的软件紧密耦合的，比如组件、数据包括文件等等，调用方式比较复杂的，这个我们会在后面的课程中逐渐去讲。

今天我们先来看一下最简单的3种属性，分别是布尔、字符串和数字。

4. 示例演示

好，我们前面这里再简单的补充一下，就是说我们这边的注释代码中，其实是有相当多的代码的。比如说，我们前面讲的这个addEventListener，它其实是可以直接从这边截注释的。那我们今天的代码，也是可以直接截注释的。

我们这里看到我们有三个，分别是布尔、字符串和数字。我们把它注释，然后我们回到软件当中，我们刷新一下，就可以看到：这就是字符串的输入，这就是数字的输入，这没有什么，很简单。我们字符上也可以去定义一些英文，比如“hello世界”，或者中文都可以。我们保存一下，我们看一下，这样子它就在里面了。我们内容不仅是内容可以定义成中文，我们这个变量名也可以定义成中文，这样子的话，我们对于一些使用者来说，就会更加友好一些，这样子我们就意思更明确。

4.1 调用开关

好，那我们这个开关该如何调用，就这个开关的值，我们比较简单，就是我们直接在我们先打印一下，我们在这个ready里面去打印一下它，可以看到这个代码提示就可以了。直接list点这个东西，因为它是基本类型，所以它并不是一个类，它直接就是这个类型本身。如果调到这个开关，那么它就是true。保存一下，然后刷新，我们到我们这边看一下，true；如果把它关掉，不用保存，就直接刷新就可以看到是false。为什么这里要点刷新？是因为我们这边是要调用ready方法的，点了刷新之后，它才会再调一次ready方法。

4.2 用开关控制动画

然后我们现在来给大家看一下，我如何用这个开关值，直接去控制这样的一个动画。好，我们只需要把这个动画线截注释，然后if(this.开关)，如果它打开了，那我们就让它动；如果它没有打开，那么我们就让它回来关闭了。我们看一下，这样子的一个代码非常简单，我们只需要去识别一下这个开关就可以了。

好，我们刷新一下。好，这个时候因为它是false，我们打开它，关闭、打开、关闭，这样子就实现了一个非常非常简单的用开关控制这个动画的功能。

但是，我们这样子这个功能完全对吗？其实是有个小瑕疵的。比如说把它移动开，我移动到这里，它就会直接跳回去，这是为什么？因为我们前面讲了，我们update方法是每一帧都会去调用的，所以当我移动开的时候，到这一帧它又会去调用，让它回去，所以这并不是一个很完美的写法。

那，我们怎么才能在开关关闭的那一刹那，把它给跳回来呢？那这个就需要用到我们的onPropertyChanged。我们同样在这里把注释给截掉，截掉之后我们用的就是debug1，我们不是用debug，我们用的是开关。好，当我们这里有开关，并且this.开关 === false的时候，我们再把它放回去。好，这里我们就不开关开的时候我们就动，如果它关的那一刹那那一次，我们就把它放回去。好，我们再刷新一下，我们来看一下。好，我们关闭，放回去了；那我动了，完全没有问题，因为它每一帧就不会再调用了。我们再打开，它又会从这里继续走。

那大家可能还希望我们再写得完美一点，就是说它不要回到这里，我放到哪里，它就从哪里开始走，这个是怎么做的呢？我们看一下，其实这也很简单。原因就在于，这里就是说当我这个值在下面，这个值我们这个值，因为点开了开关之后，它依然用的是我们396，如果我们直接用y就行了。好，我们刷新一下，再看一下，关闭我们放到这来，它就从这里开始走了。

5. 总结

今天我们给大家看了一下我们最基础的这三种类型的自定义属性该怎么用，以及我们带大家做了一个用开关控制动画的一个很基础的一个二开的示例。希望本篇文章内容对大家有所帮助。