uniapp实现简单的动画效果（不使用dom操作）

在uniapp中实现简单的动画效果，可以使用<view>标签的animation属性。以下是一个示例代码，展示了如何在不使用DOM操作的情况下实现一个简单的动画效果：

<template>
  <view>
    <view class="animated-view" :animation="animationData">
      动画内容
    </view>
    <button @click="startAnimation">开始动画</button>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      animationData: null,
    };
  },
  methods: {
    startAnimation() {
      const animation = uni.createAnimation({
        duration: 1000,
        timingFunction: 'ease',
      });
 
      animation.scale(2).step();
      this.animationData = animation.export();
 
      setTimeout(() => {
        animation.scale(1).step();
        this.animationData = animation.export();
      }, 1000);
    },
  },
};
</script>
 
<style>
.animated-view {
  background-color: #f0f0f0;
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>

在这个例子中，我们定义了一个<view>元素，并通过animation属性应用了一个动画。点击按钮后，会触发startAnimation方法，该方法创建一个缩放动画，将元素放大2倍，然后在1秒后缩放回原始大小。这个动画是通过uni.createAnimation方法创建的，并且不需要直接操作DOM。