HTML5 Canvas GSAP 海盗相册

Canvas Gallery。切换动画也是海盗式的切割动效

gallery,pirate

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3027
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var container = document.getElementById('container'),
    containerWidth = 768,
    containerHeight = 768,
    imageWidth = 768,
    imageHeight = 512,
    imageTop = (containerHeight - imageHeight) * 0.5,
    imageBottom = imageTop + imageHeight,
    imageTopLeft = new Point(0, imageTop),
    imageTopRight = new Point(imageWidth, imageTop),
    imageBottomLeft = new Point(0, imageBottom),
    imageBottomRight = new Point(imageWidth, imageBottom);

var lineCanvas = document.getElementById('line_canvas'),
    lineCtx = lineCanvas.getContext('2d'),
    cuttingLine,
    cutDelta = new Point();

var leftCanvas = document.getElementById('left_canvas'),
    leftCtx = leftCanvas.getContext('2d'),
    rightCanvas = document.getElementById('right_canvas'),
    rightCtx = rightCanvas.getContext('2d');

var animating = false;

var images,
    image,
    imageIndex = 0;

var prevBtn = document.getElementById('prev_btn'),
    nextBtn = document.getElementById('next_btn');

window.onload = function() {
    getImages();
    setupNavigation();
    createCuttingLine();

updateButtonStates();
        cut();
        animate();
};

function getImages() {
    images = document.getElementsByTagName('img');
    image = images[imageIndex];

image.style.visibility = 'visible';
}

function updateButtonStates() {
    prevBtn.className = 'btn ' + (imageIndex === 0 ? 'disabled' : 'enabled');
    nextBtn.className = 'btn ' + (imageIndex === (images.length - 1) ? 'disabled' : 'enabled');
}

function createCuttingLine() {
    cuttingLine = new Line(new Point(), new Point(), '#fff');
}

function cut(dir) {
    // hide image, reset canvases
    image.style.visibility = 'hidden';
    TweenMax.set([leftCanvas, rightCanvas], {
        x: 0,
        y: 0,
        rotation: 0,
        alpha: 1
    });
    leftCtx.clearRect(0, 0, imageWidth, imageHeight);
    leftCtx.restore();
    rightCtx.restore();
    rightCtx.clearRect(0, 0, imageWidth, imageHeight);

// get random points on top and bottom line
    if (dir == 'next') {
        lerp(imageTopLeft, imageTopRight, randomRange(0.2, 0.4), cuttingLine.start);
        lerp(imageBottomLeft, imageBottomRight, randomRange(0.6, 0.8), cuttingLine.end);
    } else {
        lerp(imageTopLeft, imageTopRight, randomRange(0.6, 0.8), cuttingLine.start);
        lerp(imageBottomLeft, imageBottomRight, randomRange(0.2, 0.4), cuttingLine.end);
    }

// clip left and right canvas
    leftCtx.save();
    leftCtx.beginPath();
    leftCtx.moveTo(0, 0);
    leftCtx.lineTo(cuttingLine.start.x, 0);
    leftCtx.lineTo(cuttingLine.end.x, imageHeight);
    leftCtx.lineTo(0, imageHeight);
    leftCtx.closePath();
    leftCtx.clip();
    leftCtx.drawImage(image, 0, 0);

rightCtx.save();
    rightCtx.beginPath();
    rightCtx.moveTo(cuttingLine.start.x, 0);
    rightCtx.lineTo(imageWidth, 0);
    rightCtx.lineTo(imageWidth, imageHeight);
    rightCtx.lineTo(cuttingLine.end.x, imageHeight);
    rightCtx.closePath();
    rightCtx.clip();
    rightCtx.drawImage(image, 0, 0);

// get deltas
    cutDelta.x = cuttingLine.end.x - cuttingLine.start.x;
    cutDelta.y = cuttingLine.end.y - cuttingLine.start.y;

// make lines a little longer
    cuttingLine.start.x -= cutDelta.x * 0.25;
    cuttingLine.start.y -= cutDelta.y * 0.25;
    cuttingLine.end.x += cutDelta.x * 0.25;
    cuttingLine.end.y += cutDelta.y * 0.25;
}

function animate() {
    animating = true;

var tl = new TimelineMax({
            onComplete: function() {
                animating = false
            }
        }),
        firstCanvas,
        secondCanvas,
        rotationOrigin,
        targetRotation;

if (cutDelta.x < 0) {
        firstCanvas = leftCanvas;
        secondCanvas = rightCanvas;
        rotationOrigin = 'right top';
        targetRotation = -45;
    } else {
        firstCanvas = rightCanvas;
        secondCanvas = leftCanvas;
        rotationOrigin = 'left top';
        targetRotation = 45;
    }

tl.append(cuttingLine.animateIn());

tl.to(container, 0.1, {
        x: -16,
        y: 16,
        ease: RoughEase.ease
    }, '+=0.2');
    tl.to(container, 0.1, {
        x: 16,
        y: -16,
        ease: RoughEase.ease
    });
    tl.to(container, 0.05, {
        x: 0,
        y: 0,
        ease: RoughEase.ease
    });

tl.append(cuttingLine.animateOut());

tl.to(firstCanvas, 0.6, {
        x: '+=' + cutDelta.x,
        y: '+=' + cutDelta.y,
        ease: Quint.easeIn,
        delay: 0.2
    });
    tl.to(firstCanvas, 0.4, {
        alpha: 0,
        ease: Quint.easeOut
    }, '-=0.2');

tl.to(secondCanvas, 1, {
        rotation: targetRotation,
        transformOrigin: rotationOrigin,
        ease: Back.easeOut
    }, '+=0.1');
    tl.to(secondCanvas, 0.6, {
        y: '+=' + cutDelta.y,
        ease: Quint.easeIn
    }, '-=0.4');
    tl.to(secondCanvas, 0.4, {
        alpha: 0,
        ease: Quint.easeOut
    }, '-=0.2');

tl.fromTo(prepNextImage(), 0.5, {
        y: -100,
        alpha: 0
    }, {
        y: 0,
        alpha: 1,
        ease: Back.easeOut
    });
}

function prepNextImage() {
    image = images[imageIndex];
    image.style.visibility = 'visible';

return image;
}

//////////////////////////
// Line and Point
//////////////////////////
function Line(start, end, color) {
    this.start = start;
    this.end = end;
    this.color = color;

this.p0 = new Point();
    this.p1 = new Point();
}
Line.prototype = {
    animateIn: function() {
        var tl = new TimelineMax({
            onUpdate: this.draw,
            onUpdateScope: this
        });

this.p0.x = this.p1.x = this.start.x;
        this.p0.y = this.p1.y = this.start.y;

tl.to(this.p1, 0.2, {
            x: this.end.x,
            y: this.end.y,
            ease: Cubic.easeIn
        });

return tl;
    },
    animateOut: function() {
        var tl = new TimelineMax({
            onUpdate: this.draw,
            onUpdateScope: this
        });

tl.to(this.p0, 0.2, {
            x: this.end.x,
            y: this.end.y,
            ease: Cubic.easeIn
        });

return tl;
    },
    draw: function() {
        lineCtx.clearRect(0, 0, containerWidth, containerHeight);
        lineCtx.lineWidth = 4;
        lineCtx.lineCap = 'round';
        lineCtx.strokeStyle = this.color;
        lineCtx.beginPath();
        lineCtx.moveTo(this.p0.x, this.p0.y);
        lineCtx.lineTo(this.p1.x, this.p1.y);
        lineCtx.stroke();
    }
};

function Point(x, y) {
        this.x = x || 0;
        this.y = y || 0;
    }
    ///////////////////////////////////////////////
    // UTILS
    ///////////////////////////////////////////////
function lerp(p0, p1, t, tp) {
    tp = tp || new Point();

tp.x = p0.x + t * (p1.x - p0.x);
    tp.y = p0.y + t * (p1.y - p0.y);

return tp;
}

function randomRange(min, max) {
    return min + Math.random() * (max - min);
}

编译

CSS

HTML

Canvas Gallery。切换动画也是海盗式的切割动效

gallery,pirate

编辑器支持Emmet

快捷键

Canvas Gallery。切换动画也是海盗式的切割动效

gallery,pirate

使用BabylonJS（HTML5 WebGL）实现的刺客信条海盗网页游戏

HTML5+React.js+owl.carousel.js 幻灯片背景色自适应

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：