微信小程序开发animation心跳动画效果

下面是关于微信小程序开发animation心跳动画效果的完整攻略：

一、准备工作

1. 在微信开发者工具中创建一个新的小程序项目。
2. 在项目根目录下创建一个 animation 文件夹，用于存放心跳动画所需的图片资源。

二、设计心跳动画

1. 在 animation 文件夹中准备两张心形图片，大小可以根据自己的需求而定。
2. 在小程序页面的 wxml 文件中将两张图片插入。

html
<image class="beat-icon" src="../../animation/[e-mail]"></image>
<image class="beat-icon" src="../../animation/[e-mail]"></image>

1. 在小程序页面的 wxss 文件中对两张图片进行绝对定位。

css
.beat-icon {
position: absolute;
top: 0;
left: 0;
width: 50rpx;
height: 50rpx;
z-index: 1;
}

1. 在小程序页面的 js 文件中添加动画函数，并为两张图片绑定动画效果。

```javascript
const animation = wx.createAnimation({
duration: 1000,
timingFunction: 'ease'
})

setInterval(() => {
animation.scale(1.2).opacity(0.2).step({ duration: 500 })
.scale(0.8).opacity(1).step({ duration: 500 })
this.setData({
animationData: animation.export()
})
}, 2000)
```

三、示例说明

示例一

本示例展示了一个基础的心跳动画效果，点击按钮即可启动动画。

<!-- index.wxml -->
<view class="container">
  <image class="beat-icon" src="../../animation/[e-mail]"></image>
  <image class="beat-icon" src="../../animation/[e-mail]"></image>

  <view class="btn" bindtap="startAnimation">点击开始动画</view>
</view>

// index.js
Page({
  data: {
    animationData: {},
  },
  startAnimation() {
    const animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    })

    setInterval(() => {
      animation.scale(1.2).opacity(0.2).step({ duration: 500 })
        .scale(0.8).opacity(1).step({ duration: 500 })
      this.setData({
        animationData: animation.export()
      })
    }, 2000)
  }
})

/* index.wxss */
.container {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 200rpx;
  background-color: #fff;
}

.beat-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 50rpx;
  height: 50rpx;
  z-index: 1;
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200rpx;
  height: 80rpx;
  margin: 0 auto;
  border: 1px solid #ff5722;
  border-radius: 5px;
  background-color: #fff;
  color: #ff5722;
  font-size: 28rpx;
}

示例二

本示例是将多个心跳动画效果嵌入到一个小程序页面中，每个效果有不同的触发方式，包括点击、页面加载、定时器等。

<!-- index.wxml -->
<view class="container">
  <!-- 效果1：点击触发动画 -->
  <image class="beat-icon" src="../../animation/[e-mail]" bindtap="startAnimation"></image>
  <image class="beat-icon" src="../../animation/[e-mail]" bindtap="startAnimation"></image>

  <!-- 效果2：页面加载时自动播放动画 -->
  <image class="beat-icon" src="../../animation/[e-mail]" 
         animation="{{autoAnim1}}" bindanimationend="resetAnimation"></image>
  <image class="beat-icon" src="../../animation/[e-mail]" 
         animation="{{autoAnim2}}" bindanimationend="resetAnimation"></image>

  <!-- 效果3：定时器触发动画（每2秒钟触发一次） -->
  <image class="beat-icon" src="../../animation/[e-mail]" animation="{{timerAnim1}}"></image>
  <image class="beat-icon" src="../../animation/[e-mail]" animation="{{timerAnim2}}"></image>
</view>

// index.js
Page({
  data: {
    autoAnim1: {},
    autoAnim2: {},
    timerAnim1: {},
    timerAnim2: {},
  },
  onLoad() {
    this.playAutoAnimation()
    this.playTimerAnimation()
  },
  startAnimation() {
    const animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    })

    setInterval(() => {
      animation.scale(1.2).opacity(0.2).step({ duration: 500 })
        .scale(0.8).opacity(1).step({ duration: 500 })
      this.setData({
        autoAnim1: animation.export(),
        autoAnim2: animation.export(),
      })
    }, 2000)
  },
  playAutoAnimation() {
    const animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    })

    setInterval(() => {
      animation.scale(1.2).opacity(0.2).step({ duration: 500 })
        .scale(0.8).opacity(1).step({ duration: 500 })
      this.setData({
        timerAnim1: animation.export(),
        timerAnim2: animation.export(),
      })
    }, 2000)
  },
  playTimerAnimation() {
    const animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    })

    setInterval(() => {
      animation.scale(1.2).opacity(0.2).step({ duration: 500 })
        .scale(0.8).opacity(1).step({ duration: 500 })
      this.setData({
        timerAnim1: animation.export(),
        timerAnim2: animation.export(),
      })
    }, 2000)
  },
  resetAnimation() {
    const resetAnimation = wx.createAnimation({
      duration: 0,
      timingFunction: 'linear',
    })
    resetAnimation.scale(1).opacity(1).step({ duration: 0 })
    this.setData({
      autoAnim1: resetAnimation.export(),
      autoAnim2: resetAnimation.export(),
    })
  }
})

/* index.wxss */
.container {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 200rpx;
  background-color: #fff;
}

.beat-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 50rpx;
  height: 50rpx;
  z-index: 1;
}

以上就是关于微信小程序开发animation心跳动画效果的完整攻略。