微信小程序开发之animation动画实现

1. animation动画介绍

在微信小程序开发中，我们经常会用到动画，而animation就是我们常用的一种动画实现方式。它支持CSS3中的animation语法，可以让开发者通过JS控制动画的开始、暂停、继续、结束等操作。具体的实现可分为以下几个步骤：

1.1 创建animation实例

在代码中创建一个animation实例，并设置需要动画的属性和初始值与结束值，如下所示：

let animation = wx.createAnimation({
  duration: 1000, //动画持续时间
  timingFunction: 'linear', //动画的效果(timingFunction支持 linear ease ease-in ease-in-out ease-out step-start step-end)
})
animation.translateX(-100).step() //设置translateX属性初始值和结束值，并通过step()方法表示一组动画完成

1.2 将animation实例绑定到一个组件上

将创建好的animation实例通过selectComponent方法选取组件，并调用组件的方法exportAnimation()将animation实例导出，以便在JS代码中操作该动画。如下所示：

let animation = wx.createAnimation({
  duration: 1000, //动画持续时间
  timingFunction: 'linear', //动画的效果(timingFunction支持 linear ease ease-in ease-in-out ease-out step-start step-end)
})
animation.translateX(-100).step() //设置translateX属性初始值和结束值，并通过step()方法表示一组动画完成
this.setData({
  animationData: animation.export() //将animation实例导出
})

1.3 在JS代码中操作animation实例

通过animation实例提供的方法，我们可以控制动画的开始、暂停、继续、结束等操作。如下所示：

let animation = wx.createAnimation({
  duration: 1000, //动画持续时间
  timingFunction: 'linear', //动画的效果(timingFunction支持 linear ease ease-in ease-in-out ease-out step-start step-end)
})
animation.translateX(-100).step() //设置translateX属性初始值和结束值，并通过step()方法表示一组动画完成
this.setData({
  animationData: animation.export() //将animation实例导出
})
// 开始动画
this.data.animationData.translateX(-200).step()
this.setData({
  animationData: this.data.animationData.export()
})
// 暂停动画
this.data.animationData.exportAnimation.pause()
// 继续动画
this.data.animationData.exportAnimation.resume()
// 结束动画
this.data.animationData.exportAnimation.cancel()

2. animation动画实现

接下来，我们通过一个例子演示如何使用animation动画实现小程序中的动画效果。本例子实现的效果是：点击按钮时，实现一个类似抖音点赞的心形动画效果。

2.1 创建一个页面

在微信小程序中，我们先创建一个页面，如下所示：

<view class='container'>
  <view class='like-btn' bindtap='likeBtnClick' animation='{{likeAnimation}}'></view>
</view>

在页面中，我们创建一个容器和一个绑定点击事件的按钮。当按钮被点击时，通过JS代码触发动画效果。

2.2 实现动画效果

在JS代码中，我们创建一个animation实例，设置需要动画的属性和初始值与结束值，并将animation实例绑定到按钮组件上。当点击按钮时，通过JS代码触发动画效果。

Page({
  data: {
    likeAnimation: {} //定义likeAnimation对象的初始值为空
  },
  // 点击按钮时触发
  likeBtnClick() {
    // 创建一个animation实例
    let likeAnimation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease'
    })
    // 设置动画初始值和结束值，实现心形变化效果
    likeAnimation.scale(1.5).rotate(45).opacity(0.6).step()
    likeAnimation.scale(1).rotate(0).opacity(1).step()
    // 将animation实例绑定到按钮组件上
    this.setData({
      likeAnimation: likeAnimation.export()
    })
  }
})

2.3 设置CSS样式

最后，我们在CSS样式中设置按钮组件的大小和背景色，使其具有点击效果。如下所示：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #F3F3F3;
}
.like-btn {
  width: 100rpx;
  height: 100rpx;
  background-color: #FF4081;
  border-radius: 50%;
  box-shadow: 0 4rpx 10rpx rgba(255, 64, 129, 0.4);
  animation-duration: 1s; /* 动画持续时间 */
  animation-timing-function: ease; /* 动画的效果 */
}
.like-btn:active {
  box-shadow: 0 0 0 rgba(255, 64, 129, 1);
}

至此，我们就通过animation动画实现了小程序中的动画效果。点击按钮，就会实现一个类似抖音点赞的心形动画效果。