发现问题
- 在做一个悬浮动画效果时，测试人员提出一个问题。
- 在 IOS 机型上，动画效果有掉帧不流畅的现象。在安卓机型没有问题。
问题代码
- 想要的效果是：以随机角度出现，小幅度缩小淡入，向上飘动并放大最后淡出消失
.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 会对一部分属性会进行重绘，所以会有卡顿不流畅的效果。
- 参考链接
重新编写
.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 机型上测试后，没再复现出卡顿的问题。
