微信小程序 顶点动画

微信小程序的顶点动画是一种CSS3特性，它允许开发者通过改变元素的位置、尺寸或其他属性，使其在一定时间内平滑地从一个状态变化到另一个状态。在微信小程序中，你可以利用`wx.createSelectorQuery()`配合`animation`模块来创建和控制顶点动画。例如：

Page({
  data: {
    animate: false,
  },
  
  startAnimate() {
    const query = wx.createSelectorQuery();
    query.select('#myElement').boundingClientRect(); // 获取元素信息
    query.exec((res) => {
      let styles = {
        transform: `translate(${res[0].top}px, ${res[0].left}px)`, // 设置初始位置
        transition: 'all 1s ease', // 定义动画效果
      };
      this.setData({ animate: true });
      query.select('#myElement').style(styles); // 应用样式开始动画
    });
  },
  
  stopAnimate() {
    if (this.data.animate) {
      const query = wx.createSelectorQuery();
      query.select('#myElement').style({ transform: 'none' }); // 撤销动画
      this.setData({ animate: false });
    }
  },
})

在这个例子中，当`startAnimate`被触发时，会先获取元素的位置，然后设置一个平移动画。当`stopAnimate`被触发时，则停止当前的动画。注意要在小程序的`app.wxss`或组件的`.wxml`文件中设置好需要动画的元素。