GSAP 冒泡泡动画

Matter Sparkles 还包含气泡碰撞检测的逻辑。

GSAP, bubble

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var val = 0;
var cursorX;
var cursorY;
var interval;
var isUp = true;
var isTouch = false;
var w = document.body.clientWidth;
var h = document.body.clientHeight;
var url = '/uploads/160901/bubble.png';

var block;
var blockSrc = document.querySelector('[data-el="block"]');
blockWidth = blockSrc.clientWidth;
blockHeight = blockSrc.clientHeight;
blockX = blockSrc.offsetLeft;
blockY = blockSrc.offsetTop;
var taboo = 0;

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;

// ______________________________ dom element to contain canvas
var stage = document.querySelector('[data-el="stage"]');

// ______________________________ 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.9;

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

// showCollisions: true,
        // showDebug: true,
        // showIds: true,
        // showInternalEdges: true,
        // showPositions: true,
        // showVelocity: true,
        // wireframeBackground: "transparent"
    }
});

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

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

function resizeHandler() {
    updateCanvas();
    updateBlock();
};

// ______________________________ create centered block
var initBlock = function() {

block = Bodies.rectangle(
        blockX + blockWidth * 0.5,
        blockY + blockHeight * 0.5,
        blockWidth,
        blockHeight, {
            isStatic: false,
            isSleeping: true,
            render: {
                opacity: 0
            }
        });
    World.add(engine.world, block);

taboo = engine.world.bodies.indexOf(block) + 1;
};

var updateBlock = function() {
    blockWidth = blockSrc.clientWidth;
    blockHeight = blockSrc.clientHeight;
    blockX = blockSrc.offsetLeft;
    blockY = blockSrc.offsetTop;

// updating x and y positions
    Matter.Body.setPosition(block, {
        x: blockX + blockWidth * 0.5,
        y: blockY + blockHeight * 0.5
    });

// updating width and height dimensions
    block.vertices[0].x = blockX;
    block.vertices[0].y = blockY;
    block.vertices[1].x = blockX + blockWidth;
    block.vertices[1].y = blockY;
    block.vertices[2].x = blockX + blockWidth;
    block.vertices[2].y = blockY + blockHeight;
    block.vertices[3].x = blockX;
    block.vertices[3].y = blockY + blockHeight;
}

initBlock();

// ______________________________ Sparkle create / remove
var removeSparkles = function() {
    if (engine.world.bodies.length < 100) return;
    World.remove(engine.world, engine.world.bodies[taboo]);
}

var createSparkle = function() {

val = getRandomInt(3, 7);

World.add(engine.world,
        Bodies.circle(cursorX, cursorY, val, {
            density: 0.0005,
            friction: 0,
            render: {
                opacity: val * 0.1,
                sprite: {
                    texture: url,
                    xScale: val * 0.005,
                    yScale: val * 0.005
                }

}
        })
    );

removeSparkles();
};

// ______________________________ Events

//____________ mouse inputs
document.onmousedown = function(event) {
    if (isTouch) return;
    isUp = false;
    cursorX = Math.floor(event.pageX);
    cursorY = Math.floor(event.pageY);
    interval = window.setInterval(createSparkle, 30);
};

document.onmousemove = function(event) {
    if (isTouch) return;
    if (isUp) return;
    cursorX = Math.floor(event.pageX);
    cursorY = Math.floor(event.pageY);
};

document.onmouseup = function(event) {
    if (isTouch) return;
    isUp = true;
    clearInterval(interval);
};

//____________ touch inputs
document.addEventListener('touchstart', function(event) {
    if (event.targetTouches.length > 1) return;
    isTouch = true;
    isUp = false;

cursorX = Math.floor(event.targetTouches[0].clientX);
    cursorY = Math.floor(event.targetTouches[0].clientY);

interval = window.setInterval(createSparkle, 30);
}, false);

document.addEventListener('touchmove', function(event) {
    if (isUp) return;
    cursorX = Math.floor(event.targetTouches[0].clientX);
    cursorY = Math.floor(event.targetTouches[0].clientY);
}, false);

document.addEventListener('touchend', function(event) {
    isUp = true;
    clearInterval(interval);
}, false);
document.addEventListener('touchcancel', function(event) {
    isUp = true;
    clearInterval(interval);
}, false);

// updating gravity direction according to device angle
window.addEventListener('deviceorientation', function(event) {
    engine.world.gravity.x = -event.gamma * 0.03;
});

window.addEventListener('resize', resizeHandler);

// ______________________________ run the engine
Engine.run(engine);
Render.run(renderer);

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

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

编译

CSS

@import "https://fonts.googleapis.com/css?family=Erica+One|Roboto+Condensed:300";
*,
*: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;
    background: #222;
    text-align: center;
    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;
}
.block {
    margin: auto;
}
.block span {
    margin-left: 6px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 0.85rem;
    line-height: 0.7rem;
    text-transform: uppercase;
    color: white;
    letter-spacing: 0.32rem;
}
.block h1 {
    font-family: 'Erica One', cursive;
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: white;
    font-size: 40px;
    line-height: 30px;
    text-transform: uppercase;
}
canvas {
    pointer-events: none;
}
.stage {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

HTML

Matter Sparkles 还包含气泡碰撞检测的逻辑。

GSAP, bubble

编辑器支持Emmet

快捷键

Matter Sparkles 还包含气泡碰撞检测的逻辑。

GSAP, bubble

GSAP 原质化设计样本卡片展开和折叠动画

HTML5 GSAP房屋搭建（盖房子）动画和日夜场景切换

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：