html怎么添加积分系统,CSS动画实现领积分效果的思路详解

1. 整体思路

1.1 半圆围绕效果

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))]

})

// 求两个数之间的随机数

getRandomArbitrary(min, max) {

return Math.random() * (max - min) + min;

}

timeFunc是一个贝塞尔函数名称集合，为了实现积分闪烁的效果(上下滑动)

1.2 积分闪烁(上下滑动)

.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);

}

}

1.3 总积分递增效果

this.integralClass.fooClear = 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++) {

}

clearTimeout(timeoutID)

})

1.4 小积分消失，总积分膨胀效果

.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;

}

}

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);

}

}

2. 在项目中落地

// 一键领取积分

return bottomTip("暂无未领积分")

}

if (this.userInfo.memberAKeyGet) {

let param = {

memberId: this.userInfo.memberId,

integralValue: this.unreceivedIntegral.reduce((acc, curr, index, arr) => { return acc + curr.value }, 0)

}

this.$refs.resLoading.show(true) api.getAllChangeStatus(param).then(res => { let data = res.data if (data.success) { this.getRecordIntegralList() this.playIntegralAnim() } else { bottomTip(data.message) } }).finally(() => { this.$refs.resLoading.show(false)

})

} else {

this.$refs.refPopTip.show() } }, // 领取积分的动画 playIntegralAnim() { this.integralClass.fooClear = true this.totalClass.totalAdd = true this.totalText = ${this.statisticsData.useValue}积分

let count = this.unreceivedIntegral.length, timeoutID = null, tasks = [], totalTime = parseInt(1500 / count)

const output = (i) => new Promise((resolve) => {

timeoutID = setTimeout(() => {

this.totalText = \${this.statisticsData.useValue}积分

resolve();

}, totalTime * i);

})

for (let i = 0; i < count; i++) {

}

clearTimeout(timeoutID)

})

}

• 0
点赞
• 2
收藏
觉得还不错? 一键收藏
• 0
评论
01-27
02-20 1501
02-26
12-11 150
07-06 269
06-03 7323

“相关推荐”对你有帮助么？

• 非常没帮助
• 没帮助
• 一般
• 有帮助
• 非常有帮助

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。