收藏
回答

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: 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 {
  /*border: 1rpx solid #fff;*/
}
 
.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 {
  /*z-index: 5;*/
  /*animation: bounce 2s -1.5s infinite ease-in-out;*/
}


最后一次编辑于  2017-07-17  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

4 个回答

  • 鑫
    07-01

    if (null==_this.animation){

    _this.animation = wx.createAnimation({});  // 如果没有实例,我们再 创建动画实例(警告:创建太多动画实例会发生卡顿现象)

    }


    07-01
    赞同
    回复
  • Haishan
    Haishan
    2018-09-26

    同关注这个问题

    2018-09-26
    赞同
    回复
  • 薛定谔de小白喵
    薛定谔de小白喵
    2018-09-05

    楼主解决了吗?卡顿问题?

    2018-09-05
    赞同
    回复
  • Djune
    Djune
    2017-07-17

    打开性能面板,流程的动画都是在59-60帧波动,而以上动画会在29-60帧之间波动

    2017-07-17
    赞同
    回复