react实现一个另类时钟走动效果-html代码-BFW代码库

react实现一个另类时钟走动效果

代码语言：html

所属分类：动画

代码描述：react实现一个另类时钟走动效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet">

<style>
* {
  -webkit-transition: all .5s;
  transition: all .5s;
}

body {
  background-color: #252525;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
}

.text {
  position: absolute;
  left: 10px;
  bottom: 10px;
}

.text, a {
  color: #f4f4f4;
  font-weight: 100;
}

svg {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.textTime {
  fill: #f4f4f4;
  text-anchor: middle;
  alignment-baseline: middle;
  font-size: 1.5rem;
  font-weight: 100;
}

.outerRing {
  fill: none;
  stroke: #f4f4f4;
  stroke-width: 2px;
  stroke-dasharray: 4px;
  opacity: .5;
}

.primCircle {
  fill: #252525;
  stroke: #f4f4f4;
  stroke-width: 10px;
}

.secCircle {
  fill: #45d9fd;
  stroke: #252525;
  stroke-width: 3px;
}

.spike {
  stroke: #f4f4f4;
  stroke-width: 2px;
}

.triangle {
  fill: #ee2560;
}
</style>

</head>
<body translate="no">

<div class="clock"></div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react.dev.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react-dom.dev.js"></script>

<script>
// small circle radius
const r1 = 5;
const r2 = 10;
const r3 = 15;
const width = window.innerWidth;
const height = window.innerHeight;

const minWH = Math.min(width, height);

let maxSize;
if (minWH < 430) {
  maxSize = minWH - 30;
} else {
  maxSize = 400;
}

// utils
// deg to radian
const rad = a => Math.PI * (a - 90) / 180;

// relative polar coordinates
const rx = (r, a, c) => c + r * Math.cos(rad(a, c));

const ry = (r, a, c) => c + r * Math.sin(rad(a));

// get hours, minutes, and seconds
const HMS = t => ({
  h: t.getHours(),
  m: t.getMinutes(),
  s: t.getSeconds() });


const pathStringVars = (c, r, time) => {
  // center, radius and time = this.props		
  // const {c,r,time} = p
  const { h, m, s } = HMS(time);

  // divide 360 deg by 12hrs, 60min, and 60s 
  const hAngFact = 30;
  const mAngFact = 6;
  const sAngFact = 6;

  // calc relative coordinates 		
  const hx = rx(r - 30, hAngFact * h, c);
  const hy = ry(r - 30, hAngFact * h, c);
  const mx = rx(r - 30, mAngFact * m, c);
  const my = ry(r - 30, mAngFact * m, c);
  const sx = rx(r - 30, sAngFact * s, c);
  const sy = ry(r - 30, sAngFact * s, c);

  return { hx, hy, mx, my, sx, sy };
};

const TextTime = ({ x, y, time }) => {
  const str = time.toTimeString().slice(0, 8).replace(/:/g, " : ");
  return (
    React.createElement("text", { x: x, y: y, className: "textTime" },
    str));


};

// Circle component
const Circle = ({ cx,.........完整代码请登录后点击上方下载按钮下载查看