In einem aktuellen Projekt möchte ich einen Effekt des Sammelns von Punkten erzielen. Laut der Beschreibung des Chefs ähnelt dieser Effekt dem Effekt des Sammelns von Energie im Alipay Ant Forest. Der Gesamteffekt besteht darin, dass mehrere Punktelemente um den Baum herum schweben und wie funkelnde Sterne nach oben und unten gleiten. Nach dem Klicken zum Sammeln gleiten sie entlang der Mitte des Baums und verschwinden. Die Energie auf dem Baum nimmt zu und dehnt sich schließlich aus und wird etwas größer.
Zuerst denke ich, dass der Grundriss eine Erde ist, umgeben von mehreren funkelnden kleinen Sternen im Halbkreis, und dann fallen sie gleichzeitig auf die Erde. Verwenden Sie CSS-Positionierung, Rahmenradius zum Zeichnen eines Kreises, Animation und Klickaktion zum Auslösen einer neuen Animation. Der Punktinkrementeffekt ähnelt countUp.js, dieses Plug-In wird hier jedoch nicht verwendet und manuell implementiert.
(Teilen von Lernvideos: css-Video-Tutorial)
1.1 Halbkreis-Umgebungseffekt
Dazu sind mathematische Kenntnisse erforderlich, und das Bogenmaß wird basierend auf dem Winkel (Bogenmaß = Winkel * Pi / 180) ermittelt dann in Koordinaten umgewandelt, Platzieren Sie die Integralelemente um das Gesamtintegral. Der Schlüsselcode lautet wie folgt:
this.integral.forEach(i => {
// 角度转化为弧度
let angle = Math.PI / 180 * this.getRandomArbitrary(90, 270)
// 根据弧度获取坐标
i.x = xAxis + 100 * Math.sin(angle)
i.y = 100 + 100 * Math.cos(angle)
// 贝塞尔函数
i.timing = this.timeFun[parseInt(this.getRandomArbitrary(0, 3))]
})Beachten Sie, dass die Funktion der getRandomArbitrary()-Funktion darin besteht, Zufallszahlen wie folgt zu erhalten:
// 求两个数之间的随机数
getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}timeFunc ist eine Sammlung von Bessel-Funktionsnamen, um den Effekt des Integral-Blinkens zu erzielen (. nach oben und unten gleiten) ist in den Daten definiert:
timeFun: ['ease', 'ease-in', 'ease-in-out', 'ease-out'], // 贝塞尔函数实现闪烁效果
1.2 Punkte flackern (nach oben und unten gleiten)
Verwenden Sie eine CSS-Animation, um zu erkennen, dass Punkte nach oben und unten gleiten transform: translatorY(5px), das heißt, eine bestimmte Strecke auf der y-Achse zu verschieben und die Wiedergabe in einer Schleife zu animieren. Der Code lautet wie folgt:
.foo {
display: flex;
font-size: 10px;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
position: fixed;
top: 0;
left: 0;
animation-name: slideDown;
/*默认贝塞尔函数*/
animation-timing-function: ease-out;
/*动画时间*/
animation-duration: 1500ms;
/*动画循环播放*/
animation-iteration-count: infinite;
-moz-box-shadow: -5px -5px 10px 3px rgb(277, 102, 63) inset;
-webkit-box-shadow: -5px -5px 10px 3px rgb(277, 102, 63) inset;
box-shadow: -5px -5px 10px 3px rgb(277, 102, 63) inset;
}
/*小积分上下闪烁*/
@keyframes slideDown {
from {
transform: translateY(0);
}
50% {
transform: translateY(5px);
background-color: rgb(255, 234, 170);
}
to {
transform: translateY(0);
background: rgb(255, 202, 168);
}
}Beachten Sie, dass ich zusätzlich zum Verschieben der Punkte nach oben und unten auch die Hintergrundfarbe entsprechend ändern lasse. Das Tempo der Auf- und Abbewegung kann nicht konstant sein, da es sonst langweilig aussieht. Verwenden Sie daher eine Zufallszahlenfunktion, um zufällig eine der Bessel-Funktionen auszuwählen, sodass die Integrationskugel auf und ab gleitet und ungleichmäßig aussieht. Der Schlüsselcode lautet wie folgt:
/*html*/{{item.value}}/*js*/ // data中定义 timeFun: ['ease', 'ease-in', 'ease-in-out', 'ease-out'], // 贝塞尔函数实现闪烁效果 // 随机获取贝塞尔函数 i.timing = this.timeFun[parseInt(this.getRandomArbitrary(0, 3))]
1.3 Effekt zur Erhöhung der Gesamtpunktzahl
Nachdem Sie auf „Anfordern“ geklickt haben, werden die Gesamtpunkte akkumuliert. Dies ähnelt dem Effekt von countUp.js, aber dieses Plug-In. in kann hier für diese Funktion nicht zitiert werden. Das Projekt verwendet vue.js. Es ist leicht vorstellbar, die Reaktionsattribute von Daten zu ändern, um die Zahlen zu ändern. Der Schlüssel liegt darin, diese Änderung nicht auf einmal, sondern schrittweise vorzunehmen. Meine Idee hier ist Promise+setTimeout, das Datenattribut in bestimmten Abständen zu ändern, sodass es nicht den Anschein hat, als würde es sich plötzlich ändern.
Damit der Animationseffekt reibungslos aussieht, dividieren Sie die Gesamtzeit (1500 Millisekunden) durch die Anzahl der kleinen Integrale, um einen Wert zu erhalten, der dem Keyframe der Animation ähnelt. Dieser Wert wird als Anzahl der Änderungen verwendet und dann ausgeführt zu jeder bestimmten Zeit. Alle Animationszeiten sind auf 1500 Millisekunden eingestellt, damit der Gesamteffekt konsistent ist.
Der Schlüsselcode lautet wie folgt:
this.integralClass.fooClear = true
this.totalClass.totalAdd = true
this.totalText = `${this.totalIntegral}积分`
let count = this.integral.length, timeoutID = null, tasks = [], totalTime = parseInt(1500 / count)
const output = (i) => new Promise((resolve) => {
timeoutID = setTimeout(() => {
// 积分递增
this.totalIntegral += this.integral[i].value
// 修改响应式属性
this.totalText = `${this.totalIntegral}积分`
resolve();
}, totalTime * i);
})
for (var i = 0; i < 5; i++) {
tasks.push(output(i));
}
Promise.all(tasks).then(() => {
clearTimeout(timeoutID)
})1.4 Das kleine Integral verschwindet und das Gesamtintegral erweitert sich. Der letzte Schritt besteht darin, dass sich das kleine Integral in Richtung des Gesamtintegrals bewegt und verschwindet und das Gesamtintegral erweitert. Das kleine Integral bewegt sich und verschwindet. Die x-Achsenkoordinate bewegt sich zur x-Achsenkoordinate des Gesamtintegrals, und die y-Achse bewegt sich zur y-Achsenkoordinate des Gesamtintegrals das gleiche wie das Gesamtintegral, es sieht also so aus, als ob es entlang der Mitte verläuft. Die Bewegungsrichtung ist dieselbe. Wenn die Koordinaten aller Kleinintegrale hierher verschoben werden, können die Daten gelöscht werden. Das Schlüssel-CSS lautet wie folgt:
rrreeDie Gesamtpunktzahl wird hier erweitert: transform:scale(1.5, 1.5); das heißt, es etwas größer als die Originalgröße machen und schließlich zur Originalgröße zurückkehren transform: scale(1, 1); Das Schlüssel-CSS lautet wie folgt:
.fooClear {
animation-name: clearAway;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
animation-fill-mode: forwards;
-webkit-animation-duration: 1500ms;
-moz-animation-duration: 1500ms;
-o-animation-duration: 1500ms;
animation-duration: 1500ms;
}
/*清除小的积分*/
@keyframes clearAway {
to {
top: 150px;
left: 207px;
opacity: 0;
visibility: hidden;
width: 0;
height: 0;
}
}An diesem Punkt wurde die Logik der gesamten Animation geklärt. Ich habe den Code zuerst auf Github geschrieben und die Animation integriert .
Der Effekt ist wie folgt:
2. Im Projekt implementiert
.totalAdd {
animation-name: totalScale;
animation-timing-function: ease-in-out;
/*动画只播放一次*/
animation-iteration-count: 1;
/*动画停留在最后一个关键帧*/
animation-fill-mode: forwards;
-webkit-animation-duration: 1500ms;
-moz-animation-duration: 1500ms;
-o-animation-duration: 1500ms;
animation-duration: 1500ms;
}
@keyframes totalScale {
50% {
transform: scale(1.15, 1.15);
-ms-transform: scale(1.15, 1.15);
-moz-transform: scale(1.15, 1.15);
-webkit-transform: scale(1.15, 1.15);
-o-transform: scale(1.15, 1.15);
}
to {
transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
-o-transform: scale(1, 1);
}
}
Wenn Ihre Leser ähnliche Bedürfnisse haben, möchten Sie vielleicht von ihnen lernen. Wenn Sie bessere Ideen haben, bringen Sie sie bitte zu meiner Referenz.
Weitere Kenntnisse zum Thema Programmierung finden Sie unter:
Programmieren lernen! !
Das obige ist der detaillierte Inhalt vonCSS, um Punkte-Animationseffekte zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
