d3实现炫酷扇形打开动画效果代码-html代码-BFW代码库

d3实现炫酷扇形打开动画效果代码

代码语言：html

所属分类：动画

代码描述：d3实现炫酷扇形打开动画效果代码

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

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

<head>
    <meta charset="UTF-8">

<style>
    * {
  background: #232323;
  overflow: hidden;
}
</style>

</head>

<body>
    <!-- partial:index.partial.html -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/d3.3.5.5.js"></script>
    <!-- partial -->
    <script>
        
        window.addEventListener('load', function () {
  function componentToHex(c) {
    c = Math.round(c * 255).toString(16);
    return c.length === 1 ? "0" + c : c;
  }

  function hslToHex2(h, s, l) {
    var r, g, b;

    if (s == 0) {
      r = g = b = l; // achromatic
    } else {

      var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
      var p = 2 * l - q;
      r = hue2rgb(p, q, h + 1 / 3);
      g = hue2rgb(p, q, h);
      b = hue2rgb(p, q, h - 1 / 3);
    }

    return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
  }

  function hue2rgb(p, q, t) {
    if (t < 0) t += 1;
    if (t > 1) t -= 1;
    if (t < 1 / 6) return p + (q - p) * 6 * t;
    if (t < 1 / 2) return q;
    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
    return p;
  }

  var h, w;
  var svg = d3.select('body').
  append('svg');

  function getWidth() {
    h = window.innerHeight;
    w = window.innerWidth;
    svg.attr({ width: w, height: h });
    d3.select('#border').attr('width', w);
  }
  getWidth();
  window.addEventListener('resize', getWidth);

  var arc = d3.svg.arc();

  function arcTween(transition) {
    transition.attrTween('d', function (d) {
      var start = ~~(Math.random() * 36) * 10 / 180 * Math.PI;

      var interpolateStart = d3.interpolate(d.startAngle, start);
      var interpolateEnd = d3.interpolate(d.endAngle, start + ~~(1 + Math.random() * 18) * 10 / 180 * Math.PI - Math.PI);
      return function (t) {
        d.startAngle = interpolateStart(t);
  .........完整代码请登录后点击上方下载按钮下载查看