当前位置: 首页 > 线上学习 > 技术文章 > 网页动画设计有哪些原则

网页动画设计有哪些原则

来源:汇众教育 编辑:小汇 2018-12-16 1128

摘要:网页动画设计需要呈现出好的效果,因此在设计的时候就需要按照一定的要求进行

  网页动画设计需要呈现出好的效果,因此在设计的时候就需要按照一定的要求进行,下面就和大家介绍一下网页动画设计需要遵守的几点原则。



  1. 挤压和拉伸


  挤压和拉伸是物体存在质量且运动时质量保持不变的设计。当一个球在弹跳时碰击到地面会变扁,而它恢复的时间也会越来越短。创建对象时最有用的方法是参照实物进行设计,比如人、时钟和弹性球等。


  当它和网页元件一起工作时可能会忽略这个原则。DOM 对象不一定和实物相关,它会按需要在屏幕上进行缩放。尽管如此挤压和伸缩的效果还是可以为一个对象增加实物的感觉,甚至一些形状上的小变化也可以创造出细微且抢眼的效果。


  2. 连续运动和姿态对应


  连续运动就是绘制动画过程的每一帧,而姿态对应通常由一个 assistant 在定义一系列关键帧后进行填充的间隔。大多数网页动画设计用的是姿态对应,关键帧之间的过渡可以通过浏览器,在每个关键帧之间的插入尽可能多的帧使动画更加的流畅。


  不过这里有一个例外就是定时功能 。通过这个功能浏览器 「steps」 可以把尽可能多的无序帧串清晰。你可以用这种方式绘制一系列图片,并且让浏览器按照顺序将其显示出来,这也开创了一种逐帧动画的风格。


  3. 弧线运动


  网页动画设计采用弧线运动会使对象更加的逼真,当它们遵循缓入缓出的时候,它们很少会沿直线运动而是更倾向于沿弧线运动。


  我们有几种 CSS 的方式来实现弧线运动。一种是结合多个动画:比如在弹力球动画里,可以让球上下移动的同时也让它右移或左移,这时候球的显示效果就是沿弧线进行运动的。


  另外一种就是旋转元件:我们可以设置一个在对象之外的原点作为它的旋转中心,当我们旋转这个对象的时候,它看上去就是沿着弧线运动的。


  以上就是网页动画设计时需要遵循的几点原则。

相关文章

关注我们

  • 官方微信

    咨询热线

    010-82826482 校区地址
  • 官方微博

    建议与投诉

    400-0065-789 联系我们
  • 线上直播平台