发布网友 发布时间:2022-04-22 01:44
共2个回答
懂视网 时间:2022-04-20 15:54
这次给大家带来用H5制作烟花粒子特效的制作方法,怎么用H5制作特效?H5制作烟花粒子特效的流程,H5制作烟花粒子特效的注意事项有哪些,一起来看一下。<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Canvas烟花粒子特效制作</title> <meta name="keywords" content=" Canvas烟花粒子特效制作" /> <meta name="description" content=" Canvas烟花粒子特效制作" /> <link rel="stylesheet" href="css/style.css"> </head> <body> <canvas id="canvas">Canvas is not supported by your browser.</canvas> <script src="js/index.js"></script> </body> </html> Css部分: * { margin: 0; padding: 0; } html, body { height: 100%; } body { background: #000; } canvas { display: block; cursor: crosshair; }
相信看了这些案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
相关阅读:
HTML里无法显示背景颜色的解决方法
怎么优化HTML网页
Js获取获取样式的常见方式
热心网友 时间:2022-04-20 13:02
首先绘制一个烟花。Ctrl+F8新建一个图片元件,取名烟花。N键调出线条工具如图拉出两条线。
flash遮罩实例——烟花
2
V键改为选择工具,如图拖动线条逐步改变成满意的形状,使其成为烟花的一根线条。填充上颜色,因为将来是作为遮罩层,所以,颜色随意。
flash遮罩实例——烟花
3
选中后按住Alt键复制多个,改变大小、弧度,最后形成一个完整的烟花。
flash遮罩实例——烟花
4
新建一个图片元件,取名彩遮罩。O键调出椭圆工具,按住shift键画出一个正圆,颜色如图设置。
flash遮罩实例——烟花
5
打开库面板,可以用Ctrl+L键打开。选中彩遮罩,右键——直接复制,复制出5个,分别改名:黄、蓝、绿、玫红遮罩。
flash遮罩实例——烟花
6
双击红遮罩,进入编辑,将颜色如图改变,注意中心透明。
flash遮罩实例——烟花
7
其余遮罩颜色如图。真正操作时这些彩色渐变是放在被遮罩层使用。
flash遮罩实例——烟花
flash遮罩实例——烟花
END
二、制作烟花动画
Ctrl+F8新建一个影片剪辑元件,我为它取名烟花组合。前面空出三帧,后面会放入声音,空几帧,造成先有声音,后出烟花的效果。第四帧F6掺入关键帧,放入玫红遮罩。
flash遮罩实例——烟花
新建图层2,同样在第四帧插入关键帧,放入烟花元件。
flash遮罩实例——烟花
图层1第25帧插入关键帧,Q键调出变形工具,按住shift键将玫红遮罩变形框向外拖动,使该元件同比例放大。相反,图层2第25帧插入关键帧,将烟花元件缩小。随后,回到第四帧,为每一层创建补间动画。
flash遮罩实例——烟花
图层2,第26帧F7插入空白关键帧。选中4——25帧,按住Alt键拖动复制到第31帧,使31——52帧出现同样动画。同样,重复刚才的动作,使图层2出现三个烟花由小变大的动画。如图。
flash遮罩实例——烟花
图层1同上处理。随后Ctrl+F3调出属性面板,选中第31帧,点“交换”按钮,在出现的交换元件面板中选择绿遮罩元件,同样将每一组动画的前一帧与最后帧换成相同的遮罩。这里第三组元件我换成了彩遮罩。至此,完成了一个烟花组合。
flash遮罩实例——烟花
图层2右键——遮罩层,将图层2、1改成遮罩与被遮罩关系。
flash遮罩实例——烟花
同样,我们用另外三个遮罩,完成另一种色彩的烟花组合。这里,我复制了一个烟花元件,将每一根线条稍作扭曲,产生断续感。并且将帧数加长,使场景中的烟花渐续绽放。
flash遮罩实例——烟花