跳到主要内容

使用带有CSS的动画打开菜单

+$It's through animation that we make sense of the world: doors swing open, cars drive to their destinations, lips curl into smiles. Even the things that feel instantaneous, like lightning striking or dropping a phone on your face while using it in bed, happen over time. It's through that motion that we understand how objects relate and function; if they are light or heavy, rigid or loose, connected or separate, sticky or slippery.

然而,在网络上,我们已经习惯了在眨眼之间出现和消失的事物。我们点击一个链接,一切都改变了。就像被蒙上眼睛一样被引入房间,旋转几次,然后移开眼罩以吸收周围环境。你甚至不知道你通过哪个门。这基本上是大多数网站的构建方式。我们可以做得更好。

在了解潜力时CSS动画很容易让我们的想象力进入超级驱动,并将动画洒在几乎所有的东西上。虽然动画可以很棒,但我们需要小心并始终扪心自问:这部动画有意义吗?它是否增加除了美丽之外的任何价值?它是否使我们的产品更容易使用?

有意义的动画

This is the starting point for the tutorial – the sample menu that we’ll reveal with an animation

这是本教程的起点 - 我们将通过动画显示的示例菜单

在本文中,我们将使用一个常见的工作UI设计Element:菜单切换。我们将使用CSS创建菜单(以及一个带有它的图标),并使动画生动。我们将确保动画有意义,但也应用网络性能最佳做法,以确保它们尽可能顺利。

您可以在这里预览最终结果。当用户点击菜单图标时,我们将展开图标的背景板(圆圈)以覆盖屏幕,并显示菜单覆盖图。

我们将动画并将三条垂直线(构成菜单图标)变形为“X”,以表示关闭图标,而不是仅仅闪烁到关闭图标。换句话说,当菜单显示时,图标变为关闭按钮。

你可能会想'那么,这是一个有意义的动画吗?'好吧,好问题。简答:是的!更长的答案:动画非常适合连接屏幕上的元素,并显示它们之间的相互关系。

当我们扩展菜单的背景板成为菜单时,我们会显示两者是如何连接的 - 类似于在iOS或Android上按下时应用程序图标如何扩展并接管屏幕,显示应用程序是从那个图标。我们的菜单图标不仅仅是切换菜单:它是菜单,只是折叠了。

类似地,就像在iOS上按下它时,开/关切换在其打开和关闭状态之间转换的方式,我们的菜单切换将在菜单图标和关闭图标之间切换,具体取决于我们网站的菜单是可见还是隐藏。这有助于强化两个图标以类似方式运行的想法:它们都控制菜单。

因此,虽然我们使网站的使用变得有趣,但我们也更容易理解和改进网站用户体验从未如此轻微。

请参阅上面的视频教程和下面的编写步骤,了解如何执行此操作。

01.开始吧

By drawing the menu icon with CSS (and no images), we can easily animate it later

通过使用CSS绘制菜单图标(并且没有图像),我们可以在以后轻松制作动画

下载项目文件。打开的index.html在浏览器中,你应该看到三个大的白色背景链接。这是我们将要显示的菜单叠加层。

首先,我们需要隐藏它。在Styles.css的,将这些样式添加到。菜单叠加

不透明度:0;能见度:隐藏;

叠加层消失后,左上角会出现一个按钮。让我们在这里绘制菜单图标,这样就可以点击一下来显示叠加层。为了使动画变得容易,我们将仅使用HTML和CSS绘制它;没有位图或向量。我们已经有了一些HTML的index.html用于菜单:一个容器(。菜单),背景(。菜单圈), 一条链接 (。菜单链接)和图标(。菜单图标)每行一个跨度。

有一个单独的DIV背景是一种有点不同寻常的方法。如果我们不打算在这个圈子中添加动画,我们就不需要单独的了DIV;我们可以添加一个边界半径和我们的背景颜色菜单链接

但是,我们希望可以自由使用转变圆圈上的属性,因此我们可以在不影响图标本身的情况下缩放它,因此我们需要将背景与图标分离。

让我们开始绘制构成图标的线条。它们有什么共同之处?它们同样宽,它们有圆角,绝对定位,并且它们具有背景颜色。由于所有线路共享菜单行Class,让我们用它来设置这些共享属性:

.menu-line {background-color:#333;身高:2px;宽度:100%; border-radius:2px;位置:绝对;左:0; }

然后我们可以使用行的唯一类来设置垂直位置:

.menu-line-1 {top:0; } .menu-line-2 {top:0;底部:0;保证金:自动; } .menu-line-3 {bottom:0; }

02.添加悬停效果

To make the menu appear clickable, we inflate the background plate on hover

为了使菜单看起来可以点击,我们在悬停时给背景板充气

让我们通过添加悬停效果使图标清晰可点击。在Styles.css的,为...创建一个新的选择器菜单圈将鼠标悬停在菜单上时将其缩放:

.menu:hover .menu-circle {变换:scale(1.4); }

现在我们可以添加第一个动画了。加“过渡:全部0.2s轻松进出”.menu-circle {}(不是悬停状态)。我们告诉浏览器为所有可能更改的属性设置动画。菜单圈。因此,当我们在悬停时将其放大时,它会在0.2秒的过程中动画到新的状态,并具有定时功能易于进出

你怎么知道选择哪种计时功能?首先,避免使用线性定时功能。现实世界中很少有东西以完全恒定的速度移动,因此具有线性计时功能的物体往往看起来不自然和僵硬(正如爱因斯坦所说,“上帝不会用线性计时功能玩骰子”)。

根据经验,渐出非常适合展示新物品,以及易用性在非常适合删除对象。当有疑问时,易于进出默认为固定计时功能:它具有缓慢的开始和缓慢的结束,创建平滑流畅的动画。

03.显示和隐藏菜单

让我们使用jQuery来显示和隐藏我们新创建的叠加层。在的script.js,切换班级打开。菜单叠加在现有的点击处理程序中:

$( “菜单中的覆盖。 ”)toggleClass(“ 开放”)。

然后在有一个打开的类时显示叠加层:

.menu-overlay.open {opacity:1;能见度:可见; }

04.连接菜单图标

我们之前添加的过渡意味着当我们显示和隐藏叠加层时,我们已经有了一个整洁的淡入淡出效果。但是,我们可以使它看起来像菜单图标背景成为菜单覆盖,并更好地连接两个视觉。

实现这种效果比看起来更容易:我们需要做的就是在点击菜单圈时快速放大。叠加层将同时淡入,从而产生菜单图标正在转换为叠加层的错觉。

单击菜单时,我们需要能够设置菜单的样式。打开的script.js,在我们现有的点击功能中,为我们打开课程。菜单

$( “菜单 ”)toggleClass(“ 开放”)。

现在我们可以使用CSS定位此类,并在打开菜单时展开圆圈。在最底层Style.css文件,扩大。菜单圈什么时候。菜单还有一类。打开

.menu.open .menu-circle {变换:scale(60); }

05.转换图标

The white circle expands to become the menu background, and the icon morphs into an 'X'

白色圆圈扩展为菜单背景,图标变为“X”

我们的菜单有一个漂亮的显示效果,但我们如何将菜单图标变成一个关闭图标?一旦你知道如何,它就会非常容易 - 我们只需要设置三个CSS属性。首先,我们需要在显示菜单时隐藏中间线:

.menu.open .menu-line-2 {不透明度:0; }

然后我们需要做的就是将另外两条线以相反的方向翻转45度(线需要指向不同的方向以形成'X',所以请注意其中一条线的负旋转为45度):

.menu.open .menu-line-1 {transform:rotate(-45deg); } .menu.open .menu-line-3 {transform:rotate(45deg); }

好吧,有点。我们还需要垂直居中这两条线。此时你可能会想'简单!我们只需要改变最佳底部他们的中心位置'。你是对的 - 如果我们没有动画这个图标。

因为我们只能通过限制自己动画来实现硬件加速动画转变不透明度属性,我们将不得不求助于通过变换使线条居中。

.menu.open .menu-line-1 {transform:translateY(7px)translateY(-50%)rotate(-45deg); } .menu.open .menu-line-3 {transform:translateY(-7px)translateY(50%)rotate(45deg); }

这些变换将移动两条线,使它们在图标容器中垂直居中,然后旋转它们以形成十字形。

让我们分解吧。我们有两个同时使用的翻译:平移Y(7px的)平移Y(-50%)。第一个转换,平移Y(7px的),用于将线条的上边缘移动到画布的垂直中心。这里的数学很简单:14是我们图标的高度,除以2得到中间点:7。

第二个转换,平移Y(-50%),用于移动线条,使线条的垂直中心而不是其顶边位于画布的垂直中心点。

通常在使用时在CSS中签名您指的是元素的父级(设置宽度:100%将元素的宽度与其父元素的宽度匹配),但如果将百分比与transform属性一起使用,则引用元素本身,而不是父元素。因此,对于我们找到一条线的高度并将其向上移动一半,我们所需要的只是平移Y(-50%)

06.图标之间的变形

我们不是仅仅用关闭图标替换菜单图标,而是在两种状态之间进行变换。

首先添加转换到。菜单行Style.css文件

过渡:全部0.25s轻松进出;

当当!变形菜单图标。但动画有点沉闷。我们来解决这个问题。为了使线条更加生动,我们可以将它们再旋转90度。图标最终看起来相同,但线条将在同一时间段内进一步传播。将旋转更改为旋转(-135deg)旋转(135deg)

根据经验,您可以使用更适合动画的自定义Bézier曲线来改进动画。我们目前正在使用易于进出- 这意味着动画的开始和结束都会很慢,中间的节奏会更快。

我认为更像春天的效果适合我们的图标。让它快速旋转,在结束时有一个小的反弹效果。对于。菜单行,替换“易于进出”使用自定义Bézier曲线:

过渡:全0.25s立方贝塞尔(0.175,0.885,0.32,1.275);

那些数字是什么?别担心:Bézier曲线很少用手写。你用立方贝塞尔()为了定义动画的速度,而不是自己编写动画,我建议使用参考站点。这来自easings.net。它在动画结束时超调,并产生微妙的反弹效果。

我们在这里的时候,去吧Easings.net并获取代码EaseOutExpo。我们将使用它为菜单背景动画创建更精细的效果。更新过渡。菜单圈使用这个自定义Bézier曲线,并使动画更长一点(0.5秒):

过渡:全0.5s立方贝塞尔(0.19,1,2.22,1);

恭喜,您已经创建了一组有意义的动画:它们可以帮助您了解网站上发生的事情,并创建空间感。最重要的是,动画运行顺利。

通过仅设置变换和不透明度属性的动画,我们可以确保浏览器的硬件加速支持可以启动,并避免不必要的延迟。在玩动画时,请务必勾选这两个方框:让它们变得有意义,美丽。

这篇文章最初出现在网络杂志问题281。在这里订阅网

相关文章:



翻译字数超限