anime+svg实现拉弓弹跳模拟动画效果代码-html代码-BFW代码库

anime+svg实现拉弓弹跳模拟动画效果代码

代码语言：html

所属分类：拖放

代码描述：anime+svg实现拉弓弹跳模拟动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #FFF;
            background: #545c61;
            background: radial-gradient(circle, #545c61 0%, #172930 100%);
        }

        svg {
            width: 90vw;
            height: auto;
            background-color: transparent;
        }

        #control-point {
            cursor: -webkit-grab;
            cursor: grab;
        }

        #control-point:active {
            cursor: -webkit-grabbing;
            cursor: grabbing;
        }

        .coordinates {
            text-align: center;
            display: flex;
            justify-content: center;
            gap: 20px;
            display: none;
        }
    </style>


</head>

<body>
    <div>
        <div class="coordinates">
            <div>
                X:<span class="posX">95</span>
            </div>
            <div>
                Y:<span class="posY">80</span>
            </div>
        </div>

        <svg width="190" height="160" viewBox="0 0 190 160" xmlns="http://www.w3.org/2000/svg">
            <path d="M 10 80 Q 95 80 180 80" stroke="white" fill="transparent" id="curve" />

            <circle cx="10" cy="80" r="2" fill="white" id="start-point" />
            <circle cx="180" cy="80" r="2" fill="white" id="end-point" />
            <circle cx="95" cy="80" r="5" fill="#FDD835" id="control-point" />
        </svg>
    </div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/anime.3.2.1.js"></script>
    <script>
        const svg = document.querySelector('svg');
        const curve = document.getElementById('curve');
        const controlPoint = document.getElementById('control-point');
        const posXLabel = document.querySelector('.posX');
        const posYLabel = document.querySelector('.posY');
        const svgViewBoxWidth = 190;

        let isMouseDown = false;
        let point = {
            x: 95,
            y: 80
        };


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