动效风格

当我们开始做一份H5的动效设计时，设计师需要根据需求及已经通过的视觉设计去定义该h5的视觉风格，这将会影响到动效风格的判断及相对应的动效选择

设计视觉风格怎么分？详见 https://www.yuque.com/vlwtxs/rl8wol/rfutg2（设计软实力-视觉风格还能这么分）

设计风格对应到的动效风格

氛围风格分类 案例模板 动效风格 动效
奢华/中国风/励志/政务/商务 image.pngimage.pngimage.pngimage.pngimage.pngimage.png 稳重、庄重、优雅
卡通/少女/可爱/文艺/清新 image.pngimage.pngimage.pngimage.pngimage.pngimage.png 活泼、俏皮、轻快
炫酷/科技/时尚 image.pngimage.pngimage.pngimage.pngimage.pngimage.png 动感、
趣味复古/喜庆 image.pngimage.pngimage.pngimage.png 活泼、玩味

动效风格

  1. 进场动画 /退场动画

（进场动画与进场动画相反，但动效风格一致，进场动画退场动画可形成一个完整动效闭环）

动效风格（按表现风格分类） 定义（） 可选用进场动效 可选用强调动效 可选用退场动效
大气稳重 营造一种能力强大值得信赖的感觉 飞入、渐变和缩放、渐变和移动、渐现、模糊
活泼轻快 让人感觉到欢快、轻松的动效 出现、掉落、漂移、漂移和缩放、移入、弹入、翻转、立体翻转、螺旋翻转、绕轴心点旋绕、缩放、
流畅动感 呈现干净利落的感觉，具备科技感 出现、掉落、漂移、漂移和缩放、移入、弹入、翻转、立体翻转、螺旋翻转、绕轴心点旋绕、缩放、缩放（大）、旋转 
  1.                                                <br />出现和移动
  • 出现→活泼、俏皮、轻快、玩味
    出现.gif
  • 掉落→活泼、俏皮、轻快、玩味
    掉落.gif
  • 飞入→稳重、庄重、优雅
    飞入.gif
  • 渐变和缩放→稳重、庄重、优雅
    渐变和缩放.gif
  • 渐变和移动→稳重、庄重、优雅、动感

渐变和移动.gif

  • 渐现→稳重、庄重、优雅
    渐现.gif
  • 模糊→稳重、庄重、优雅
    模糊.gif
  • 漂移→轻快、玩味、动感
    漂移.gif
  • 漂移和缩放→活泼、玩味、动感
    漂移和缩放.gif
  • 移入→活泼、玩味、动感
    移入.gif

翻转、旋转和缩放

  • 弹入→活泼、玩味、动感
    弹入.gif
  • 翻转→活泼、俏皮、轻快、玩味、动感
    翻转.gif
  • 立体翻转→活泼、俏皮、轻快、玩味、动感
    立体翻转.gif
  • 螺旋翻转→活泼、俏皮、轻快、玩味、动感
    螺旋翻转.gif
  • 绕轴心点旋绕→活泼、俏皮、轻快、玩味、动感
    绕轴心点旋转.gif
  • 缩放→活泼、俏皮、轻快、玩味、动感
    缩放.gif
  • 缩放（大）→动感
    缩放（大）.gif
  • 旋转→活泼、俏皮、轻快、玩味、动感
    旋转.gif
    2.退场动画（与进场动画相反，进场动画退场动画可形成一个完整动效闭环）

出现和移动

  • 消失→
  • 飞离→
  • 渐变和缩放→
  • 渐变和移动→
  • 渐隐→
  • 模糊→
  • 移出→

翻转、旋转和缩放

  • 弹出→
  • 翻转→
  • 立体翻转

动效的内容层级