动画效果：“做最精彩的一代”，让你的网页动起来！
时间：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熙派
(图片来源于网络，如有侵权，请联系删除。)
在线咨询
