CSSアニメーションでポイント獲得効果を実現するアイデアを詳しく解説

this.integral.forEach(i => {
    // 角度をラジアンに変換します。let angle = Math.PI / 180 * this.getRandomArbitrary(90, 270)
    // ラジアンに基づいて座標を取得します ix = xAxis + 100 * Math.sin(angle)
    iy = 100 + 100 * Math.cos(角度)
    // ベッセル関数 i.timing = this.timeFun[parseInt(this.getRandomArbitrary(0, 3))]
})

// 2つの数値間の乱数を見つける getRandomArbitrary(min, max) {
    Math.random() * (max - min) + min を返します。
}

.foo {
    ディスプレイ: フレックス;
    フォントサイズ: 10px;
    アイテムの位置を中央揃えにします。
    コンテンツの中央揃え: 中央;
    幅: 30ピクセル;
    高さ: 30px;
    位置: 固定;
    上: 0;
    左: 0;
    アニメーション名: slideDown;
    /*デフォルトのベッセル関数*/
    アニメーションタイミング関数: easy-out;
    /*アニメーション時間*/
    アニメーション期間: 1500ms;
    /*アニメーションループ再生*/
    アニメーションの反復回数: 無限;
    -moz-box-shadow: -5px -5px 10px 3px rgb(277, 102, 63) インセット;
    -webkit-box-shadow: -5px -5px 10px 3px rgb(277, 102, 63) インセット;
    ボックスシャドウ: -5px -5px 10px 3px rgb(277, 102, 63) インセット;
}

/*小さな積分が上下に点滅します*/
@keyframes スライドダウン {
    から {
        変換: translateY(0);
    }
    50% {
        変換: translateY(5px);
        背景色: rgb(255, 234, 170);
    }
    に {
        変換: translateY(0);
        背景: rgb(255, 202, 168);
    }
}

this.integralClass.fooClear = true
this.totalClass.totalAdd = true
this.totalText = `${this.totalIntegral} 積分`
count = this.integral.length、timeoutID = null、tasks = []、totalTime = parseInt(1500 / count) とします。
const 出力 = (i) => 新しい Promise((resolve) => {
    タイムアウトID = setTimeout(() => {
        // 積分を増分する this.totalIntegral += this.integral[i].value
        // レスポンシブプロパティを変更します this.totalText = `${this.totalIntegral} points`
        解決する（）;
    }, 合計時間 * i);
})
(var i = 0; i < 5; i++) の場合 {
    タスクをプッシュします(出力(i));
}
Promise.all(tasks).then(() => {
    タイムアウトをクリア(タイムアウトID)
})

.fooクリア{
    アニメーション名: clearAway;
    アニメーションタイミング関数: easy-in-out;
    アニメーションの反復回数: 1;
    アニメーション塗りつぶしモード: forwards;
    -webkit アニメーション期間: 1500 ミリ秒;
    -moz-アニメーション期間: 1500ms;
    -o-アニメーション期間: 1500ms;
    アニメーション期間: 1500ms;
}

/* 小さな点をクリアする */
@keyframes をクリアする {
    に {
        上: 150px;
        左: 207px;
        不透明度: 0;
        可視性: 非表示;
        幅: 0;
        高さ: 0;
    }
}

.合計追加{
    アニメーション名: totalScale;
    アニメーションタイミング関数: easy-in-out;
    /*アニメーションは1回だけ再生されます*/
    アニメーションの反復回数: 1;
    /*アニメーションは最後のキーフレームに留まります*/
    アニメーション塗りつぶしモード: forwards;
    -webkit アニメーション期間: 1500 ミリ秒;
    -moz-アニメーション期間: 1500ms;
    -o-アニメーション期間: 1500ms;
    アニメーション期間: 1500ms;
}

@keyframes 合計スケール {
    50% {
        変換: スケール(1.15, 1.15);
        変換後のサイズを 1.15 から 1.15 に変更します。
        スケールを 1.15 に設定します。
        -webkit-transform: スケール(1.15, 1.15);
        -o-変換: スケール(1.15, 1.15);
    }
    に {
        変換: スケール(1, 1);
        変換後のサイズを1から10までの範囲で指定します。
        スケールを1にするには、次のようにします。
        -webkit-transform: スケール(1, 1);
        -o-変換: スケール(1, 1);
    }
}

// ワンクリックでポイントを受け取る aKeyReceive() {
    （this.unreceivedIntegral.length === 0）の場合{
        return bottomTip("まだポイントは獲得されていません")
    }
    if (this.userInfo.memberAKeyGet) {
        パラメータ = {
            メンバーID: this.userInfo.memberId、
            積分ID: this.unreceivedIntegral.map(u => u.id).join(","),
            積分値: this.unreceivedIntegral.reduce((acc, curr, index, arr) => { return acc + curr.value }, 0)
        }
        this.$refs.resLoading.show(true)
        api.getAllChangeStatus(param).then(res => {
            データ = res.data とします
            if (データ.成功) {
                this.getRecordIntegralList()
                this.playIntegralAnim()
            } それ以外 {
                ボトムチップ(データ.メッセージ)
            }
        }).finally(() => {
            this.$refs.resLoading.show(false)
        })
    } それ以外 {
        this.$refs.refPopTip.show()
    }
},
// ポイントを集めるアニメーション playIntegralAnim() {
    this.integralClass.fooClear = true
    this.totalClass.totalAdd = true
    this.totalText = `${this.statisticsData.useValue} ポイント`
    count = this.unreceivedIntegral.length、timeoutID = null、tasks = []、totalTime = parseInt(1500 / count) とします。
    const 出力 = (i) => 新しい Promise((resolve) => {
        タイムアウトID = setTimeout(() => {
            this.statisticsData.useValue += this.unreceivedIntegral[i].value
            this.totalText = `${this.statisticsData.useValue} ポイント`
            解決する（）;
        }, 合計時間 * i);
    })
    (i = 0 とします; i < count; i++) {
        タスクをプッシュします(出力(i));
    }
    Promise.all(tasks).then(() => {
        タイムアウトをクリア(タイムアウトID)
    })
}