部分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: 222rpx;
height: 222rpx;
line-height: 220rpx;
text-align: center;
margin: 320rpx auto 0 auto;
border-radius: 50%;
}
.mod-scanning .ui-round .ibase-blue1 {
display: block;
position: relative;
z-index: 9;
width: 220rpx;
height: 220rpx;
font-size: 100rpx;
line-height: 220rpx;
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 2s 0s infinite ease-in-out;
}
.mod-scanning .ui-round .round-3 {
z-index: 3;
animation: bounce 2s -0.7s infinite ease-in-out;
}
.mod-scanning .ui-round .round-4 {
z-index: 4;
animation: bounce 2s -1.4s infinite ease-in-out;
}
.mod-scanning .ui-round .round-5 {
}
|
if (null==_this.animation){
_this.animation = wx.createAnimation({}); // 如果没有实例，我们再 创建动画实例（警告：创建太多动画实例会发生卡顿现象）
}
同关注这个问题
楼主解决了吗？卡顿问题？
打开性能面板，流程的动画都是在59-60帧波动，而以上动画会在29-60帧之间波动