d3实现苹果手表apple watch计步器运动动画-html代码-BFW代码库

d3实现苹果手表apple watch计步器运动动画

代码语言：html

所属分类：动画

代码描述：d3实现苹果手表apple watch计步器运动动画

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<style>
html{
  height: 100%;
}
body {
  min-height: 100%;
  background: #000000;
  padding:0;
  margin:0;

}
.icon{
  font-family:fontawesome;
  font-weight:bold;
  font-size:30px;

}
.goal,.completed{
  font-family: 'Roboto','Myriad Set Pro', 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
  fill:white;
  text-anchor:middle;
}
.goal{
  font-size: 30px;


}
.completed{
  font-size: 95px;
}
</style>

</head>
<body translate="no">
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/d3.v3.js"></script>
<script >
//based on https://bl.ocks.org/mbostock/1096355
//apple design:https://images.apple.com/watch/features/images/fitness_large.jpg
"use strict";

(function () {
  var gap = 2;

  var ranDataset = function () {
    var ran = Math.random();

    return [
    { index: 0, name: 'move', icon: "\uF105", percentage: ran * 60 + 30 },
    { index: 1, name: 'exercise', icon: "\uF101", percentage: ran * 60 + 30 },
    { index: 2, name: 'stand', icon: "\uF106", percentage: ran * 60 + 30 }];


  };

  var ranDataset2 = function () {
    var ran = Math.random();

    return [
    { index: 0, name: 'move', icon: "\uF105", percentage: ran * 60 + 30 }];


  };
  var colors = ["#e90b3a", "#a0ff03", "#1ad5de"];
  var width = 500,
  height = 500,
  τ = 2 * Math.PI;

  function build(dataset, singleArcView) {

    var arc = d3.svg.arc().
    startAngle(0).
    endAngle(function (d) {
      return d.percentage / 100 * τ;
    }).
    innerRadius(function (d) {
      return 140 - d.index * (40 + gap);
    }).
    outerRadius(function (d) {
      return 180 - d.index * (40 + gap);
    }).
    cornerRadius(20); //modified d3 api only

    var background = d3.svg.arc().
    startAngle(0).
    endAngle(τ).
    innerRadius(function (d, i) {
      return 140 - d.index * (40 + gap);
    }).
    outerRadius(function (d, i) {
      return 180 - d.index * (40 + gap);
    });

    var svg = d3.select("body").append("svg").
    attr("width", width).
    attr("height", height).
    append("g").
    attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    //add linear gradient, notice apple uses gradient alone the arc..
    //meh, close enough...


    var gradient = svg.append("svg:defs").
    append("svg:linearGradient").
    attr("id", "gradient").
    attr("x1", "0%").
    attr("y1", "100%").
    attr("x2", "50%").
    attr("y2", "0%").
    attr("spreadMethod", "pad");

    gradient.append("svg:stop").
    attr("o.........完整代码请登录后点击上方下载按钮下载查看