三角碎片动效（五）——焦点图轮播示例

发表于 | 分类于 | 评论数： | 阅读次数：

前言

接着上一篇三角碎片动效（四）——生成动画，这篇讲下具体应用示例：焦点图轮播。源码

概述

关于焦点图轮播，大家是最常见到的，也是有大量资源的，例如网页端使用广泛的swiper。本篇也是实现这样的图片切换，只不过过渡动画是用三角剖分实现的三角碎片动画。

效果展示

效果展示

详述

实现代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
var imgWidth = 0,
    imgHeight = 0,
    xSubNum = 6, //宽度分段数量
    ySubNum = 5, //高度分段数量
    offsetRatio = 0.5;


var container = document.getElementById('container');

var sourceArray = [
    "images/1.jpg",
    "images/2.jpg",
    "images/3.jpg",
    "images/4.jpg"
];
var index = 0;
preloadImg(sourceArray,function(images){
    slide(images);
})

// 执行动画
function slide(images) {
    var image = images[index];
    imgWidth = image.width;
    imgHeight = image.height;

    var vertices = getVertices(imgWidth, imgHeight, xSubNum, ySubNum, offsetRatio);
    var fragments = getFragments(vertices, image);
    
    
    TweenMax.set(container, {
        perspective: 500
    });


    var cvsArray = [];
    fragments.forEach(function (element, index) {
        var fragmentCvs = element.canvas;
        cvsArray.push(fragmentCvs);
        container.appendChild(fragmentCvs);
    })

    TweenMax.staggerFromTo(cvsArray, 0.2, {
        opacity: 0,
        z: 100,
        scale: 2
    }, {
        opacity: 1,
        z: 0,
        scale: 1
    }, 0.05, function(){
        // 完成一幅后切换下一幅
        container.innerHTML = '';
        index === sourceArray.length-1 ? index = 0 : index++;
        slide(images);
    });
}

后记

大家也看到了，这只是一个示例，动画效果很粗糙，如果要实际使用还需要做很多工作。

这也是我接下来要做的：

1，碎片动画完成后增加完整图片的显示（没有裂纹效果）；

2，性能优化，增加缓存，减少dom操作；

3，细节优化，打包；

4，完成一个标准的焦点图轮播组件。