javascript特效素材网;js特效模板 收藏 0

别找AE模板了，这10个ae模板网站，小白也能做出炫酷视频！

上次把免费且优质的视频素材网站做成了一个合集，从人物风景 影视剧片段 到 3d素材等等依次做了汇总，并列出了版权说明。

别囤了！这些视频素材网站，绝对值得收藏！

而如果你想在短期内又快又好地制作视频，使用别人做好的AE 视频模板，无疑是最方便的技巧。这次给大家整理了好用的 AE 模板网站，国内国外都有（国外没有版权问题）并以一个Ae模板为例，介绍使用模板时可能会遇到的问题及对应的解决方法，希望你会喜欢。

01. 模板素材下载网站一：envato

envato是一个付费的创意社区网站，涵盖网页设计、视频和图形设计模板等，上面的模板资源质量都非常高。你想要找的任何设计或创意相关的资源，在这上面都能找到，包括Ae或Pr模板，你可以在线预览各种模板的效果。

不过，这个网站唯一的缺点是，上面的模板或素材都很贵，下面是一些畅销的AE模板，大家可以随意感受一下价格。 单独购买每个模板会显得比较贵，因此envato也推出了订阅制的服务，每个月缴纳16.5美元的订阅费，就可以无限制下载网站的资源。如果你是一名专职的设计师，我想这个价格应该是可以接受的。

二：幕后网

Muhou是国内的一个后期技术交流网站，上面有Ae、Pr和Final Cut Pro等软件的模板。你可以随意下载，但这些资源大多搬运自国外的网站，仅限于个人学习，不可用于商业盈利目的。

三：TemplateMonster

类似于Freepik，TemplateMonster也是一个出售设计作品的平台。你可以制作PPT模板，通过采集和伪原创的方式，从国内找到免费AE模板，裁剪出漂亮的部分，然后上传到TemplateMonster进行销售。

四：视频DIY素材网

视频 DIY，与 幕后类似，它也是一个供影视后期从业者交流的平台，它提供了许多来自国外的Ae和Pr模板，供大家免费下载学习，需要购买个邀请码，全站就都可以下载了。小编在群里要了个邀请码，先到先得～ ，A3839A454853CF7ACD50

02. Ae/Pr软件界面简介

对于之前没有接触过Ae或Pr的同学，这里简单介绍一下两个软件的界面，以便于后续对模板进行修改，有基础的同学可以自行跳过。说实话，刚接触Ae或Pr时，我也被这两个密密麻麻的界面吓到了，简直和Ps不是一个量级的。但后来用了一阵子，我发现其实也没那么可怕，打开的次数多了，就会变得亲近些了:)下图是Ae的界面，主要有四个窗口： 左侧是素材管理窗口，模板中用到的素材通过这个窗口进行管理；左下方是图层面板窗口，类似于PS的图层面板；居中显示的是最终效果预览窗口，添加的动画或效果都可以在这进行预览；右下方是时间线窗口，类似于视频播放器的进度条，你可以改变指针的位置，来快速预览任意时刻的内容。下图是Pr的界面，主要也有四个窗口： 左下方是素材管理窗口，在这里可以导入图片、视频和音频等素材；左上方是素材预览窗口，也叫源监视器，通过预览素材内容，为视频素材的一些片段打上标记，方便剪辑；右下方是视频编辑窗口，对多个视频进行合并或拆分等操作，都是在这里进行的；右上方是效果预览窗口，最终导出的视频成品可以在这里进行预览。

04. 修改模板

由于Pr模板的可编辑性较低，存在较大的限制，下面仅以修改Ae模板为例：

① 备份模板

下载好模板后，打开模板所在的文件夹，如果你下载的是Ae模板，那么文件夹里应该有以.aep结尾的文件，而如果是Pr模板，则有.mogrt结尾的文件。 打开模板之前，最好将未经修改的模板备份一次，因为后续对模板进行修改时，你可能会不小心修改不需要调整的参数。如果最开始将模板进行了备份，你可以通过对比两个文件参数的设置，找到改动过的地方。将模板进行备份，方法也很简单，右击模板工程，选择复制，接着在空白处再次右击，选择粘贴，就会生成一个模板的副本文件了。

② 字体缺失提示

使用Ae或Pr打开模板，大多数情况下都会弹出一个解析字体的窗口，这是因为模板使用了我们电脑没有安装的字体。字体缺失，对于模板来说不是大问题，通常我们只需要点击下方的取消按钮，直接进入编辑就好了。

③ 表达式报错

对Ae有一定了解的朋友，可能都知道，Ae有一个核弹级的功能——表达式，这里简单介绍一下表达式。表达式类似于我们在数学课上学过的函数，它按照一定的规则(遵循JavaScript编程规则)，实现用常规关键帧做出来稍显麻烦的动画效果，例如抖动效果。而有些模板为了便捷地实现一些动画效果，也会用到表达式。打开一些Ae模板，你可能会在预览窗口下方，看见一行颜色醒目的文字：此项目包含表达式错误。

此时，解决表达式报错最好的方法是，将你使用的中文版Ae切换成英文版。由于Ae没有内置切换中文版本的功能，这里需要手动进行切换：右击桌面上的Ae图标，选择打开文件所在的位置。 在打开的文件中，按照zdictionaries–zh_CN的文件夹路径，找到一个名为after_effects_zh_CN的文件，它就是中文版的翻译文件。如果你想把Ae由中文版切换成英文版，可以暂时将这个文件移动到桌面或其他文件夹。 此时，再次打开Ae，在软件的开始界面，你会发现，软件已经变成英文版的了。

④ 降低模板预览的分辨率

考虑到一些同学用的电脑性能不是很好，因此在预览模板的效果前，最好查看一下模板的预览分辨率，Ae和Pr查看分辨率略有区别，下面分别进行说明。对于Ae，在最终效果预览窗口底部的位置，在一个三原色icon的右侧，可以对模板的预览分辨率进行调整，一般设置为二分之一或三分之一。降低模板的预览分辨率，可以缩短预览视频时花费的渲染时间，也可以减小电脑运行压力。 至于Pr，在效果预览窗口右下方的位置，你可以看到一个孤零零的按钮，这个按钮就是用来调整预览时的视频分辨率的。

⑤ 打开隐藏图层

有些模板的作者，为了让图层管理面板看起来更加整洁，会选择隐藏部分不需要编辑的图层。但对于模板使用者来说，我们可能对某个形状的颜色不满意，想修改它的颜色，而这个你想修改的形状图层，可能就被隐藏起来了。如果你不知道Ae中的隐藏图层功能，在图层管理面板找了半天，翻遍了所有图层，可能都没见到形状图层的影子。打开隐藏图层的方法：如下图，点击图层管理面板右上方的第三个按钮，就可以看到所有隐藏的图层啦。 再次点击按钮，可以将图层再次进行隐藏。

⑥更改模板中的元素

前面的5点，说的是使用模板时可能会遇到的问题以及注意事项，克服了使用模板的重重障碍后，至此，终于可以对模板进行修改了。模板中可以更改的元素，包含文字、logo或图片。由于模板一般都包含了较多的图层，为方便使用模板的人修改模板，设计模板的人通常会将素材或合成做好命名。下面以更改一份Ae模板的logo为例，在素材管理窗口，你可以看到一个名为Insert Logo Here的文件夹，翻译过来就是，在此处插入你的logo。文件夹中包含了一张PNG图片和一个合成，我们要双击合成进行修改。 双击合成，图层管理窗口会打开一个新的面板，预览窗口显示的内容也会相应发生变化，此时预览窗口中的logo，是模板自带的logo。这里我想使用B站logo来替换原有logo，用鼠标直接将B站logo拖拽到图层管理面板中，接着关闭原有logo最前面的显示按钮，将其隐藏。这样操作下来，就完成了模板logo的替换。 在图层管理窗口中，从logo替换面板切换到最终合成的面板，就可以看到模板最终的效果啦。 修改模板中的其他元素，如文字或图片，其操作方法与修改logo类似，这里就不赘述。

05. 渲染导出视频

完成模板的修改后，我们就来到了渲染导出视频的环节。在这个环节，我们需要先设定好工作区，再选择导出的视频格式，才算真正掌握了视频的导出。

① 设定工作区

视频的工作区，决定了最终导出视频的长短，如果你想导出的视频只是模板中的一个片段，那么设定好合适的工作区，则能避免后续对导出的视频再次进行剪辑。在Ae的时间线窗口中，如下图，可以看见一个两端为蓝色的长条区域，这个区域就是工作区。 拖动工作区两端蓝色滑块的位置，可以改变工作区的长度，工作区所在的位置，就是最终导出可以得到的视频片段。

② 确定导出的视频格式

设置好工作区后，你可以使用快捷键Ctrl+M，将整个工程添加到渲染队列，也可以通过菜单栏的合成–添加到渲染队列。 点击添加到渲染队列，下方的图层管理窗口会打开一个渲染队列的面板。 在打开的渲染队列面板中，点击输出模块的无损，设置导出的视频格式。 在弹出的面板中，默认的格式为AVI，这是一种无损格式，导出的视频虽非常清晰，但视频体积也会非常大。这里我们可以将格式更改为QuickTime，这种格式导出的视频清晰度较高，且体积也较小，是一种理想的视频格式。 选择QuickTime格式后，点击右侧的格式选项，将视频编解码器由动画更改为H.264，点击确定，就完成了导出视频格式的设置。

完成视频格式的设置后，点击右侧的输出到，选择视频存放的位置，最后点击渲染队列面板右上角的渲染按钮，等待视频完成渲染即可。

06. 写在最后

和PPT模板一样，视频模板最大的好处在于，可以减少重复劳动和应急。但如果你的目的不止是套模板，而是希望能在视频制作方面有所突破，那么你也可以试着对一些高质量的视频模板进行拆解。选取模板中的某个效果，自己先试着动手，看看能不能单独做出同样的效果，再通过与拿到的模板源文件进行对比，找到两者之间存在的差异，学习还未掌握的技巧，弥补自身的不足。

免费开源的五彩纸屑飞舞特效的 JS 库，多用于在网页上欢乐庆祝场景

今天看科技周刊看到的一个酷炫的动效库，使用简单，视觉效果很好，推荐给大家。

Canvas Confetti 是一个基于 JavaScript 的特效动画库，可以在网页界面上轻松地实现五彩纸屑飞舞的庆祝场景特效。这个特效库封装了几种酷炫的特效，开发者通过简单的几行代码就可以实现这些动效。

基础效果

• 内置的粒子系统、模拟重力、衰减、漂移等算法，完美模拟了纸屑飘落的效果，呈现出了媲美游戏的视觉效果；
• 五彩飞舞动画基于 HTML5 的 canvas 元素实现，兼容性不错；
• 除了内置的纸屑，也支持自定义纸屑的形状，图片、SVG和文字都支持；

我们都知道 CSS3 的动画很强大，但想要实现类似于抛撒碎纸屑这么复杂的动画时，CSS3 来实现就显得很困难了，以前我遇到这种需求，都是考虑通过 hilo.js 这样的 H5 游戏引擎中的粒子系统来实现。不过今天看阮一峰老师的科技周刊，看到他推荐了一款专门用来实现抛撒五彩纸屑动效的工具库，研究了一下发现效果很好，使用也简单，于是决定写一篇文章推荐给大家。

也可以在 HTML 的直接引入 js 文件：

通过下面几行代码就可以简单实现一个抛撒五彩纸屑的特效动画：

Canvas Confetti 的动画是在网页上创建了一个铺满全屏的画布（canvas），这个 canvas 是无法响应事件的，比如无法点击，这样就相当于覆盖了一个纯视觉的动画层，完全不影响原有的网页界面。

需要注意的是，Canvas Confetti 是一个 JS 工具库，但只能运行在客户端（浏览器环境），是不能运行在 Node.js 这样的服务端的。另外，Canvas Confetti 实例化后的对象返回的是 Promise 对象，现代浏览器都支持，但老旧的浏览器（如 IE）是不支持的，如果要在这些浏览器上运行，一般需要使用 Promise 的 polyfills 来保证正常支持 Promise。

一般来说，只需要搞懂下面几个参数就可以满足场景的庆祝场面，我总结了一下，见下面的表格：

主要参数说明

烟花效果

即把五彩纸屑替换成金色的星星。

粒子图案是星星

下面代码实现的是让白色的纸屑像雪花一样飘落满屏的效果，多在浪漫温馨的场景中使用。

雪花飘落效果

总之这个工具库功能真的很强大，上面几个都是很酷炫的效果，更多效果可以自己去尝试。

Canvas Confetti 是一个免费开源的 JS 动画特效工具库，项目源码基于 ISC 许可协议托管在 Github 上，我们可以自由地下载来使用，也可以免费授权用于商业项目。

↓↓点击查看本次分享的网站。

Canvas Confetti – 免费开源的五彩纸屑飞舞特效的 JS 库，多用于在网页上实现欢乐庆祝的场景

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com