在Vue应用开发中，为页面添加生动有趣的动画效果能极大提升用户体验。图片震动与抖动动画就是两种能吸引用户注意力的特效，下面就来介绍在Vue中实现它们的方法。

利用CSS的@keyframes规则来定义动画关键帧。对于图片震动动画，我们可以这样定义：

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

这段代码描述了图片从初始位置开始，向左侧移动5像素，再向右侧移动5像素，最后回到初始位置的过程。

对于抖动动画，关键帧定义如下：

@keyframes tremble {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(-5deg); }
  40% { transform: rotate(5deg); }
  60% { transform: rotate(-5deg); }
  80% { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}

这里图片会在一定角度范围内来回旋转，实现抖动效果。

在Vue组件中使用这些动画也很简单。在模板部分，添加一个img标签，并绑定一个类名：

<template>
  <img :class="['animated-image', shake?'shake' : tremble? 'tremble' : '']" src="your-image-url.jpg" alt="example">
</template>

在脚本部分，定义数据属性来控制动画的显示：

export default {
  data() {
    return {
      shake: false,
      tremble: false
    };
  },
  methods: {
    startShake() {
      this.shake = true;
    },
    startTremble() {
      this.tremble = true;
    }
  }
};

最后，在样式部分引入定义好的动画：

.animated-image {
  width: 200px;
  height: 200px;
}
.shake {
  animation: shake 0.5s ease-in-out;
}
.tremble {
  animation: tremble 0.3s ease-in-out;
}

通过上述步骤，在Vue应用中就能轻松实现图片的震动与抖动动画。开发者还可以根据实际需求调整关键帧、动画时长和缓动函数等参数，创造出更多个性化的动画效果，为用户带来独特的视觉体验。