matter模拟一个时间沙漏效果代码-html代码-BFW代码库

matter模拟一个时间沙漏效果代码

代码语言：html

所属分类：动画

代码描述：matter模拟一个时间沙漏效果代码

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

<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>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/matter.js"></script>
</head>
<body>
    <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() {
            // module aliases
            const {
                Bodies,
                Body,
                Composite,
                Composites,
                Engine,
                Vector,
                World,
                Common
            } = Matter

            // create an engine
            const engine = Engine.create({
                render: {
                    element: document.body,
                    options: {
                        height: window.innerHeight,
                        width: window.innerWidth,
                        background: '#2f2980',
                        wireframes: false
                    }
                }
            })

            const originY = window.innerHeight / 2
            const originX = window.innerWidth / 2

            const rectTopLeft = Bodies.rectangle(originX, originY, 20, 200, {
                angle: Math.PI / -6,
                render: boundaryStyle,
                isStatic: true
            })

            const rectTopRight = Bodies.rectangle(originX, originY, 20, 200, {
                angle: Math.PI / 6,
                render: boundaryStyle,
                isStatic: true
            })

            const rectTop = Bodies.rectangle(originX, originY, 280, 25, {
                render: boundaryStyle,
                isStatic: true
            })

            const re.........完整代码请登录后点击上方下载按钮下载查看