形状可以设置动画吗？

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

终于迎来二十四节气的大雪，看样子天气是要变凉了，大家出门要注意保暖哟！又是周五啦，给大家分享一种很好玩的文字动画效果，这种文字动画效果是图形不断变化最后展示出完整

终于迎来二十四节气的大雪，看样子天气是要变凉了，大家出门要注意保暖哟！又是周五啦，给大家分享一种很好玩的文字动画效果，这种文字动画效果是图形不断变化最后展示出完整的文字内容，也算是一种特别特别简单的mg文字动画了。MG通常翻译为动态图形或者运动图形，动态图形指的是随时间流动而改变形态的图形，是影像艺术的一种。特别复杂炫酷的MG动画可是要花费大量的时间金钱精力去实现的，那么小编这里就分享一种简单的小动画，可以用来制作片头标题动画。

      首先点击上方给出的链接，将我们今天需要用到的工具下载安装好，这款工具的功能还是特别强大滴，安装起来也很方便快捷，这么强大的操作工具还是值得花时间去安装使用滴！安装完成后双击桌面上的图标运行应用程序，会弹出下图所示界面，点击“新建合成组”：

      此时看到‘图像合成设置’界面，最上方的合成组名称可以另起一个名称，虽然小编觉得这个名称用处不大！在其下方的预置处可以自行选择，视频编辑新手们就保持默认设置，或者根据小编下图所示设置；视频宽高自行设置。然后就是最下方的‘持续时间’设置，一般这种小动画有五秒左右就足够了：

      点击下图步骤一处的“T”字母按钮，然后在画面中划出文字显示区域；双击文字框区域，输入文字内容；然后全选文字内容；在界面右侧单击步骤二处的‘文字’，默认显示的是文字设置界面；根据个人喜好设置字体样式、字体大小、颜色等参数：

      文字样式设置好之后，鼠标右键单击步骤一处文字层显示的文字内容，注意是点击源名称处的文字内容，不要点到其他位置去了；在弹出来的选项中单击“从文字创建形状”，这时会自动隐藏文字层，新建出一个轮廓线字图层：

      单击下图步骤一处的小三角形按钮展开轮廓线字图层；然后单击步骤二处的‘添加’右侧的圆形小按钮，在显示的选项中单击选择‘修整路径’。这个步骤还是挺简单的，添加了修整路径之后我们暂时还看不出动画效果，接着往下操作就是了！

      此时我们来添加动画效果。首先在下图步骤一处将进度条拖至左侧0秒处；单击‘修整路径1’左侧的小三角形按钮展开修整路径的设置界面；单击步骤三处‘结束’左侧的小按钮；将‘结束’的数值设置为0%，这个设置就给0秒处添加了一个关键帧：

      上一步骤使0秒的时间点文字不显示，此时我们将进度条向右拖至文字完全显示的时间点，小编这里设置3秒时文字完全显示，于是将进图跳拖至3秒的时间点；然后将修整路径1的结束数值调整到100%，可以单击数值后直接输入数值，也可以单击并向右拖动数值至100%：

      为了让画面更美观一些，小编这里给文字下方加一条擦除出现的直线。鼠标右键单击界面左下方空白处；选择“新建”—“形状图层”；然后单击下图步骤三处的钢笔工具按钮；在画面中的文字下方单击两个点，会自动连成一条直线；这一步骤可以先将进度条拖到文字完全显示的时间点再操作：

      直线的擦除出现动画就很好设置了，单击下图步骤一处的形状图层1左侧的小三角形按钮；再单击步骤二处的‘添加’右侧的圆形小按钮，同样给直线添加‘修整路径’。由此可以看出，其实直线动画的设置跟文字动画的设置步骤是差不多的：

      单击界面左上方的指针按钮可拖动直线两端修改直线的位置，修改位置前一定要先选中形状图层，并且拖动直线两端的小按钮修改位置；然后将进度条拖至0秒处；依次展开形状图层1的‘目录’—‘形状1 ’—‘修整路径1 ’；单击步骤三处的‘结束’左侧的小按钮，将结束数值设置为0%：

      同样的，我们将时间轴上的进度条拖动到直线完全显示的时间点，小编这里设置文字完全显示的同时直线也完全显示，也就是3秒的时间点；然后在下图步骤二处将修整路径1的结束数值设置为100%，这样直线的关键字就设置好了；在路径1右侧的两个小按钮可以设置直线擦除方向：

      除了拖动时间轴上的进度条来查看动画效果，我们还可以敲键盘的空格键来预览整体动画效果；设置完成后单击界面上方菜单栏处的“图像合成”按钮；在显示的下拉列表中点击“添加到渲染队列”：

      此时在界面最下方显示了渲染队列，对于渲染设置和输出组件的设置，视频编辑新手就直接保持默认设置吧！不过输出位置还是要设置一下滴，点击下图步骤一处的橘色文字，此时弹出一个‘输出影片为’的小窗口，选择输出目录并设置文件名，最后点击“保存”：

      好啦，整体步骤就是这些，为了让动画更好看些，可以添加进视频片段来作为背景，记住视频图层要放在文字层下方哟，而且视频片段尽量短些，也可以新增固态层并设置渐变色来当做背景。

      这里输出的动画视频格式只能是avi格式，所占空间较大，所以这款工具比较适合制作一些几秒钟的小动画！另外想要其他视频格式的话可以用咱们的狸窝全能视频转换器进行转换。

      爸爸：我给你讲个故事。美国和前苏联进行空间竞赛，双方都遇到了一个问题，如何在无重力条件下写字。于是美国人花大价钱研制了无重力圆珠笔，前苏联人就用了铅笔。这说明，你就是跑到太空也得把作业做完！

浏览器使用与该形状对应的数据结构来表示文档。每个盒子都是一个对象，我们可以和这些对象交互，找出其中包含的盒子与文本。我们将这种表示方式称为文档对象模型（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图形设置动画 的文章

 

随机推荐