如何实现微信小程序动画？添加到我的小程序动画实现详细讲解，附壁纸小程序源码下载链接

为了让用户能尽可能多地使用小程序，也算是沉淀用户，现在很多小程序中，都有引导用户“添加到我的小程序”的操作提示，而且大多都是有动画效果。在高清壁纸推荐小程序首页，用户每次进入，都会在页面右上方，显示“添加小程序”的动画提示，如下图所示：

高清壁纸推荐小程序

怎么实现这样的关注提示功能呢？首先，进入pages/index/index.wxml文件中，编写布局代码如下：

<!-- “添加小程序”的动画提示 -->

<view hidden='{
  {isWebChatTipsHidden}}' class='wx_tip'>

  <image src="/images/tip_ios.svg"></image>

</view>

布局代码很简单，主要是通过样式实现图片“心跳”的动画效果，接下来，进入pages/index/index.wxss文件中，编写样式代码如下：

/* “添加小程序”的动画提示容器样式 */

.wx_tip {

  position: fixed;/* 固定、停靠定位 */

  z-index: 120;/* 垂直方向层级，数字越大越靠前 */

  top: 4rpx;/* 距离顶部位置 */

  right: -40px;/* 距离右侧位置 */

  height: 120rpx;

}

/* “添加小程序”的动画提示图片样式 */

.wx_tip image {

  height: 100%;

  animation: heart 1.3s ease-in-out 2.7s infinite alternate;

  /* 动画名称 动画完成一个周期所花费的秒或毫秒 动画的速度曲线 动画何时开始（延迟开始时间） 动画被播放的次数 动画是否在下一周期逆向地播放 */

}


/* 定义“心跳”动画 */

@keyframes heart {

  /* 开始位置 */

  from {

    transform: translate(0, 0);

  }

  /* 结束位置 */

  to {

    transform: translate(0, 6px);

  }

}

在上面代码中，关键点在于：动画（animation）样式的使用。虽然说微信小程序可以直接通过逻辑代码，实现一样的动画效果，但出于便捷和灵活性考虑，一般建议还是通过样式代码来实现。

关于动画（animation）样式，有很多相关属性和知识点，这里不可能全部讲解，也不是本文的重点