anime实现绳形拖动反弹动画效果代码-html代码-BFW代码库

anime实现绳形拖动反弹动画效果代码

代码语言：html

所属分类：动画

代码描述：anime实现绳形拖动反弹动画效果代码

下面为部分代码预览，完整代码请点击下载或在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: rgb(84,92,97);
  background: radial-gradient(circle, rgba(84,92,97,1) 0%, rgba(23,41,48,1) 100%); 
}

svg {
  width: 90vw;
  height: auto;
  background-color: transparent;
  //border: 2px dashed #FFF;
}

#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: .........完整代码请登录后点击上方下载按钮下载查看