Wie man die Füllung eines HTML-Elements animiert

Question

Also das Problem, das ich habe, ist ich versuche, die Füllung eines Kreises HTML-Element zu animieren. Der Kreis beginnt grau, der Benutzer gibt eine Zahl ein und der Kreis ändert seine Farbe, indem ein weiterer blauer Kreis den Prozentsatz des vom Benutzer angegebenen ursprünglichen Kreises einnimmt. Ich habe Probleme herauszufinden, wie man die Füllung des blauen Kreises animiert oder kreiert.

HTML

<div class="circle circle-outer-border"> 
    <div class="circle circle-background"> 
     <div class="circle circle-fill"></div> 
    </div> 
</div> 

CSS

.circle{ 
    height: 200px; 
    width: 200px; 
    -moz-border-radius: 100px; 
    -webkit-border-radius: 100px; 
} 

.circle-outer-border{ 
    border: 1px solid black; 
} 

.circle-background{ 
    border: 20px solid #b1b1b1; 
    background-color: transparent; 
    margin-left: -1px; margin-top: -1px /** to make up for outer-border  margin**/ 
} 

.circle-fill{ 
    border: 20px solid #147fc3; 
    background-color: transparent; 
    margin-left: -21px; margin-top: -21px; 
} 

So habe ich drei Kreise, eine nur für den schwarzen Rand, eine, die nur zeigt die graue Grenze und einen dritten, das der dritte Kreis ist die Das ist die, die ich animieren werde, als 'blaue Füllung' zu fungieren. Ich habe sie übereinander gestapelt, um ihr den Effekt einer Zifferblattfüllung zu geben. Wieder bin ich mir einfach nicht sicher, wie ich die Animation machen soll, gibt es eine Möglichkeit, nur einen Teil des blauen Kreises zu zeigen und kontinuierlich mehr zu zeigen, bis der ganze blaue Kreis sichtbar ist? Danke für die Hilfe. Ich schreibe dies in einer angularjs App, habe aber noch nicht den angularjs Code geschrieben.

Answer 1

ich vereinfacht Ihre Lösung nur ein bisschen. Statt 3 DIVs gibt es nur 2.

Der äußere DIV zeichnet den Kreis und sagt "meine Kinder können nicht überlaufen".

Das innere DIV ist ein einfaches Rechteck. Er ist derjenige, den du animierst, von unten beginnend und ihn auf und ab bewegst.

Genau wie ein Bullauge auf einem Boot!

.circle{ 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
.circle-outer-border{ 
 
    position: relative; 
 
    border: 1px solid black; 
 
    border-radius: 100px; 
 
    -moz-border-radius: 100px; 
 
    -webkit-border-radius: 100px; 
 
    overflow: hidden; 
 
} 
 

 
.circle-fill{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #147fc3; 
 
} 
 

 
.animated .circle-fill { 
 
    -webkit-animation: fillerup 5s infinite; 
 
    animation: fillerup 5s infinite; 
 
} 
 
.static .circle-fill { 
 
    top: 150px; 
 
} 
 

 
@-webkit-keyframes fillerup { 
 
    0% { 
 
    top: 200px; 
 
    } 
 
    100% { 
 
    top: 0px; 
 
    } 
 
} 
 
@keyframes fillerup { 
 
    0% { 
 
    top: 200px; 
 
    } 
 
    100% { 
 
    top: 0; 
 
    } 
 
}

<div class="circle circle-outer-border animated"> 
 
    <div class="circle circle-fill"></div> 
 
</div> 
 
<br/> 
 
<div class="circle circle-outer-border static"> 
 
    <div class="circle circle-fill"></div> 
 
</div>

Answer 2

<canvas id="Circle" width="578" height="200"></canvas> 

var canvas = document.getElementById('Circle'); 
 
var context = canvas.getContext('2d'); 
 
var centerX = canvas.width/2; 
 
var centerY = canvas.height/2; 
 
var radius = 80; 
 

 
var full = radius*2; 
 
var amount = 0; 
 
var amountToIncrease = 10; 
 

 
function draw() { 
 
    context.save(); 
 
    context.beginPath(); 
 
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
 
    context.clip(); // Make a clipping region out of this path 
 
    // instead of filling the arc, we fill a variable-sized rectangle 
 
    // that is clipped to the arc 
 
    context.fillStyle = '#13a8a4'; 
 
    // We want the rectangle to get progressively taller starting from the bottom 
 
    // There are two ways to do this: 
 
    // 1. Change the Y value and height every time 
 
    // 2. Using a negative height 
 
    // I'm lazy, so we're going with 2 
 
    context.fillRect(centerX - radius, centerY + radius, radius * 2, -amount); 
 
    context.restore(); // reset clipping region 
 

 
    context.beginPath(); 
 
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
 
    context.lineWidth = 10; 
 
    context.strokeStyle = '#000000'; 
 
    context.stroke(); 
 
    
 
    // Every time, raise amount by some value: 
 
    amount += amountToIncrease; 
 
    if (amount > full) amount = 0; // restart 
 
} 
 

 
draw(); 
 
// Every second we'll fill more; 
 
setInterval(draw, 1000);

Quelle: https://stackoverflow.com/a/16862746/563532