【技术实现步骤摘要】
本专利技术涉及软件设计，具体涉及一种基于设计工具的原型动态组件实时预览方法及装置。
技术介绍
1、通过对动态组件进行设计交互(如从一个对象到另一对象的交互过渡过程)，可以提供多种动态效果，满足更加灵活、多变的交互需求。现有的设计工具(如figma和sketch)，尽管支持动态组件的创建和预览，但在实际使用中，用户常常会遇到预览不够流畅、交互复杂以及难以支持实时更新的问题。进而限制设计师在创意过程中对动态效果的即时把握，导致设计效率低下。
2、尤其是当组件较为复杂或包含多个嵌套元素时，设计师每次更改属性后，现有的设计工具无法立即以样式布局的最新状态作为重新渲染的基准，导致设计师需要等待几秒钟甚至更长时间才能看到更改后的效果。由于设计师经常需要进行多次的反复更改，每次预览都需要等待较长的预览时间，不仅极大降低了设计效率和设计体验，还严重影响了设计师的创意发挥。
3、为解决上述问题，本专利技术研发一种基于设计工具的原型动态组件实时预览方法及装置，以提升设计师在创意过程中的流畅性，减少因预览延迟导致的设计迭代次数，从而提高设计效率。
技术实现思路
1、鉴于上述问题，提出一种基于设计工具的原型动态组件实时预览方法及装置，以提升设计师在创意过程中的流畅性。
2、根据本专利技术的一个方面，提供了一种基于设计工具的原型动态组件实时预览方法，包括：
3、在设计画布页中创建原型动态组件，记录所述原型动态组件中各个容器的对象属性；其中，所述对象属性包括位置
4、监听所述原型动态组件的交互设置操作；其中，所述交互设置操作包括动画交互设置操作以及对象属性设置操作；所述动画交互设置操作包括触发条件、交互动作、目标以及动画设置；
5、在所述原型动态组件的交互设置完成之后或交互设置过程中，于所述原型动态组件的预设位置显示动态组件预览区域；
6、通过所述动态组件预览区域对所述原型动态组件的交互操作过程进行实时渲染，以展示所述原型动态组件的动态视觉效果。
7、在一种可选的方式中，所述记录所述原型动态组件中各个容器的对象属性进一步包括：
8、构建包含节点类型、节点属性以及子节点列表的虚拟dom节点；其中，所述节点类型包括div类型、span类型以及自定义类型；所述节点属性包括容器标识符、容器的css类名以及对象属性；
9、创建各个容器的虚拟dom节点，根据所述虚拟dom节点的节点属性以及所述原型动态组件的交互设置操作生成虚拟dom树。
10、在一种可选的方式中，所述监听所述原型动态组件的交互设置操作进一步包括：
11、创建事件监听器以捕获所述原型动态组件的交互设置操作；
12、当监听到所述原型动态组件的交互设置操作之后，更新与其相对应的第一虚拟dom树得到第二虚拟dom树；
13、根据diff算法比较所述第一虚拟dom树与所述第二虚拟dom树之间的差异，得到真实dom树，以根据所述真实dom树对所述原型动态组件的交互操作过程进行实时渲染；其中，所述真实dom树包括需要添加、删除以及修改的指示变更点。
14、在一种可选的方式中，所述根据所述真实dom树对所述原型动态组件的交互操作过程进行实时渲染进一步包括：
15、根据所述真实dom树中的指示变更点，在真实dom环境中执行相应的dom api调用；
16、在所述动态组件预览区域进行多个批次触发重绘操作和回流操作，以更新响应的动态视觉效果；其中，所述重绘操作重新绘制所述原型动态组件中的元素外观，所述回流操作重新计算所述原型动态组件中的元素位置和大小。
17、在一种可选的方式中，所述根据diff算法比较所述第一虚拟dom树与所述第二虚拟dom树之间的差异，得到真实dom树进一步包括：
18、比较所述第一虚拟dom树和所述第二虚拟dom树的根节点，如果根节点类型不同，将所述第二虚拟dom树作为所述真实dom树；如果根节点类型相同，则继续比较子节点；
19、通过双指针比较所述第一虚拟dom树和所述第二虚拟dom树中各层级的子节点；
20、当两个节点的节点类型相同时，则分别比较节点的节点属性和子节点列表；如果节点的节点属性和子节点列表不同，将该节点的节点属性和子节点列表添加至所述真实dom树对应的节点中。
21、在一种可选的方式中，所述方法还包括：
22、根据所述原型动态组件的层次深度、交互频率以及样式布局，对其动态视觉效果进行分层渲染。
23、在一种可选的方式中，所述方法还包括：
24、当监听到所述原型动态组件的样式布局发生变化时，则停止所述样式布局的当前状态的渲染层，同时记录所述样式布局的最新状态，将该最新状态作为重新渲染的基准；
25、当所述样式布局的停止变化时，以平滑过渡的方式对所述最新状态进行重新渲染。
26、在一种可选的方式中，所述方法还包括：
27、如果所述原型动态组件的样式布局发生变化的幅度小于预设像素阈值，则不重新渲染所述原型动态组件，仅对样式布局中发生变化的元素布局样式进行重新渲染。
28、在一种可选的方式中，所述原型动态组件包括画布页原型模式与画布页研发模式，所述动态组件预览区域采用小窗播放的方式；
29、所述方法还包括：
30、当所述原型动态组件为画布页研发模式时，生成所述原型动态组件的代码框架，其中，所述代码框架包括js脚本代码和css样式代码；
31、当鼠标hover至所述动态组件预览区域时，触发所述原型动态组件的动态视觉效果。
32、根据本申请的另一方面，提供了一种基于设计工具的原型动态组件实时预览装置，包括：
33、原型动态组件创建与记录模块，用于在设计画布页中创建原型动态组件，记录所述原型动态组件中各个容器的对象属性；其中，所述对象属性包括位置、宽高、角度、圆角、颜色、不透明度、描边、特效以及图层顺序；
34、交互设置监听模块，用于监听所述原型动态组件的交互设置操作；其中，所述交互设置操作包括动画交互设置操作以及对象属性设置操作；所述动画交互设置操作包括触发条件、交互动作、目标以及动画设置；
35、动态组件预览区域显示模块，用于在所述原型动态组件的交互设置完成之后或交互设置过程中，于所述原型动态组件的预设位置显示动态组件预览区域；
36、动态视觉实时渲染模块，用于通过所述动态组件预览区域对所述原型动态组件的交互操作过程进行实时渲染，以展示所述原型动态组件的动态视觉效果。
37、本专利技术上述实施例提供的方案，在设计画布页中创建原型动态组件，记录所述原型动态组件中各个容器的对象属性；其中，所述对象属性包括位置、宽高、角度、圆角、颜色、不透明度、描边、特效以及图层顺序；监听所述原型动态组件本文档来自技高网...
【技术保护点】
1.一种基于设计工具的原型动态组件实时预览方法，其特征在于，包括：
2.根据权利要求1所述的基于设计工具的原型动态组件实时预览方法，其特征在于，所述记录所述原型动态组件中各个容器的对象属性进一步包括：
3.根据权利要求2所述的基于设计工具的原型动态组件实时预览方法，其特征在于，所述监听所述原型动态组件的交互设置操作进一步包括：
4.根据权利要求3所述的基于设计工具的原型动态组件实时预览方法，其特征在于，所述根据所述真实DOM树对所述原型动态组件的交互操作过程进行实时渲染进一步包括：
5.根据权利要求3所述的基于设计工具的原型动态组件实时预览方法，其特征在于，所述根据DIFF算法比较所述第一虚拟DOM树与所述第二虚拟DOM树之间的差异，得到真实DOM树进一步包括：
6.根据权利要求4所述的基于设计工具的原型动态组件实时预览方法，其特征在于，所述方法还包括：
7.根据权利要求6所述的基于设计工具的原型动态组件实时预览方法，其特征在于，所述方法还包括：
8.根据权利要求7所述的基于设计工具的原型动态组件
9.根据权利要求1所述的基于设计工具的原型动态组件实时预览方法，其特征在于，所述原型动态组件包括画布页原型模式与画布页研发模式，所述动态组件预览区域采用小窗播放的方式；
10.一种基于设计工具的原型动态组件实时预览装置，其特征在于，包括：
...【技术特征摘要】
1.一种基于设计工具的原型动态组件实时预览方法，其特征在于，包括：
2.根据权利要求1所述的基于设计工具的原型动态组件实时预览方法，其特征在于，所述记录所述原型动态组件中各个容器的对象属性进一步包括：
3.根据权利要求2所述的基于设计工具的原型动态组件实时预览方法，其特征在于，所述监听所述原型动态组件的交互设置操作进一步包括：
4.根据权利要求3所述的基于设计工具的原型动态组件实时预览方法，其特征在于，所述根据所述真实dom树对所述原型动态组件的交互操作过程进行实时渲染进一步包括：
5.根据权利要求3所述的基于设计工具的原型动态组件实时预览方法，其特征在于，所述根据diff算法比较所述第一虚拟d...
【专利技术属性】
技术研发人员：罗恺，
申请(专利权)人：北京创作美好科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。