我正在尝试制作圆形动画,
我目前有这个:http://jsfiddle.net/gf327jxu/1/
<svg width="100" height="100" class="circle">
<circle cx="50" cy="50" r="40" />
</svg>
的CSS:
.circle{
stroke:green;
stroke-width:10;
fill:none;
}
我希望它像一个圆形进展一样动画,像这样:http://jsfiddle.net/andsens/mLA7X/但在SVG中,我需要顺时针方向,我怎么能实现这一点,这是否可能?
答案 0 :(得分:5)
这是一个fiddle example。
注意:我使用了r = 57
,因为周边是358.1
,接近360 degrees
。对于不同的r
值,您需要计算stroke-dasharray
非常感谢@Robert Longson,@ErikDahlström和@Phrogz多年来的SO解决方案。 这个小提琴只是他们的一个调整。
(function() {
// math trick 2*pi*57 = 358, must be less than 360 degree
var circle = document.getElementById('green-halo');
var myTimer = document.getElementById('myTimer');
var interval = 30;
var angle = 0;
var angle_increment = 6;
window.timer = window.setInterval(function() {
circle.setAttribute("stroke-dasharray", angle + ", 20000");
myTimer.innerHTML = parseInt(angle / 360 * 100) + '%';
if (angle >= 360) {
window.clearInterval(window.timer);
}
angle += angle_increment;
}.bind(this), interval);
})()
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 300 300" preserveAspectRatio="none" style="width:300; height:300; top:0; left:0;">
<circle cx="100" cy="100" r="57" id="green-halo" fill="none" stroke="#00CC33" stroke-width="15" stroke-dasharray="0,20000" transform="rotate(-90,100,100)" />
<text id="myTimer" text-anchor="middle" x="100" y="110" style="font-size: 36px;" >0%</text>
</svg>
答案 1 :(得分:2)
const countdownNumberEl = document.getElementById('countdown-number');
const circle = document.getElementById('circle');
let countdown = 25;
const radius = Number(circle.getAttribute('r'));
const circumference = 2 * radius * Math.PI;
circle.style.transition = `all ${countdown}s linear`
countdownNumberEl.innerHTML = countdown;
function startTimer() {
const interval = setInterval(() => {
countdown = countdown - 1;
countdownNumberEl.innerHTML = countdown;
if (countdown === 0) {
clearInterval(interval);
}
}, 1000);
circle.setAttribute('stroke-dasharray', circumference);
circle.setAttribute('stroke-dashoffset', circumference);
}
setTimeout(() => startTimer(), 0)
body {
background: #333;
font-family: sans-serif;
}
#countdown {
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin: 60px auto;
height: 80px;
width: 80px;
}
#countdown-number {
color: darkgray;
}
svg {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
transform: rotateY(-180deg) rotateZ(-90deg);
}
<div id="countdown">
<p id="countdown-number"></p>
<svg>
<circle r="24" cx="40" cy="40 "stroke-linecap="round" stroke-width="2" fill="none" stroke="black"></circle>
</svg>
<svg>
<circle id="circle" r="24" cx="40" cy="40" stroke-linecap="round" stroke-width="2" fill="none" stroke="darkgray"></circle>
</svg>
</div>
答案 2 :(得分:1)
这是一个纯 svg 解决方案:codepen
<svg version="1.1" id="circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" xml:space="preserve">
<circle fill="none" stroke="#000" stroke-width="4" stroke-mitterlimit="0" cx="50" cy="50" r="48" stroke-dasharray="360" stroke-linecap="round" transform="rotate(-90 ) translate(-100 0)" >
<animate attributeName="stroke-dashoffset" values="360;0" dur="2s" repeatCount="indefinite"></animate>
</circle>
</svg>
答案 3 :(得分:0)
<!DOCTYPE html>
<html>
<head>
<title>svg circle animation</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#XMLID_4_{
stroke-dasharray: 1000;
stroke-dashoffset: 2000;
fill: #FFFFFF;
stroke: #000000;
}
svg:hover #XMLID_4_{
-webkit-animation: draw 3s forwards;
animation: draw 3s;
}
@keyframes draw{
from{
stroke-dashoffset: 1000;
fill:#efefef;
stroke:#ff5535;
}
to{
stroke-dashoffset: 0;
}
}
@-webkit-keyframes draw{
from{
stroke:#ff5535;
stroke-dashoffset: 1000;
}
to{
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<g>
<circle id="XMLID_4_" stroke-width="3" stroke-miterlimit="10" cx="366.5" cy="135.6" r="44.7"/>
</g>
</svg>
</body>
</html>