uni-app 图片操作功能需求 实现图片的旋转 抖动等效果

在 uni-app 中实现图片的旋转和抖动效果，可以利用 CSS 动画和 JavaScript 来完成。以下是一个示例代码，展示了如何在 uni-app 中实现这些功能。

1. 旋转效果

首先，我们来实现图片的旋转效果。可以通过 CSS 动画来实现。

示例代码：

<template>
  <view class="container">
    <image :src="imageSrc" class="rotating-image" @click="rotateImage"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/your-image.jpg',
      rotation: 0,
    };
  },
  methods: {
    rotateImage() {
      this.rotation += 360;
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.rotating-image {
  width: 200px;
  height: 200px;
  transition: transform 0.5s ease-in-out;
  transform: rotate(var(--rotation, 0deg));
}
</style>
<script setup>
import { ref, onMounted } from 'vue';

const rotation = ref(0);

onMounted(() => {
  // 使用 CSS 变量设置初始旋转角度（可选）
  document.documentElement.style.setProperty('--rotation', `${rotation.value}deg`);
});

const rotateImage = () => {
  rotation.value += 360;
  document.documentElement.style.setProperty('--rotation', `${rotation.value}deg`);
};
</script>

2. 抖动效果

接下来，我们实现图片的抖动效果。可以使用 CSS 关键帧动画来实现。

示例代码：

<template>
  <view class="container">
    <image :src="imageSrc" class="shaking-image" @click="shakeImage"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/your-image.jpg',
      isShaking: false,
    };
  },
  methods: {
    shakeImage() {
      this.isShaking = true;
      setTimeout(() => {
        this.isShaking = false;
      }, 1000); // 抖动持续1秒
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.shaking-image {
  width: 200px;
  height: 200px;
  animation: shake 0.5s infinite;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  75% { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}

.shaking-image.no-shake {
  animation: none;
}
</style>
<script setup>
import { ref } from 'vue';

const isShaking = ref(false);

const shakeImage = () => {
  isShaking.value = true;
  setTimeout(() => {
    isShaking.value = false;
  }, 1000);
};
</script>

<style>
.shaking-image[data-v-xxxxxxx] {
  animation-play-state: running;
}
.shaking-image[data-v-xxxxxxx][data-is-shaking="false"] {
  animation-play-state: paused;
}
</style>
<script>
export default {
  computed: {
    isShakingStyle() {
      return {
        '--is-shaking': this.isShaking ? 'true' : 'false',
      };
    },
  },
};
</script>

注意：由于 uni-app 的特性，可能需要根据实际平台（如小程序、H5、App等）调整代码。上述代码在H5平台上应该能正常运行，但在小程序中可能需要使用小程序的动画API。