uniapp 点击动画

Uniapp 中可以通过 `animation` 组件来实现点击动画效果。具体实现步骤如下：

1. 在需要添加点击动画的元素中添加 `@tap` 事件监听器。

2. 在 `@tap` 事件监听器中定义一个 `animation` 对象，并使用 `uni.createAnimation()` 方法创建一个动画。

3. 在动画对象中定义动画属性，例如 `scale`、`opacity`、`rotate` 等。

4. 使用 `animation.step()` 方法将动画属性赋值给动画对象。

5. 使用 `this.setData()` 方法将动画对象赋值给页面数据中的一个变量（例如 `animationData`）。

6. 在模板中使用 `animation` 组件，并将 `animationData` 变量绑定到 `animation` 组件的 `data` 属性上。

7. 在模板中需要添加点击动画的元素上添加 `animation` 组件，并设置 `id` 属性为刚才创建的动画对象的名称（例如 `animation`）。

8. 在 `@tap` 事件监听器中使用 `this.selectComponent('#animation')` 方法获取 `animation` 组件实例，并调用 `animation.export()` 方法将动画导出。

9. 使用 `this.setData()` 方法将导出的动画赋值给 `animationData` 变量。

10. 在模板中添加 `wx:if` 条件判断，根据 `animationData` 变量的值来显示或隐藏 `animation` 组件，从而触发动画效果。

下面是一个简单的示例代码：

<view @tap="onTap">
  <text>点击我</text>
  <animation id="animation" data="{{animationData}}"></animation>
</view>

export default {
  data() {
    return {
      animationData: {},
    };
  },
  methods: {
    onTap() {
      const animation = uni.createAnimation({
        duration: 300,
        timingFunction: 'linear',
      });
      animation.scale(1.2).opacity(0).step();
      this.setData({
        animationData: animation.export(),
      });
      this.selectComponent('#animation').show();
    },
  },
};