SVG圆形滑块+弹簧

下载代码

html

css

分享到微信朋友圈

html

css

body {
  background: #333;
  font-family: Arial, sans-serif;
}
svg {
  height: 100vmin;
  border: 1px dotted #777;
  margin: 0 auto;
  display: block;
}
circle {
  stroke: #1da1f2;
  fill: none;
  stroke-width: 0.5;
}
.point {
  fill: #1da1f2;
}
#test {
  stroke: red;
}

text {
  dominant-baseline: central;
  text-anchor: middle;
  font-size: 2px;
  pointer-events: none;
  fill: #fff;
}
svg text::selection {
  background: none;
}

div {
  padding: 0;
  width: 100vmin;
  height: 100vmin;
  pointer-events: none;
  display: grid;
  position: absolute;
  left: calc(50% - 50vmin);
  top: 0;
}
input[type="range"] {
  width: 24%;
  margin: auto;
  pointer-events:auto;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"],
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
  background-color: #1da1f2;
  width: 20px;
  height: 20px;
  border: 3px solid #333;
  border-radius: 50%;
  margin-top: -9px;
}

input[type="range"]::-moz-range-thumb {
  background-color: #1da1f2;
  width: 15px;
  height: 15px;
  border: 3px solid #333;
  border-radius: 50%;
}

input[type="range"]::-ms-thumb {
  background-color: #1da1f2;
  width: 20px;
  height: 20px;
  border: 3px solid #333;
  border-radius: 50%;
}

input[type="range"]::-webkit-slider-runnable-track {
  background-color: #1da1f2;
  height: 3px;
}

input[type="range"]:focus::-webkit-slider-runnable-track {
  outline: none;
}

input[type="range"]::-moz-range-track {
  background-color: #1da1f2;
  height: 3px;
}

input[type="range"]::-ms-track {
  background-color: #1da1f2;
  height: 3px;
}

input[type="range"]::-ms-fill-lower {
  background-color: #1da1f2;
}

input[type="range"]::-ms-fill-upper {
  background-color: #1da1f2;
}

@media only screen and (max-width: 480px) {
  div {
    position: static;
    display: block;
    margin: 2em 0;
    width: 100%;
    height: auto;
  }
  #cont input {
    position: static;
    display: block;
    width: 50%;
    margin: 0 auto;
  }
}

JavaScript

const SVG_NS = "http://www.w3.org/2000/svg";
const XLink_NS = "http://www.w3.org/1999/xlink";
const svg = document.querySelector("svg");
const point = document.querySelector("#point");
const text = document.querySelector("text");
const rad = Math.PI / 180;

let requestId = null;
let t = { x: 25, y: 25 }; // translation
let mouseAngle = Math.PI / 4; // initial position of the bubble
let deltaAngle = mouseAngle; // angle between point and mouse pos

let spring = 3 * rad - deltaAngle / 120;
const friction = 0.80;

class Point {
  constructor(angle, elmt) {
    this.a = 0;
    this.elmt = elmt;
    this.angle = angle;
    this.x = 10 * Math.cos(this.angle);
    this.y = 10 * Math.sin(this.angle);
    this.vel = 0;
  }
  draw() {
    // elmt == the bubble
    this.elmt.setAttributeNS(null, "cx", this.x);
    this.elmt.setAttributeNS(null, "cy", this.y);

text.setAttributeNS(null, "x", this.x);
    text.setAttributeNS(null, "y", this.y);
    text.textContent = ~~getAngleInPercents(mouseAngle);
  }

updateAngle(target) {
    this.dist = target - this.a;
    this.acc = this.dist * spring;
    this.vel += this.acc;
    this.vel *= friction;
    this.a += this.vel;
  }

getAngle() {
    this.angle = Math.atan2(this.y, this.x);
  }

rotate() {
    let cos = Math.cos(this.vel);
    let sin = Math.sin(this.vel);
    let p = { x: this.x, y: this.y };
    this.x = p.x * cos - p.y * sin;
    this.y = p.x * sin + p.y * cos;
  }
}

let p = new Point(0, A); // the bubble

function Draw() {
  requestId = window.requestAnimationFrame(Draw);

p.updateAngle(deltaAngle);
  p.rotate();
  p.draw();
}
Draw();

svg.addEventListener(
  "click",
  function(e) {
    mouseAngle = getMouseAngle(e, t);
    number.value = getAngleInPercents(mouseAngle);

onEvent();
  },
  false
);

number.addEventListener(
  "input",
  function(e) {
    mouseAngle = map(number.value, 0, 100, 0, 360) * rad;

onEvent();
  },
  false
);

function onEvent() {
  if (requestId) {
    cancelAnimationFrame(requestId);
    requestId = null;
  }
  p.getAngle(); // changes the p.angle

if (p.angle < mouseAngle - Math.PI) {
    p.angle = p.angle + 2 * Math.PI;
  }
  if (p.angle > mouseAngle + Math.PI) {
    p.angle = p.angle - 2 * Math.PI;
  }

deltaAngle = mouseAngle - p.angle;

spring = 3 * rad - Math.abs(deltaAngle / 120);
  p.a = 0;
  p.dist = 0;
  p.vel = 0;
  p.acc = 0;

Draw();
}

function oMousePosSVG(e) {
  let p = svg.createSVGPoint();
  p.x = e.clientX;
  p.y = e.clientY;
  let ctm = svg.getScreenCTM().inverse();
  p = p.matrixTransform(ctm);
  return p;
}

function transformedMousePos(e, t) {
  let m = oMousePosSVG(e);
  return {
    x: m.x - t.x,
    y: m.y - t.y
  };
}

function getMouseAngle(e, t) {
  let m = transformedMousePos(e, t);
  //console.log("mouse: ",Math.atan2(m.y,m.x)/rad)
  return Math.atan2(m.y, m.x);
}

function getAngleInPercents(angle) {
  let A = angle < 0 ? (angle + 2 * Math.PI) / rad : angle / rad;
  return map(A, 0, 360, 0, 100);
}

function map(n, a, b, _a, _b) {
  var d = b - a;
  var _d = _b - _a;
  var u = _d / d;
  return _a + n * u;
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg