Detaillierte Erläuterung der Idee, mit CSS-Animation den Punkteeffekt zu erzielen

dies.integral.forEach(i => {
    // Winkel in Bogenmaß umrechnen let angle = Math.PI / 180 * this.getRandomArbitrary(90, 270)
    // Koordinaten basierend auf dem Bogenmaß abrufen ix = xAxis + 100 * Math.sin(Winkel)
    iy = 100 + 100 * Math.cos(Winkel)
    // Bessel-Funktion i.timing = this.timeFun[parseInt(this.getRandomArbitrary(0, 3))]
})

// Finde eine Zufallszahl zwischen zwei Zahlen getRandomArbitrary(min, max) {
    gibt Math.random() * (max - min) + min zurück;
}

.foo {
    Anzeige: Flex;
    Schriftgröße: 10px;
    Elemente ausrichten: zentrieren;
    Inhalt ausrichten: zentriert;
    Breite: 30px;
    Höhe: 30px;
    Position: fest;
    oben: 0;
    links: 0;
    Animationsname: slideDown;
    /*Standard-Bessel-Funktion*/
    Animations-Timing-Funktion: Ease-Out;
    /*Animationszeit*/
    Animationsdauer: 1500ms;
    /*Wiedergabe einer Animationsschleife*/
    Anzahl der Animationsiterationen: unendlich;
    -moz-box-shadow: -5px -5px 10px 3px rgb(277, 102, 63) Einschub;
    -webkit-box-shadow: -5px -5px 10px 3px rgb(277, 102, 63) Einschub;
    Boxschatten: -5px -5px 10px 3px rgb(277, 102, 63) Einschub;
}

/*Kleine integrale Blitze auf und ab*/
@keyframes slideDown {
    aus {
        transformieren: übersetzenY(0);
    }
    50 % {
        transformieren: übersetzenY(5px);
        Hintergrundfarbe: RGB (255, 234, 170);
    }
    Zu {
        transformieren: übersetzenY(0);
        Hintergrund: RGB (255, 202, 168);
    }
}

this.integralClass.fooClear = true
dies.totalClass.totalAdd = true
this.totalText = `${this.totalIntegral} Integral`
let count = this.integral.length, timeoutID = null, tasks = [], totalTime = parseInt(1500 / Anzahl)
const Ausgabe = (i) => neues Versprechen((Auflösung) => {
    timeoutID = setzeTimeout(() => {
        //Inkrementiere das Integral this.totalIntegral += this.integral[i].value
        // Ändern Sie die responsive Eigenschaft this.totalText = `${this.totalIntegral} Punkte`
        lösen();
    }, Gesamtzeit * i);
})
für (var i = 0; i < 5; i++) {
    Aufgaben.push(Ausgabe(i));
}
Versprechen.alle(Aufgaben).dann(() => {
    Zeitüberschreitung löschen (Timeout-ID)
})

.fooClear {
    Animationsname: ClearAway;
    Animations-Timing-Funktion: Ease-In-Out;
    Anzahl der Animationsiterationen: 1;
    Animationsfüllmodus: vorwärts;
    -Webkit-Animationsdauer: 1500 ms;
    -moz-Animationsdauer: 1500 ms;
    -o-Animationsdauer: 1500 ms;
    Animationsdauer: 1500ms;
}

/* Kleine Punkte löschen */
@keyframes löschen {
    Zu {
        oben: 150px;
        links: 207px;
        Deckkraft: 0;
        Sichtbarkeit: versteckt;
        Breite: 0;
        Höhe: 0;
    }
}

.totalAdd {
    Animationsname: Gesamtmaßstab;
    Animations-Timing-Funktion: Ease-In-Out;
    /*Die Animation wird nur einmal abgespielt*/
    Anzahl der Animationsiterationen: 1;
    /*Die Animation bleibt beim letzten Keyframe*/
    Animationsfüllmodus: vorwärts;
    -Webkit-Animationsdauer: 1500 ms;
    -moz-Animationsdauer: 1500 ms;
    -o-Animationsdauer: 1500 ms;
    Animationsdauer: 1500ms;
}

@keyframes totalScale {
    50 % {
        transformieren: Skalierung(1,15, 1,15);
        -ms-transform:scale(1.15, 1.15);
        -moz-transform: Skala (1,15, 1,15);
        -webkit-transform: Maßstab(1,15, 1,15);
        -o-transform: Skala(1,15, 1,15);
    }
    Zu {
        transformieren: Skalierung(1, 1);
        -ms-transform:Skala(1, 1);
        -moz-transform: Skala(1, 1);
        -webkit-transform: Skala(1, 1);
        -o-transform: Skalierung(1, 1);
    }
}

// Mit einem Klick Punkte erhalten aKeyReceive() {
    wenn (this.unreceivedIntegral.length === 0) {
        return bottomTip("Es wurden noch keine Punkte beansprucht")
    }
    wenn (diese.userInfo.memberAKeyGet) {
        let param = {
            Mitglieds-ID: this.userInfo.memberId,
            integralIds: this.unreceivedIntegral.map(u => u.id).join(","),
            integralerWert: this.unreceivedIntegral.reduce((acc, curr, index, arr) => { return acc + curr.value }, 0)
        }
        dies.$refs.resLoading.show(true)
        api.getAllChangeStatus(param).then(res => {
            let data = res.data
            wenn (Daten.Erfolg) {
                this.getRecordIntegralList()
                dies.playIntegralAnim()
            } anders {
                bottomTip(Daten.Nachricht)
            }
        }).schließlich(() => {
            dies.$refs.resLoading.show(false)
        })
    } anders {
        dies.$refs.refPopTip.show()
    }
},
// Animation zum Punktesammeln playIntegralAnim() {
    this.integralClass.fooClear = true
    dies.totalClass.totalAdd = true
    this.totalText = `${this.statisticsData.useValue} Punkte`
    let count = this.unreceivedIntegral.length, timeoutID = null, tasks = [], totalTime = parseInt(1500 / Anzahl)
    const Ausgabe = (i) => neues Versprechen((Auflösung) => {
        timeoutID = setzeTimeout(() => {
            this.statisticsData.useValue += this.unreceivedIntegral[i].value
            this.totalText = `${this.statisticsData.useValue} Punkte`
            lösen();
        }, Gesamtzeit * i);
    })
    für (sei i = 0; i < Anzahl; i++) {
        Aufgaben.push(Ausgabe(i));
    }
    Versprechen.alle(Aufgaben).dann(() => {
        Zeitüberschreitung löschen (Timeout-ID)
    })
}