圆环增长动画的两种实现

最新推荐文章于 2022-08-28 19:00:53 发布

jdk137

最新推荐文章于 2022-08-28 19:00:53 发布

阅读量354

点赞数

本文链接：https://blog.csdn.net/jdk137/article/details/111173526

版权

本文介绍了如何实现圆环从0度到360度的渐增动画效果，提供了两种实现方案：1) 使用d3.js，具有良好的兼容性；2) 利用CSS，但兼容性可能需要进一步测试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

问题描述：实现圆环从0度逐渐增长，变成360度（或者某个百分比代表的度数）的动画。

实现方案

1、d3 js实现兼容性好


var $svg = $con.find('svg').width(width).height(height);

var svg = d3.select($svg[0])
  .attr('width', width)
  .attr('height', height);

var imgW = 290 * 2;
var imgH = 290 * 2;
var arcF = d3.arc()
    .innerRadius(imgW / 2 - 20)
    .outerRadius(imgW / 2 + 20)
    .startAngle(0 * (Math.PI/180)) //converting from degs to radians
    .endAngle(0 * (Math.PI/180))

var arcs = svg.selectAll(".arc25").data([{
          value: 25,   // 25表示25%
          x: 375 - imgW / 2,
          y: 775 - imgH / 2
        }])
        .enter()
          .append("path")
          .attr('class', 'arc25')
          .attr("d", function (d) {
            return arcF.endAngle(d.value / 100 * 360 * (Math.PI/180))();
          })
          .attr('opacity', 0)
          .attr('fill', '#FBB234')
          .attr("transform", function (d) {
            return 'translate(' + (d.x + imgW / 2) + ',' + (d.y + imgH / 2) + ')';
          });

  	// 弧形动画
    arcs.attr('opacity', 1)
        .attr('d', function (d) {
          return arcF.endAngle(0.1 * (Math.PI/180) )();
        })
        .transition().duration(1000).delay(1000)
        .tween('getMicrobe', function (d, i) {
            return function(t) {
                if (i !== 0) {
                    return;
                }
                arcs.attr('d', function (d) {
                  return arcF.endAngle(d.value * t / 100 * 360 * (Math.PI/180) )();
                });
            };
        });

2、css 实现：(兼容性需要多测试)

.coverCircleMedical {
 
  opacity: 1;
 
  fill: #666;
 
  stroke: #666;
 
  transform-box: fill-box;
 
  transform-origin: center;
 
  transform: rotateY(-180deg) rotate(-90deg);
 
  stroke-width: 144;
 
  r: 72;
 
  animation: medicalpie 2s linear;
 
  stroke-dasharray: 0, 428;
 
}
 
@keyframes medicalpie {
 
  0% {stroke-dasharray: 428,428;}
 
  100% {stroke-dasharray: 0, 428;}
 
}