js+svg实现可配置修改参数的麻绳打结动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：js+svg实现可配置修改参数的麻绳打结动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
* {
  margin: 0;
  padding: 0;
}

body {
  padding: 50px 20px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
}

input {
  accent-color: #4394e5;
}

a,
a:visited {
  display: inline-block;
  font-size: 20px;
  line-height: 1;
  margin: 20px 0;
  color: black;
  border-bottom: 1px solid #ccc;
  outline-offset: 5px;
  transition: all 250ms;
  text-decoration: none;
}
a:hover,
a:visited:hover {
  border-bottom-color: #4394e5;
}
a:active,
a:visited:active {
  transform: translateY(1px);
}

.demo {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px;
}

.demo-svg {
  overflow: visible;
}

path {
  stroke-width: 1.5;
}

.path {
  stroke: #4394e5;
}

.normals path {
  stroke: #4394e5;
}

.points {
  stroke: none;
  fill: #4394e5;
}

.segment path,
.polygons-rounded path,
.polygons path {
  stroke: #4394e5;
}

.demo-controls {
  display: flex;
  flex-wrap: wrap;
  max-width: 750px;
}

.demo-controls-column {
  flex: auto 0 0;
  margin-right: 40px;
}

.demo-title {
  font-weight: bold;
  color: #4394e5;
  margin: 20px 0;
  font-size: 20px;
}

.demo-control {
  display: flex;
  margin-bottom: 10px;
  max-width: 200px;
  flex-wrap: wrap;
}
.demo-control input {
  display: block;
  flex: 100%;
}

.demo-label {
  display: flex;
  margin-bottom: 10px;
}
.demo-label input {
  margin-right: 10px;
}

.demo-control label,
.demo-label {
  font-weight: bold;
}

.demo-value {
  margin-left: 6px;
}
</style>


</head>

<body >
  <div class="demo">
  <svg class="demo-svg" viewBox="-40 -30 580 230"></svg>

  <a target="_blank" href="https://muffinman.io/blog/draw-svg-rope-using-javascript/">Read the blog post &raquo;</a>
  
  <div class="demo-controls">
    <div class="demo-controls-column">
      <div class="demo-title">Options</div>
      <label class="demo-label">
        <input class="demo-checkbox-animate" type="checkbox" checked />
        Animate
      </label>
      <div class="demo-control">
        <label for="demo-step">Segment width</label>
        <span class="demo-value"></span>
        <input data-key="step" type="range" min="3" max="50" step="1" value="20" id="demo-step" />
      </div>
      <div class="demo-control">
        <label for="demo-thickness">Rope thickness</label>
        <span class="demo-value"></span>
        <input data-key="thickness" type="range" min="3" max="50" step="1" value="40" id="demo-thickness" />
      </div>
      <div class="demo-control">
        <label for="demo-angle">Skew angle</label>
        <span class="demo-value"></span>
        <input data-key="angle" type="range" min="0" max="90" step="1" value="45" id="demo-angle" />
      </div>
    </div>
    <div class="demo-controls-column">
      <div class="demo-title">Render</div>
      <label class="demo-label">
        <input data-key="path" class="demo-checkbox" type="checkbox" />
        Path
      </label>
      <label class="demo-label">
        <input data-key="points" class="demo-checkbox" type="checkbox" />
        Points
      </label>
      <label class="demo-label">
        <input data-key="normals" class="demo-checkbox" type="checkbox" />
        Normals
      </label>
      <label class="demo-label">
        <input data-key="polygons" class="demo-checkbox" type="checkbox" />
        Square-ish segments
      </label>
      <label class="demo-label">
        <input data-key="polygonsRounded" class="demo-checkbox" type="checkbox" />
        Rounded square-ish segments
      </label>
      <label class="demo-label">
        <input data-key="segments" class="demo-checkbox" type="checkbox" />
        Segments
      </label>
      <label class="demo-label">
        <input data-key="rope" class="demo-checkbox" type="checkbox" checked />Rounded segments (finished rope)
      </label>
    </div>
    <div class="demo-controls-column">
      <div class="demo-title">Colors</div>
      <label class="demo-label">
        <input class="demo-radio" type="radio" name="demo-colors" value="transparent" />
        Transparent
      </label>
      <label class="demo-label">
        <input class="demo-radio" type="radio" name="demo-colors" value="white" />
        White
      </label>
      <label class="demo-label">
        <input class="demo-radio" type="radio" checked name="demo-colors" value="natural" />
        Natural
      </label>
      <label class="demo-label">
        <input class="demo-radio" type="radio" name="demo-colors" value="rainbow" />
        Rainbow
      </label>
    </div>
  </div>
</div>
 
  
      <script>
// ----- VECTORS ----- //.........完整代码请登录后点击上方下载按钮下载查看