python制作的炫酷动画_【实战】这个炫酷的播放粒子效果，你也可以学会！使用Web动画API制作...
又一期实战教程来了，本次实战教你创建一个粒子魔术效果，跟着我做，包你也能学会和理解。
当谈到运动和动画时，可能没有什么比粒子更让我喜欢了，这就是为什么每次我探索新技术时，我总是以尽可能多的创建粒子来演示。
在本文中，单击按钮时，我们将使用Web Animations API创建烟花效果，从而制作更多的粒子魔术。
效果如下
本文演示和完整代码已经放在我的博客小码页面
让我们开始吧！
浏览器支持
在我撰写本文时，除了Safari和Internet Explorer（IE是全民公敌、Safari是新时代的IE）之外，所有主流浏览器至少部分支持Web动画API。Safari支持可以在“实验性特性”开发人员菜单中启用。
这个浏览器支持的数据来自Caniuse。数字表示浏览器支持该版本及以上的功能。
HTML设置
该演示不需要太多的HTML，我们将使用一个 元素，但它可以是另一种类型的标签元素。如果我们真的想的话，我们甚至可以听到页面上的任何点击声，让粒子从任何地方弹出。
Click on me
CSS设置
由于每个粒子都有一些共同的CSS属性，我们可以在页面的全局CSS中设置它们。因为您可以在HTML中创建自定义标签元素，所以我将使用 标签名称来避免使用语义标签。但事实是，您可以为
， 或您选择的任何标记设置动画。
particle {
border-radius: 50%;
left: 0;
pointer-events: none;
position: fixed;
top: 0;
}
这里要注意几件事：
粒子不应与页面布局相互作用，因此我们设置了一个 fixed 位置，top 和 left 分别为 0px。
我们还将删除指针事件，以避免HTML粒子在屏幕上时与用户的任何交互。
因为样式化按钮和页面布局并不是本文的真正目的，所以我将把它放在一边。
JavaScript设置
这是我们将在JavaScript中执行的六个步骤：
监听按钮上的点击事件
创建30个 元素并将其附加到
为每个粒子设置随机的宽度，高度和背景
使每个粒子淡出时，将其从鼠标位置动画化到随机位置
动画完成后，从DOM中删除
步骤1：点击事件
// 我们首先检查浏览器是否支持Web Animations API
if (document.body.animate) {
// 如果支持，我们在按钮上添加一个点击监听器
document.querySelector('#button').addEventListener('click', pop);
}
步骤2：粒子
// 每次点击都会调用 pop() 函数
function pop(e) {
// 循环一次生成30个粒子
for (let i = 0; i < 30; i++) {
// 我们将鼠标坐标传递给 createParticle() 函数
createParticle(e.clientX, e.clientY);
}
}
function createParticle(x, y) {
// 创建自定义粒子元素
const particle = document.createElement('particle');
// 将元素添加道body中
document.body.appendChild(particle);
}
步骤3：粒子宽度，高度和背景
function createParticle (x, y) {
// [...]
// 计算从5px到25px的随机大小
const size = Math.floor(Math.random() * 20 + 5);
// 将大小应用于每个粒子
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
// 在蓝色/紫色调色板中生成随机颜色
particle.style.background = `hsl(${Math.random() * 90 + 180}, 70%, 60%)`;
}
步骤4：为每个粒子添加动画
function createParticle (x, y) {
// [...]
// 在距离鼠标75像素的范围内生成随机的x和y目标
const destinationX = x + (Math.random() - 0.5) * 2 * 75;
const destinationY = y + (Math.random() - 0.5) * 2 * 75;
// 将动画存储在变量中，因为稍后我们将需要它
const animation = particle.animate([
{
// 设置粒子的原点位置
// 我们将粒子偏移一半大小，以使其围绕鼠标居中
transform: `translate(${x - (size / 2)}px, ${y - (size / 2)}px)`,
opacity: 1
},
{
// 我们将最终坐标定义为第二个关键帧
transform: `translate(${destinationX}px, ${destinationY}px)`,
opacity: 0
}
], {
// 将随机持续时间设置为500到1500ms
duration: 500 + Math.random() * 1000,
easing: 'cubic-bezier(0, .9, .57, 1)',
// 将每个粒子延迟从0ms到200ms的随机值
delay: Math.random() * 200
});
}
因为我们有一个随机的延迟，所以等待开始动画的粒子在屏幕的左上角可见，为了防止这种情况，我们可以在全局CSS中为每个粒子设置零不透明度。
particle {
/* 和之前的一样 */
opacity: 0;
}
步骤5：动画完成后删除粒子
从DOM中删除粒子元素很重要，因为我们每次点击都会创建30个新元素，所以浏览器的内存很快就会被填满，导致出现问题。我们可以这样做：
function createParticle (x, y) {
// 和前面的相同
// 动画结束后，从DOM中删除元素
animation.onfinish = () => {
particle.remove();
};
}
最终结果
把前面所说的所有的代码整合在一起，我们就得到了我们想要的：一个丰富多彩的粒子爆炸效果。
发挥创造力
因为所有这些都是使用CSS，所以修改粒子样式非常简单，下面这五个使用各种形状甚至字符的示例！
如果对你有所启发和帮助，可以点个关注、收藏，也可以留言讨论，这是对作者的最大鼓励
作者简介：Web前端工程师，全栈开发工程师、持续学习者。
python制作的炫酷动画_【实战】这个炫酷的播放粒子效果，你也可以学会！使用Web动画API制作...相关推荐
- 易语言制作计算软件简单步骤_视频解说不想自己录，用什么简单好用的配音软件制作？...
原标题:视频解说不想自己录,用什么简单好用的配音软件制作? 最近经常听到一些朋友都在问, 怎么给视频配音,有什么简单好用的工具推荐,我总结了一些方法,希望对各位有所帮助,话不多说,请往下看. 定位要解 ...
- java粒子特效_程序员20分钟搞定粒子效果, 仅仅200行代码
原标题:程序员20分钟搞定粒子效果, 仅仅200行代码 这粒子的打造,确实没有布局代码,稍后大家在源码上可以看到,css代码都只有几行,绝大部分代码都是java代码,而且是原生java书写的,现在很多 ...
- 用python画的炫酷图形_推荐一个炫酷Python 手绘图形库
https://github.com/chenjiandongx/cutecharts 今天,给大家介绍一个很酷的 Python 手绘风格可视化神包:cutecharts.和 Matplotlib . ...
- python界面如何设置成黑色_实战！在Python中制作精美的图形用户界面
在默认情况下,我们使用PyQt5创建出来的窗口和部件都是自带的默认样式,虽然谈不上很丑,但是也毫无美感可言.其实,在PyQt5中,我们可以有较高的自由度来自定义窗口和各种小部件的样式,通过自定义这些样 ...
- python画一个祝福别人生日快乐_还在送生日贺卡？试试为家人朋友创作一个生日动画短视频吧...
最近有很多小伙伴问我要怎么做生日祝福视频,既然是祝福,走心是最重要的了,要准备生日祝福语(最简单的就是那句"生日快乐"),要准备一些幸福样子的照片(记得修图),当然还要准备一些小礼 ...
- python f.write 保存图片到路径_实战 | Python批量提取Win10锁屏壁纸
实战 | Python批量提取Win10锁屏壁纸 使用Win10的朋友会发现,每次开机锁屏界面都会有不一样的漂亮图片,这些图片通常选自优秀的摄影作品,十分精美. 但是由于系统会自动更换这些图片,所以就 ...
- html打开网页过场动画_音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
音视频格式转换神器--格式工厂 如果您下载了上一篇<为HTML页面添加音频.视频的方法--零基础自学网页制作>(目录在结尾)中的素材,您会看到有这样一个文件,如图 这就是格式工厂软件的安装 ...
- canvas 擦除动画_用HTML5 Canvas 做擦除及扩散效果
2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...
- html打开网页过场动画_快来！这里有5分钟看完马上学会的HTML基础大全
很多人会问做运营为什么我要了解前端HTML.首先做运营最主要的是做各种活动,做活动自然要面对客户,当然要能设计页面,做设计当然要懂页面技术 HTML了,所谓技多不压身,而且在这个快节奏的时代,掌握的技 ...
- python实现微信朋友圈点赞_使用vue做类似于微信点赞的效果？
遇到这么个问题: 如图: 多条朋友圈,当我点赞时,当前的这条朋友圈给我追加用户,点赞数量也相应地增加,再次点击点赞时就是取消点赞也就相应地删除这个点赞用户名字,点赞数量也相应减少. 这个该怎么做呀?? ...
最新文章
- 一个免费分享绘图代码的网站
- day38--MySQL基础二
- Linux内核的整体架构介绍
- 用MySQL创建数据库和数据库表
- JUNIPER SRX Ipsec ××× 点对点Policy base ×××连接测试
- 好久没弄数学了,一本书上出现了,应该是指代了什么意思,问下.
- Pose Get的区别
- python 改文件名字_【Python】按要求修改文件名
- 萌豆工作室《用户许可协议》
- MySQL MGR实现分析 - 成员管理与故障恢复实现
- Microsoft Visio2019安装+解码（无需破-解-码）
- 接口测试加密解密以及接口签名sign原理
- 中兴盒子B860AV2.1-A-B-M-U，通刷，线刷刷机固件
- python简单的购物程序代码打折_Python进阶之路——简单购物代码
- macpro如何清理磁盘空间_在MacBook上，释放磁盘空间的7种方法
- spoj COT COT2
- 你见过马化腾18年前编写的代码吗?
- dynamicCondition v3.0.6 插件新增下拉树编辑器
- 【返老还童】大脑衰老可逆转，只需注入年轻脑脊液 From Nature
- 乐固加固APP后无法启动