pieces.js是一款效果非常炫酷的碎片化图片轮播切换特效js插件-BFW插件库

pieces.js是一款效果非常炫酷的碎片化图片轮播切换特效js插件

pieces.js是一款效果非常炫酷的碎片化图片轮播切换特效js插件。

她能够以多重碎片方式绘制和播放动画图片，文字以及SVG路径。

她的动画效果依赖anime.js动画库来实现，pieces碎片化图片轮播切换特效中使用了CSS变量，请使用支持CSS变量的现代浏览器来运行。

使用方式

第一步引入bfwone 加载依赖项animejs

第二步use插件

第三步配置参数

属性	类型	默认	描述
`canvas`	`String` or `Element`	`null`	.画布对象
`items`	`Array` or `Object`	`[]`	绘制和动画的对象，必须要. {type, value, options}这种格式，其中type可以使图片、文本及svg
`image`	`Array` or `Image`	`[]`	图片对象
`text`	`Array` or `String`	`[]`	文本对象
`path`	`Array` or `String`	`[]`	svg对象
`x`	`Integer` or `String`	`0`	x轴起始位置
`y`	`Integer` or `String`	`0`	y轴起始位置
`itemSeparation`	`Integer`	`1`	项目之间的分隔
`animation`	`Object`	`{duration: 1000, delay: 0, easing: 'easeInOutCubic'}`	animejs的默认参数
`debug`	`Boolean`	`false`	是否开启调试模式

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=anime.min&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["pieces.min"], function() {
                // Options for customization, see full list below
                var options = {
                    canvas: '.my-canvas',
                    text: 'BFW.WIKI'
                };
                // Animate everything to the "show" (`s_property`) values
                const anioptions = {
                    x: p => p.s_x,
                    y: p => p.s_y,
                    w: p => p.s_w,
                    h: p => p.s_h,
                    tx: p => p.s_tx,
                    ty: p => p.s_ty
                };
                // Initialize a new instance, by default the pieces will be 'hidden'
                var myPieces = new Pieces(options);

                // Show pieces using default options. See the full list of available operations below.
                //myPieces.showPieces();
                myPieces.animatePieces(anioptions);
            });
        });
    </script>
</head>
<body>
    <!-- Canvas to draw the pieces -->
    <canvas class="my-canvas"></canvas>


</body>
</html>

官网https://github.com/lmgonzalves/pieces

炫酷效果http://effect.bfw.wiki/effect/15656174602861050066.html