微信小程序端使用css动画真机上卡顿现象

掌门人木牙子
  • 23

问题描述

以前在小程序端也曾用过css动画,虽然也有些延迟卡顿,但还算流畅,这次使用的地方,用了map组件,需要在map上层显示,需要用到cover-view,我不确定跟这个是否有影响,看文档,如果基础库是最新的,也是完全支持的。

值得一提的是,现在分次进入,有时会卡顿,有时却不会

问题出现的环境背景及自己尝试过哪些方法

在map组件上层通过cover-view来实现动画

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)
<cover-view class="locationBtn">

<cover-image src="../../images/icon-location-motion.png" class="ico-location"></cover-image>
<cover-image src="../../images/circle-location-motion.png" class="circle"></cover-image>

</cover-view>


.ico-location {
width:36rpx;
height: 36rpx;
-webkit-animation:iconX .8s infinite;
}

.circle {
width:76rpx;
height:76rpx;
-webkit-animation:iconO .5s linear infinite;
}

@-webkit-keyframes iconX
{
0% {-webkit-opacity:1;}
50% {-webkit-opacity:.2;}
100% {-webkit-opacity:1;}
}

@-webkit-keyframes iconO
{
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}

你期待的结果是什么?实际看到的错误信息又是什么?

按理动画不应该如此卡顿,现在在真机上,卡顿如幻灯片一样

回复
阅读 8.7k
2 个回答

不是不建议在原生组件做动画吗

你知道吗?

宣传栏