免费的粒子特效素材-如何使用HTML5+css3实现粒子效果文字动画特效（附完整代码）

AdobePremiere的简称是Pr,这是一款十分强大的剪辑软件。主要功能是剪辑视频,而且效果非常好,还有它的三个兄弟AU,PS,AE,都是Adobe公司的。Pr的主要功能就是视频剪接、字幕添加、转场过渡、音频调节、色彩调整等。众所周知,pr的特点是专业,上有有一定的难度,需要专业学习,才能做出高质量的视频,所以说pr的制作难度对于小白来说还是比较大的。要说这么多版本的pr软件,我觉得最好用的还是要数pr2018。好用到什么程度呢?下面是一个粒子消散效果的制作教程,一起来看看吧!

详细步骤如下:

1、新键字幕,然后键入文本内容,再根据需要适当调整字体、大小和位置。

2、调整字幕和音乐轨道对齐,再拖入准备好的消散素材,然后预览一下,将素材后面不需要的部分裁剪掉。

3、在视频素材上点击鼠标右键,选择【速度/持续时间】,在弹出窗口调整【速度】为140左右,然后将视频素材与文字素材对齐。

4、如图,在右边的【效果】搜索轨道遮罩键,将效果拖到文字轨道上,在【效果控件】调整【合成方式】为亮度遮罩,【遮罩】为视频3,勾选【反向】。

5、将准备好的粒子素材放入序列,选择【颜色】,调整饱和度的数值到最低,让粒子变成白色。

6、接着调整粒子的大小和位置,选择【效果控件】,点击【运动】,调整粒子到最大,再将它移到画面中文字快消散的位置。7、调整好粒子的大小和位置后,预览效果,检查并调整;调整好后,按住【Alt】键将粒子层多复制几个。

8、选中要调整的粒子层,点击【运动】,根据需要适当调整粒子消散的位置,再适当调整【旋转】的数值,同理处理其他的粒子层,给粒子消散的位置和角度做一些变化。

10、这样就完成了,再预览一下视频

以上就是关于pr2018制作粒子消散效果的详细步骤了。PremierePro2018版本引入了许多性能改进,增强了稳定性,非常适合视频编辑者以及线上内容创作者使用哦。后期的话还是建议大家花点时间去学习一下pr,这个软件真的是最好用的。

Particle Playground(粒子特效)和水波特效(Wave World)、散焦特效(Caustics)、泡沫特效(Foam)、爆炸特效(Shatter)同属于Simulation特效系统。其中的Particle Playground(粒子特效)可以产生大量相似物体独立运动的模拟效果。在自然界中存在很多个体独立而整体相似的物体运动,我们可以通过该粒子特效系统模拟这种符合

自然规律

的运动,比如雪花、雨点等都可以是我们模拟的对象。象这种相互之间既有又有制约,整体相似个体不同的物质我们称之为粒子。Particle Playground(粒子特效)特效可以从物理学和数学上对它们进行描述来模拟生产真实的粒子运动效果,比如纷飞的大雪,飘落的大雨等。

粒子功能最强的是Thinking partical和houdini pop 行业顶尖,不过你要不是做影视的也用不到;然后是partical flow,也很强大,但是也是三维粒子

AE中的particular也是很厉害的,属于2维粒子中非常强大的了,而更主要它集成在AE中,能够借助AE的强大功能发挥出威力。幻影粒子学的不多,但是个人感觉那个唯一的优点就是有丰富的粒子库。

我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发。今天我们要来分享一款基于HTML5和css3的文字特效——粒子效果文字动画特效。本篇文章给大家带来的内容是关于如何使用HTML5+css3实现粒子效果文字动画特效,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

粒子效果文字动画特效的原理

当我们拿到一段文字,可以放到ps里面放大观察,文字是由一个个很小的颜色不同的像素点绘制出来的,那么粒子效果文字动画特效需要做的就是通过降低像素数使像素点变成圆形,再拼凑出文字内容。总的来说就是通过将输入的信息转化为图片后,读取图片的像素信息,同时粗略的将图片分块,遍历每块区域中的像素点判断该块是否需要画一个粒子。

实现粒子效果文字动画特效的步骤

步骤一:文字转化为图片插入canvas

function loadCanvas(value) {

var fontSize = 100,

width = calWordWidth(value, fontSize),

canvas = ('canvas')

= 'b_canvas'

= width

= fontSize

var ctx = ('2d')

= fontSize + "px Microsoft YaHei"

= "orange"

(value, 0, fontSize / 5 * 4)

getImage(canvas, ctx)

}

function getImage(canvas, ctx) {

var image = new Image()

= ("image/jpeg")

= function()

}步骤二:降低像素数

var imageData = (0, 0, , )

var dataLength =

var diff = 4

var newCanvas = ('canvas')

var newCtx = ('2d')

for (var j = 0; j < ; j += diff) {

for (var i = 0; i < ; i += diff) {

var colorNum = 0

for (var k = 0; k < diff * diff; k++) {

var row = k % diff

var col = ~~(k / diff)

let r = [((j + col) * + i + row) * 4 + 0]

let g = [((j + col) * + i + row) * 4 + 1]

let b = [((j + col) * + i + row) * 4 + 2]

if (r < 10 && g < 10 && b < 10) colorNum++

}

if (colorNum < diff * diff / 3 * 2) {

var option = {

x: i,

y: j,

radius: 6,

color: '#fff'

}

var newBubble = new Bubble(option)

(newCtx)

}

}

}效果如图所示

【相关推荐】

如何使用css3实现图片的自动轮播特效(附完整代码)

css3的颜色线性渐变属性:几种颜色之间的平稳过渡(附完整代码)