playfulness-fun

趣味与欢乐动画

创建有趣、出人意料、让交互真正愉悦的动画。

情感目标

趣味通过出乎意料、充满奇想的动效邀请用户互动。动画富有个性、表达生动，能让用户会心一笑，才称得上有趣。

趣味动画的迪士尼原则

挤压与拉伸

幅度大且夸张（25-40%），呈现橡胶般的卡通物理效果。物体应该显得鲜活灵动、反应敏捷，像沙滩球一样弹跳。

预备动作

夸张的蓄势动作（150-250ms）。运用喜剧节奏——铺垫越充分，效果越出彩。元素在行动前先“思考”。

演出布局

采用戏剧化呈现，清晰铺垫笑点。为有趣的瞬间留出空间，让用户充分感受和注意到它们。

连贯动作

拥抱即兴发挥。采用摇晃的路径和不可预测的弹跳，让角色和元素仿佛有自己的想法。

跟随动作与重叠动作

充分运用弹跳式跟随动作，包括过冲、摇晃和回稳。就像卡通角色滑行着停下来。

缓入与缓出

采用非对称效果并加入过冲。快速启动，弹跳着落地。使用 cubic-bezier(0.68, -0.55, 0.265, 1.55) 营造弹性效果。

弧线

采用夸张、富有弹性的曲线。跳跃时使用高弧线，用弯弯曲曲的路径展现个性。不要让任何元素沿直线移动。

次要动作

大量使用次要动作！加入扭动、闪光和表情。让元素彼此呼应，让整个界面充满活力。

节奏

节奏多变且富有表现力（100-500ms）。结合快速弹动与缓慢蓄势，并通过停顿和节拍营造喜剧效果。

夸张

幅度要大（30-50%）。将动作夸张到卡通程度。物理效果可以不真实，但情感表达要真实。

扎实绘制

通过形变保持吸引力。拉伸后的元素依然要讨喜，并通过体积变化增强效果。

吸引力

采用圆润、友好的形状和明亮、饱和的色彩。加入大眼睛和富有表现力的造型，让一切都充满个性。

时间建议

元素	持续时间	缓动
弹跳	400-600ms	spring(1, 60, 8)
摇晃	300-400ms	ease-in-out
弹出	150-250ms	ease-out-back
挤压	100-150ms	ease-out

CSS 缓动

--play-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--play-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
--play-wobble: cubic-bezier(0.45, 0.05, 0.55, 0.95);

趣味动画

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

@keyframes boing {
  0% { transform: scale(1); }
  30% { transform: scale(1.25, 0.75); }
  50% { transform: scale(0.85, 1.15); }
  70% { transform: scale(1.05, 0.95); }
  100% { transform: scale(1); }
}

适用场景

• 游戏与游戏化设计
• 儿童界面
• 社交媒体反应
• 新手引导教程
• 空状态
• 复活节彩蛋
• 休闲应用
• 娱乐平台