当前位置:主页 > JavsScript库 > 动画 >

将花式像素粒子动画应用于图像 - Pict2Pix.js
栏目分类:动画   发布日期:2021-08-17   浏览次数:

Pict2Pix.js 是一个 JavaScript 库,它使用 Canvas API 为图像添加精美的像素粒子动画。

Pict2Pix.js使用:

1. 将 Pict2Pix.js 库的缩小版本导入到文档中。

<script src="/dist/pict2pix.min.js"></script>

2. 在目标图像上初始化库并完成。

<img id="image-demo" src="demo.jpg" />
const imageDemo = document.getElementById('image-demo');
window.onload = function initialize() {
  pict2pix.animate({
    image: imageDemo
  });
}

3. 指定粒子类型。可以是‘straight-particle’ 或 ‘twisted-particle’.。

pict2pix.animate({
  image: imageDemo,
  particleType: 'twisted-particle',
});

4. 指定要生成的粒子数。默认值:3000。

pict2pix.animate({
  image: imageDemo,
  numberOfParticles: 500,
});

5. 配置动画速度。默认值:1。

pict2pix.animate({
  image: imageDemo,
  horizontalSpeed: 1,
  verticalSpeed: 1,
});

官方网站:https://github.com/evaristocuesta/pict2pix

相关热词: Pict2Pix.js粒子动画

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库