关于如何在微信小程序map地图上 cover-view 如何流畅展示动画

最新推荐文章于 2025-05-15 14:47:16 发布

原创最新推荐文章于 2025-05-15 14:47:16 发布 · 5.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #map #cover-view #animation

前端基础学习专栏收录该内容

31 篇文章

订阅专栏

本文介绍在微信小程序开发中，如何优化地图页面上的cover-view动画，避免真机运行时出现卡顿现象。通过将动画控制从wxss转移至js，并利用微信小程序的Animation对象，实现流畅的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在进行微信小程序开发过程中发现了坑，map地图存在时，cover-view 所展示的动画在真机上会很卡。
解决的方法也很简单，就是不写在wxss里，而是写在js中

/*  底部弹窗开始 -使屏幕变暗  */
.commodity_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 99;
  color: #fff;
}
 .hua{
    width:96%;
    min-height: 500rpx;
    margin-left: 2%;
    background:#fff;
    position:absolute;
    bottom: 0rpx;
    z-index: 100;
}

 <map id="map" bindmarkertap="markertap" ></map>
 <cover-view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></cover-view>
 <cover-view class="hua" animation='{{animationData}}'   wx:if="{{showModalStatus}}"> </cover-view>

在js中运用微信小程序所编写的Animation对象
https://developers.weixin.qq.com/miniprogram/dev/api/Animation.html

	data: {
		animationData:''
	},
  //点击merkers
  markertap(e) {
    let that= this;
    wx.request({
      url: '',
      data: {
      },
      method: "post",
      header: {
        'content-type': 'application/x-www-form-urlencoded' // 默认值
      },
      success(res) {
        // 显示遮罩层
        var animation = wx.createAnimation({
          duration: 200,
          timingFunction: "linear",
          delay: 0
        })
        that.animation = animation
        animation.translateY(400).step()
        that.setData({
          animationData: animation.export(),
          showModalStatus: true,
        })
        setTimeout(function () {
          animation.translateY(0).step()
          that.setData({
            animationData: animation.export()
          })
        }.bind(this), 200)
      }
    })
  },

  //隐藏对话框
  hideModal: function () {
    // 隐藏遮罩层
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(400).step()
    this.setData({
      animationData: animation.export(),
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export(),
        showModalStatus: false
      })
    }.bind(this), 200)
  },