动画效果:“做最精彩的一代”,让你的网页动起来!
时间:2023-07-26 04:24:02 | 来源:网站运营
时间:2023-07-26 04:24:02 来源:网站运营
动画效果:“做最精彩的一代”,让你的网页动起来!:动画效果,前端工程师制作网页时的常用工具,能极大提升用户体验、提高网页美观度。
如何让你的网页动起来?且看本期分解。
本文建议搭配 <郭富城-动起来> 阅读。
实际上,界面动画效果背后涉及到的参数非常简单——只有三种,即时间、变化、曲线。无论多复杂的动效也是这三种参数经过组合拼接出来的。进一步说,在制作动画效果时,我们可以从以下四个方面着手。
1.变化
一个物体的变化大致可以分为四类:位移、旋转、尺寸、自身属性(自身透明度与颜色变化)。以下图为例,点击这个输入框可以实现这样的效果:
这样的效果虽然看起来简单,但是实现起来也很简单!我们可以将其拆解为3步:
Step1,一条红色的横线自左往右出现。
Step2,输入框的背景色变透明。
Step3,将输入框的字体颜色变为前景色。
最后再让这3步同时发生,就实现了这个动画效果。
当然我们也可以添加一些别的变化,比如给横线添加改变颜色,同时在中间添加过渡时间,就能看到它慢慢地从红变成蓝色;再与第一步结合,就实现了一边自左至右出现一边改变颜色的效果。
2. 时长
时长即过渡时间,过渡时间越长,用户看到的动画时间就越长,参数变化就越明显。
如下图中的三个星星:
第一个过渡时间较长,可以清楚看到它的运动轨迹,变大旋转,以及颜色从灰到橙到黄的一个渐变;
而最后一个过渡时间几乎没有,就像是瞬间发生的,直观感觉上并没有动画效果。这与我们平时写的点击事件类似:鼠标移上去时链接会变蓝,按钮会变色。有时这会对用户体验造成不好的影响,毕竟瞬间发生有可能会让大家吓一跳,而过渡则能给人一个缓冲时间来适应变化。以下图为例:
显然右边的动画效果更易让人接受。(但加班本身就难以让人接受。)
3.曲线
曲线描述的是物体运动时的速度变化。以五个最基本的运动曲线为例;最基础的速度曲线有线性、缓入、缓出、缓入缓出和弹跳五种。
在动效设计中,合理地运用曲线可以产生不一样的效果,例如弹跳可以实现弹簧抖动的效果等等。
4.时间轴
时间轴是复杂动效中最为重要的,它的作用是让动画效果按照一定的时间顺序发生从而产生流畅感。为了更好地为大家介绍时间轴,我们不妨以下图中的网站为例,试着模仿它的动效。
将上述效果进行拆解——先图片左移,紧接着第一段文字、第二段文字、第三段文字依次消失。
对此进行模仿就可以得到下图的动画效果。
总结
最后,我们来欣赏几个优秀的网站:
1.随鼠标的移动变化图标大小:
2.利用时间轴实现矩形黑框的特殊出现:
3.可收缩导航页的实现:
4.图片在浮现过程中大小与内容尺寸同时变化:
以上就是本期推送的主要内容,感谢您的浏览!下期再见!
(图片来源于网络,如有侵权,请联系删除。)
熙派官网:
熙派公众号:SIMPLEBY熙派
(图片来源于网络,如有侵权,请联系删除。)