bug 记录 - animation 在 IOS机型掉帧情况

神膘护体小月半2024-09-15 12:03

发现问题

在做一个悬浮动画效果时，测试人员提出一个问题。
在 IOS 机型上，动画效果有掉帧不流畅的现象。在安卓机型没有问题。

问题代码

想要的效果是：以随机角度出现，小幅度缩小淡入，向上飘动并放大最后淡出消失

css 复制代码

.animationBox{
	width: 100px;
	height: 100px;
	position: absolute;
	top: 0;
	opacity: 1;
	transform: var(--rotateZ) scale(1.2);
	animation: animation 0.5s 1 linear forwards;
}
@keyframes animation {
	0% {
		top: 0;
		opacity: 0;
		transform: var(--rotateZ) scale(1.2);
	}
	30% {
		top: 0;
		opacity: 1;
		transform: var(--rotateZ) scale(1);
	}
	70% {
		top: -100px;
		opacity: 1;
		transform: var(--rotateZ) scale(1);
	}
	99% {
		top: -100px;
		opacity: 0;
		transform: var(--rotateZ) scale(1.6);
	}
	100% {
		top: -100px;
		opacity: 0;
		transform: var(--rotateZ) scale(1.6);
		display: none;
		visibility: hidden;
	}
}

解决思路

参考了一个解答，IOS 机型的 animation 会对一部分属性会进行重绘，所以会有卡顿不流畅的效果。
参考链接

重新编写

css 复制代码

.animationBox{
	width: 100px;
	height: 100px;
	opacity: 1;
	transform: translateY(0) var(--rotateZ) scale(1.2);
	animation: animation 0.5s 1 linear forwards;
}
@keyframes animation {
	0% {
		opacity: 0;
		transform: translateY(0) var(--rotateZ) scale(1.2);
	}
	30% {
		opacity: 1;
		transform: translateY(0) var(--rotateZ) scale(1);
	}
	70% {
		opacity: 1;
		transform: translateY(-100%) var(--rotateZ) scale(1);
	}
	99% {
		opacity: 0;
		transform: translateY(-100%) var(--rotateZ) scale(1.6);
	}
	100% {
		opacity: 0;
		transform: translateY(-100%) var(--rotateZ) scale(1.6);
		display: none;
		visibility: hidden;
	}
}

这段代码在多个 IOS 机型上测试后，没再复现出卡顿的问题。