matterjs实现时间沙漏漏斗物理重力动画效果代码-html代码-BFW代码库

matterjs实现时间沙漏漏斗物理重力动画效果代码

代码语言：html

所属分类：动画

代码描述：matterjs实现时间沙漏漏斗物理重力动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">

    <style>
        body {
        margin:0;
        overflow:hidden;
        background:#2942b0;
}
button {
        position:absolute;
        top:10%;
        left:50%;
        transform:translateX(-50%);
        z-index:1;
        width:100px;
        height:40px;
        border-radius:5px;
        font-size:18px;
        color:white;
        background:transparent;
        border:1px solid white;
        transition:all .3s ease-in-out;
        cursor:pointer;
}
button:hover {
        background:white;
        color:#8785a2;
}
canvas {
        transition:transform 1s ease;
}
canvas.flip {
        transform:rotate(180deg);
}

    </style>
</head>

<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/matter.js"></script>
    <button onClick="app.flipCanvas()">翻转</button>
    <script>
        var app = app || {}
    const boundaryStyle = {
        fillStyle: 'white',
        strokeStyle: 'transparent'
    }
    const colors = ['#D3F8E2', '#E4C1F9', '#F694C1', '#EDE7B1', '#A9DEF9']
    app.init = function() {
        const {
            Bodies,
            Body,
            Composite,
            Composites,
            Engine,
            Vector,
            World,
            Common
        } = Matter
        const engine = Engine.create({
            render: {
                element: document.body,
                options: {
                    height: window.innerHeight,
                    width: window.innerWidth,
                    background: '#2f29.........完整代码请登录后点击上方下载按钮下载查看