使用Matter.js和GSAP实现的字符和圆球碰撞交互动画

圆球和字符碰撞时，会呈现脉冲波动画。

html5, ball, collision

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var cursorX;
var cursorY;
var w = document.body.clientWidth;
var h = document.body.clientHeight;
var stage = document.querySelector('[data-el="stage"]');
var head = document.querySelector('[data-el="head"]');
var letters = head.querySelectorAll('[data-el="letter"]');
var blocks = [];
var borders = [];
var bouncer = document.querySelector('[data-el="bouncer"]');
var bouncerRadius = bouncer.clientWidth * 0.5;
var bouncerClone;
var bubbles = [];
var categories = {
    catMouse: 0x0002,
    catBody: 0x0004
}

initDim = {
    w: document.body.clientWidth,
    h: document.body.clientHeight
};

// ______________________________ Matter.js module aliases
var Engine = Matter.Engine,
    World = Matter.World,
    Body = Matter.Body,
    Bodies = Matter.Bodies,
    Render = Matter.Render,
    Constraint = Matter.Constraint,
    Mouse = Matter.Mouse,
    MouseConstraint = Matter.MouseConstraint;

// ______________________________ canvas element to draw into
var canvas = document.createElement('canvas'),
    context = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 600;

// ______________________________ Matter engine
var engine = Engine.create({
    enableSleeping: false
});
engine.world.wireframes = false;
engine.world.gravity.x = 0;
engine.world.gravity.y = 0;

var renderer = Render.create({
    element: stage,
    canvas: canvas,
    context: context,
    engine: engine,
    options: {
        bounds: true,
        showBounds: false,
        background: "transparent",
        width: w,
        height: h,
        wireframes: false
    }
});

var initBubbles = function() {
    if (!letters || letters.length == 0) return;
    var bubbleContainer = document.querySelector('[data-el="bubbles"]');
    for (var i = 0; i < letters.length * 2; i++) {
        var bubble = document.createElement('div');
        bubble.classList.add('bubble');
        bubble.dataset.active = 'false';
        bubbleContainer.appendChild(bubble);
        bubbles.push(bubble);
    }
}

var animateBubble = function(x, y) {

for (var i = 0; i < bubbles.length; i++) {
        if (bubbles[i].dataset.active == 'false') {
            animate(bubbles[i], x, y);
            break;
        }
    }

}

Matter.Events.on(engine, 'collisionStart', function(event) {

var pairs = event.pairs;

for (var i = 0; i < pairs.length; i++) {
        var pair = pairs[i];
        if (pair.bodyA.isStatic || pair.bodyB.isStatic) return;
        animateBubble(
            pair.bodyA.position.x + (pair.bodyA.position.x - pair.bodyB.position.x) * -0.5,
            pair.bodyA.position.y + (pair.bodyA.position.y - pair.bodyB.position.y) * -0.5
        );
    }
})

var updatePosition = function() {

requestAnimationFrame(updatePosition);

for (var i = 0; i < letters.length; i++) {
        TweenLite.set(letters[i], {
            x: blocks[i].position.x - letters[i].clientWidth * 0.5 + 'px',
            y: blocks[i].position.y - letters[i].clientWidth * 0.5 + 'px',
            rotation: blocks[i].angle + 'rad'
        });
    }

TweenLite.set(bouncer, {
        x: bouncerClone.position.x - bouncer.clientWidth * 0.5 + 'px',
        y: bouncerClone.position.y - bouncer.clientHeight * 0.5 + 'px',
        rotation: bouncerClone.angle + 'rad'
    });
}

// ______________________________ util
var updateCanvas = function() {
    var diffX = document.body.clientWidth - w;
    var diffY = document.body.clientHeight - h;

w = document.body.clientWidth;
    h = document.body.clientHeight;

renderer.options.width = w;
    renderer.options.height = h;
    renderer.canvas.width = w;
    renderer.canvas.height = h;

engine.world.bounds.max.x = window.width;
    engine.world.bounds.max.y = window.height;
};

var initMouse = function(array) {
    var mouse = Matter.Mouse.create(canvas);
    var mouseConstraint = MouseConstraint.create(engine, {
        mouse: mouse
    });
    mouseConstraint.constraint.stiffness = 2;
    World.add(engine.world, mouseConstraint);
    Matter.Events.on(mouseConstraint, 'startdrag', removeInfo);

// catBody category objects should not be draggable with the mouse
    mouseConstraint.collisionFilter.mask = 0x0002 | categories.catMouse;
}

// helpful function
// src > http://stackoverflow.com/a/35093569
var initEscapedBodiesRetrieval = function(allBodies, startCoordinates) {

function hasBodyEscaped(body) {
        var x = body.position.x;
        var y = body.position.y;

return x < 0 || x > w || y < 0 || y > h;
    }

setInterval(function() {
        var i, body;

for (i = 0; i < allBodies.length; i++) {
            body = allBodies[i];
            if (hasBodyEscaped(body)) {

Matter.Body.setVelocity(body, {
                    x: -body.velocity.x,
                    y: -body.velocity.y
                });

Matter.Body.translate(body, {
                    x: (startCoordinates.x - body.position.x),
                    y: (startCoordinates.y - body.position.y)
                });
            }
        }
    }, 300);
}

// ______________________________ create centered block
var fixBouncer = function() {
    bouncer.style.position = 'absolute';
    bouncer.style.top = '0';
    bouncer.style.left = '0';
    bouncer.style.marginTop = '0';

updatePosition();
};

var removeInfo = function() {
    bouncer.classList.add('infoOut');
};

var initBouncer = function() {

bouncerClone = Bodies.circle(
        bouncer.offsetLeft + bouncerRadius,
        bouncer.offsetTop + bouncerRadius,
        bouncerRadius, {
            isSleeping: false,
            density: 0.08,
            collisionFilter: {
                category: categories.catMouse
            },
            render: {
                opacity: 0
            }
        });

World.add(engine.world, bouncerClone);
    Matter.Events.on(engine.world, "afterAdd", fixBouncer);
}

var fixLetters = function() {
    head.style.position = 'absolute';
    head.style.top = '0';
    head.style.left = '0';

for (var i = 0; i < letters.length; i++) {
        letters[i].style.position = 'absolute';
        letters[i].style.top = '0';
        letters[i].style.left = '0';
    }
};

World.add(engine.world, blocks[i]);

letters[i].style.width = letters[i].clientWidth + 'px';
        letters[i].style.height = letters[i].clientHeight + 'px';
    }
}

// walls/borders
var initBorders = function() {
    var borderOptions = {
        isStatic: true,
        render: {
            opacity: 0
        }
    };
    var offset = 30;
    borders.push(Bodies.rectangle(w * 0.5, offset, w, 2, borderOptions)); // top
    borders.push(Bodies.rectangle(w - offset, h * 0.5, 2, h, borderOptions));
    borders.push(Bodies.rectangle(w * 0.5, h - offset, w, 2, borderOptions)); // bottom
    borders.push(Bodies.rectangle(0 + offset, h * 0.5, 2, h, borderOptions));

for (var i = 0; i < borders.length; i++) {
        World.add(engine.world, borders[i]);
    }

};

var updateBorders = function() {
    for (var i = 0; i < borders.length; i++) {
        World.remove(engine.world, borders[i]);
    }
    borders = [];
    initBorders();
}

var init = function() {
    initBubbles();
    initLetterClones();
    initMouse(blocks);
    initBouncer();
    initEscapedBodiesRetrieval(blocks, {
        x: w * 0.5,
        y: h * 0.5
    });
    fixLetters();

initBorders();
    Engine.run(engine);
    Render.run(renderer);
}

// ======================= H E L P E R S  /  U T I L S

window.addEventListener('resize', resizeHandler);

var resizeHandler = debounce(function() {
    updateCanvas();
    updateBorders();
}, 250);

// ______________________________ Helpers
function randArb(min, max) {
    return Math.random() * (max - min) + min;
}

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

// ______________________________ F I R E
init();

编译

CSS

@import "https://fonts.googleapis.com/css?family=Source+Code+Pro:900";
*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: #333;
    text-align: center;
    box-shadow: inset 0 0 0 30px white;
    cursor: -webkit-grab;
    cursor: grab;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
body:active {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}
.stage {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}
h1 {
    position: relative;
    margin: 0 auto;
    font-family: 'Source Code Pro', monospace;
    font-size: 3rem;
    line-height: 1.6rem;
    color: white;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    z-index: 3;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
h1 span {
    position: relative;
    display: block;
    width: 1.8rem;
    height: 2rem;
}
.bouncer {
    position: relative;
    margin: 5% auto 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 7px white;
}
.bouncer:before {
    content: '';
    position: absolute;
    bottom: -25px;
    left: calc(50% - 5px);
    width: 10px;
    height: 10px;
    border-top: 2px solid white;
    border-right: 2px solid white;
    -webkit-transform: translateY(0%) rotate(-45deg);
    transform: translateY(0%) rotate(-45deg);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    will-change: transform, opacity;
    -webkit-animation: bounce 0.5s infinite alternate-reverse;
    animation: bounce 0.5s infinite alternate-reverse;
}
.bouncer:after {
    content: 'Drag and hit';
    position: absolute;
    bottom: -50px;
    left: 50%;
    text-align: center;
    font-family: sans-serif;
    font-size: 11px;
    color: white;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    will-change: transform, opacity;
}
@-webkit-keyframes bounce {
    to {
        -webkit-transform: translateY(80%) rotate(-45deg);
        transform: translateY(80%) rotate(-45deg);
    }
}
@keyframes bounce {
    to {
        -webkit-transform: translateY(80%) rotate(-45deg);
        transform: translateY(80%) rotate(-45deg);
    }
}
.bouncer.infoOut:before {
    opacity: 0;
}
.bouncer.infoOut:after {
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(100%);
    transform: translateX(-50%) translateY(100%);
}
.bubbles {
    position: absolute;
    top: 0;
    left: 0;
}
.bubble {
    position: absolute;
    top: -35px;
    left: -35px;
    width: 70px;
    height: 70px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    opacity: 0;
}
.bubble:before,
.bubble:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid white;
    border-radius: 50%;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.bubble[data-active='false']:before {
    -webkit-animation: none;
    animation: none;
}
.bubble[data-active='false']:after {
    -webkit-animation: none;
    animation: none;
}
.bubble[data-active='true']:before {
    -webkit-animation: explodeA 0.35s;
    animation: explodeA 0.35s;
}
.bubble[data-active='true']:after {
    -webkit-animation: explodeB 0.35s;
    animation: explodeB 0.35s;
}
@-webkit-keyframes explodeA {
    100% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }
}
@keyframes explodeA {
    100% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }
}
@-webkit-keyframes explodeB {
    100% {
        -webkit-transform: scale(2.5);
        transform: scale(2.5);
    }
}
@keyframes explodeB {
    100% {
        -webkit-transform: scale(2.5);
        transform: scale(2.5);
    }
}

HTML

圆球和字符碰撞时，会呈现脉冲波动画。

html5, ball, collision

编辑器支持Emmet

快捷键

圆球和字符碰撞时，会呈现脉冲波动画。

html5, ball, collision

使用Paper.js和CSS3混合模式创建的液体交互动效

使用Perlin.js和Vector2.js实现的粒子流动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：