部分Android手机在小程序里运行动画会卡顿,但是在把同样的css代码转化成html然后在微信里面运行却很流畅。想问下:小程序执行动画的内核是什么?为什么会有这种现象。机型如下:OPPO R9m,微信版本6.5.10 动画详细代码如下:
< view class = "mod-scanning ui-detail" >
< view class = "ui-round" >
< view class = "round round-1" ></ view >
< view class = "round round-2" ></ view >
< view class = "round round-3" ></ view >
< view class = "round round-4" ></ view >
< view class = "ibase ibase-blue1" ></ view >
</ view >
</ view >
|
@keyframes bounce {
0% {
transform: scale( 1 );
opacity: 1 ;
}
100% {
transform: scale( 3.4 );
opacity: 0 ;
}
}
.mod-scanning .ui-round {
position : relative ;
width : 222 rpx;
height : 222 rpx;
line-height : 220 rpx;
text-align : center ;
margin : 320 rpx auto 0 auto ;
border-radius: 50% ;
}
.mod-scanning .ui-round .ibase-blue 1 {
display : block ;
position : relative ;
z-index : 9 ;
width : 220 rpx;
height : 220 rpx;
font-size : 100 rpx;
line-height : 220 rpx;
text-align : center ;
color : #fff ;
}
.mod-scanning .ui-round .round {
position : absolute ;
width : 110px ;
height : 110px ;
left : 0 ;
right : 0 ;
border-radius: 50% ;
background-color : #F57D65 ;
}
.mod-scanning .ui-round .round -1 {
z-index : 8 ;
}
.mod-scanning .ui-round .round -2 ,
.mod-scanning .ui-round .round -3 ,
.mod-scanning .ui-round .round -4 ,
.mod-scanning .ui-round .round -5 {
}
.mod-scanning .ui-round .round -2 {
z-index : 2 ;
animation: bounce 2 s 0 s infinite ease-in-out;
}
.mod-scanning .ui-round .round -3 {
z-index : 3 ;
animation: bounce 2 s -0.7 s infinite ease-in-out;
}
.mod-scanning .ui-round .round -4 {
z-index : 4 ;
animation: bounce 2 s -1.4 s infinite ease-in-out;
}
.mod-scanning .ui-round .round -5 {
}
|
if (null==_this.animation){
_this.animation = wx.createAnimation({}); // 如果没有实例,我们再 创建动画实例(警告:创建太多动画实例会发生卡顿现象)
}
同关注这个问题
楼主解决了吗?卡顿问题?
打开性能面板,流程的动画都是在59-60帧波动,而以上动画会在29-60帧之间波动