发现问题
- 在做一个悬浮动画效果时,测试人员提出一个问题。
- 在 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 机型上测试后,没再复现出卡顿的问题。