如何为分层图像添加Wiggle动画？如何为多图设置加载触发Wiggle动画？

• 打开AE项目，选中目标分层图像图层
• 找到图层的位置/缩放/旋转属性（常用位置属性实现抖动），按住Alt（Windows）/Option（Mac）点击属性前的码表按钮，打开表达式输入框
• 输入表达式：wiggle(5, 10)
  • 第一个数字5代表每秒抖动次数，第二个数字10代表抖动幅度（单位为像素/角度，根据属性类型自动适配）
  • 可按需调整参数：比如wiggle(2, 5)对应平缓抖动，wiggle(8, 15)对应更剧烈的抖动
• 按小键盘Enter确认，图层将自动生成持续的Wiggle抖动效果

场景1：网页端实现（加载完成时触发） #

• 先定义CSS抖动动画：

@keyframes wiggle {
  0% { transform: translate(0, 0); }
  25% { transform: translate(2px, 2px); }
  50% { transform: translate(0, 0); }
  75% { transform: translate(-2px, -2px); }
  100% { transform: translate(0, 0); }
}

.wiggle-active {
  animation: wiggle 0.5s ease-in-out 2; /* 单次动画0.5秒，循环2次 */
}

• 用JavaScript监听图片加载状态，完成后触发动画：

const images = document.querySelectorAll('.load-wiggle');
images.forEach(img => {
  img.addEventListener('load', () => {
    img.classList.add('wiggle-active');
    // 动画结束后移除类，避免重复触发
    img.addEventListener('animationend', () => {
      img.classList.remove('wiggle-active');
    }, { once: true });
  });
  // 处理图片已缓存的情况
  if (img.complete) {
    img.classList.add('wiggle-active');
  }
});

• 使用时给目标图片添加class="load-wiggle"即可

场景2：视频剪辑软件（如Adobe After Effects）实现（时间轴入点触发） #

• 将多张图片导入AE时间轴，设置好各自的入点位置
• 选中第一张图片的位置属性，按住Alt/Option点击码表，输入表达式：

if (time > inPoint) {
  wiggle(5, 10); // 入点后开始抖动
} else {
  value; // 入点前保持原始位置
}

• 右键该属性的表达式选择「复制表达式」，依次粘贴到其他图片的对应属性上，即可实现每张图片在加载（入点）时触发Wiggle动画

内容的提问来源于stack exchange，提问作者Lauren