形状可以设置动画吗？

来源：蜘蛛抓取(WebSpider) 时间：2022-06-01 01:38 标签： 为smartart图形设置动画

身份认证 购VIP最低享 7 折!

framer-path, 在 Framer JS中，创建自定义svg形状并分别设置每个点的动画 创建自定义svg形状并在 Framer JS中单独设置每个点动画。可以用于以下用途：使用快速数学表达式创建点数组动画图形&统计简单动画图标流体形状如何安装：将'路径。咖啡'文件下载到项目/modules/

浏览器使用与该形状对应的数据结构来表示文档。每个盒子都是一个对象，我们可以和这些对象交互，找出其中包含的盒子与文本。我们将这种表示方式称为文档对象模型（Document Object Model），或简称 DOM。

我们可以通过全局绑定document来访问这些对象。该对象的documentElement属性引用了<html>标签对象。由于每个 HTML 文档都有一个头部和一个主体，它还具有head和body属性，指向这些元素。

回想一下第 12 章中提到的语法树。其结构与浏览器文档的结构极为相似。每个节点使用children引用其他节点，而每个子节点又有各自的children。其形状是一种典型的嵌套结构，每个元素可以包含与其自身相似的子元素。

如果一个数据结构有分支结构，而且没有任何环路（一个节点不能直接或间接包含自身），并且有一个单一、定义明确的“根节点”，那么我们将这种数据结构称之为树。就 DOM 来讲，MENT_NODE）。

因此我们可以使用另一种方法来表示文档树：

叶子节点是文本节点，而箭头则指出了节点之间的父子关系。

并非只有 JavaScript 会使用数字代码来表示节点类型。本章随后将会展示其他的 DOM 接口，你可能会觉得这些接口有些奇怪。这是因为 DOM 并不是为 JavaScript 而设计的，它尝试成为一组语言中立的接口，确保也可用于其他系统中，不只是 HTML，还有 XML。XML 是一种通用数据格式，语法与 HTML 相近。

这就比较糟糕了。一般情况下标准都是非常易于使用的。但在这里其优势（跨语言的一致性）并不明显。相较于为不同语言提供类似的接口，如果能够将接口与开发者使用的语言进行适当集成，可以为开发者节省大量时间。

我们举例来说明一下集成问题。比如 DOM 中每个元素都有childNodes属性。该属性是一个类数组对象，有length属性，也可以使用数字标签访问对应的子节点。但该属性是NodeList类型的实例，而不是真正的数组，因此该类型没有诸如slice和map之类的方法。

有些问题是由不好的设计导致的。例如，我们无法在创建新的节点的同时立即为其添加子节点和属性。相反，你首先需要创建节点，然后使用副作用，将子节点和属性逐个添加到节点中。大量使用 DOM 的代码通常较长、重复和丑陋。

但这些问题并非无法改善。因为 JavaScript 允许我们构建自己的抽象，可以设计改进方式来表达你正在执行的操作。 许多用于浏览器编程的库都附带这些工具。

DOM 节点包含了许多指向相邻节点的链接。下面的图表展示了这一点。

尽管图表中每种类型的节点只显示出一条链接，但每个节点都有parentNode属性，指向一个节点，它是这个节点的一部分。类似的，每个元素节点（节点类型为 1）均包含childNodes属性，该属性指向一个类数组对象，用于保存其子节点。

理论上，你可以通过父子之间的链接移动到树中的任何地方。但 JavaScript 也提供了一些更加方便的额外链接。firstChild属性和lastChild属性分别指向第一个子节点和最后一个子节点，若没有子节点则值为null。类似的，previousSibling和nextSibling指向相邻节点，分别指向拥有相同父亲的前一个节点和后一个节点。对于第一个子节点，previousSibling是null，而最后一个子节点的nextSibling则是null。

也存在children属性，它就像childNodes，但只包含元素（类型为 1）子节点，而不包含其他类型的子节点。 当你对文本节点不感兴趣时，这可能很有用。

处理像这样的嵌套数据结构时，递归函数通常很有用。 以下函数在文档中扫描包含给定字符串的文本节点，并在找到一个时返回true：

我要回帖

更多关于 为smartart图形设置动画 的文章

 

随机推荐