同关注这个问题
Android手机animation动画卡顿问题部分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="round round-5"></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[代码] [代码]{[代码][代码] [代码][代码]/*border: 1rpx solid #fff;*/[代码][代码]}[代码] [代码].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[代码] [代码]{[代码][代码] [代码][代码]/*z-index: 5;*/[代码][代码] [代码][代码]/*animation: bounce 2s -1.5s infinite ease-in-out;*/[代码][代码]}[代码]
2018-09-26