如何使用Motion UI创建自定义动画

Create custom animations with Motion UI

Motion UI是一个用于创建自定义CSS过渡和动画的Sass库

运动UI是来自ZURB的人们的Sass库,用于创建自定义CSS过渡和动画。该库的一个重点是使用转换来显示状态的变化 - 例如,在点击时滑入和滑出侧边栏。在本教程中,我将向您展示如何将Motion UI与最近发布的Foundation for Sites 6一起使用来为您的设计元素设置动画。

建立

Create custom animations with Motion UI

新的Foundation CLI负责为您设置新项目,并且它以风格进行

Foundation的初学者项目需要在您的机器上安装Node.js和Git。您还需要下载Foundation CLI - 一个在所有三个Foundation框架中设置空白项目的工具。

运行以下命令:npm install foundation-cli --global

获得CLI后,可以使用foundation new命令设置新项目。我们将使用一个更具体的命令来获取我们想要的项目 - 在本例中是一个名为motion-ui的文件夹中的基础Foundation for Sites项目:

基础新-f sites -t basic -d motion-ui

当CLI完成项目安装后,在命令行中打开文件夹并运行npm start以启动Sass编译器。

接下来,在浏览器中打开index.html。现在我们可以开始了。

使用Toggler制作动画

Foundation 6包括Toggler,一个用于快速原型化有状态插件的新JavaScript插件。首先,我们将使用Toggler和Motion UI在点击时为元素设置动画。

让我们将动画添加到标题区域下方的大面板中。我们将添加data-toggler和data-animate属性。我们还将在面板中使用唯一ID,以便我们稍后进行定位。

我们给callout一个callout的ID,属性data-animate包括两个Motion UI的内置过渡类。当元素进出动画时,Toggler将利用它们。

接下来,我们需要包含一个单击触发器。让我们在标注上方添加一个按钮,使用属性data-toggle。 Data-toggle的值与我们要打开和关闭的标注的ID相同。

刷新浏览器并单击按钮。第一次单击时,面板将淡出。再次单击它将淡入,依此类推。

Motion UI包含二十多个内置过渡类。尝试用铰链效果替换淡入淡出效果:

内置组件

Create custom animations with Motion UI

自第2版以来,模态一直是基金会的主要内容,但是对于版本6,它们可以通过自定义动画加强

Foundation的一些内置插件(如Reveal和Orbit)也支持Motion UI。在下一个示例中,我们将向页面添加一个模态并为其提供自定义动画。

首先,让我们添加模态和触发器以使其打开。打开index.html页面,并在任何地方添加此代码:

单击我以获取模态

我们的模态有效,但它只是在打开和关闭时闪烁。让我们用幻灯片效果来增添趣味。您需要为模态添加两个属性:data-animation-in和data-animation-out。我们这次使用比例动画:

与Toggler一样,您可以使用任何Motion UI类,并且模式将设置动画。

写自定义效果

Motion UI包含许多内置效果,但库中的真正功能来自于使用转换混合编写自己的效果。让我们换掉两个自定义铰链效果的比例效果。

打开app.scss并添加此CSS规则:

.hinge-in {@include mui-hinge($ state:in,$ from:top,$ fade:true,$ timing:map-get($ motion-ui-easings,bounceInOut)); }

让我们分解一下我们在这里使用的参数:

  • $ State是(对于元素出现时播放的转换)或者是(对于正在消失的元素)
  • $ From是铰链的原点:顶部,右侧,底部或左侧
  • $ Fade为true或false,并允许您通过转换播放淡入淡出效果
  • $ Timing改变了效果的时间。有一些自定义计时功能,包括我们在这里使用的弹跳效果

我们已经添加了效果,但我们还需要添加效果。在下面添加此代码.hinge-in:

.hinge-out {@include mui-hinge($ state:out,$ from:top,$ fade:true,$ timing:map-get($ motion-ui-easings,bounceInOut)); }

最后,让我们用自定义铰链替换模态的默认铰链。

Motion UI有五种过渡效果:幻灯片,铰链,缩放,旋转和淡入淡出。这些可以向前或向后播放,用于进出转换。所有这些效果都有内置的CSS类,但正如您所见,使用自定义CSS类也可以编写其中任何一个的自定义版本。

使用动画

Create custom animations with Motion UI

Motion UI的效果旨在在智能手机和平板电脑上运行良好

Motion UI支持CSS动画和过渡。动画mixins创建一组CSS关键帧,可以将其放在任何元素上。添加课程后立即播放效果。

让我们从构建效果并将其应用于现有内容开始。在index.html中,在顶部的“欢迎使用基础”文本中添加一个类。

欢迎来到基金会

接下来,在app.scss中,我们将创建一个基本的淡入淡出效果。

.welcome {@include mui-animation(fade);动画持续时间:1s; }

刷新页面,您会看到文本立即淡入。但我们可以做更多!还记得前面五个转换的列表吗?在任何动画中都可以使用相同的五种过渡效果,您也可以将它们中的任意数量组合成一种效果。

让我们用幻灯片来增加淡入淡出:

.welcome {@include mui-animation(fade,slide);动画持续时间:1s; }

您可能已经注意到我们尚未配置任何这些效果。让我们将幻灯片更改为slide()并传入参数以更改效果。

.welcome {@include mui-animation(fade,slide($ direction:up));动画持续时间:1s; }

现在,文本将从底部而不是从右侧滑入,这是默认设置。

让我们为了我们的例子添加一个效果。 ZURB并不支持在UI设计中无偿使用动画。

.welcome {@include mui-animation(fade,spin,slide($ direction:up));动画持续时间:1s; }

你创造了一个怪物!您可以将其设置为仅在单击时触发,而不是自动播放效果。只需从HTML中删除该类,然后使用JavaScript添加它以响应单击或其他一些浏览器事件。

这是Motion UI中的动画!但是图书馆还有一个动画片。

动画元素串联

在上一节中,我们展示了如何使用自定义效果为单个元素设置动画。 Motion UI还支持系列动画,允许您设置多个元素以按顺序进行动画处理。对于每个元素,您可以定义效果的长度,并可选择在下一个元素播放之前的延迟。

首先,我们需要一些元素来制作动画。那个大标注中的五个链接部分怎么样?我们可以在页面加载时使它们串联出现。打开index.html并找到这五个部分 - 它们都是.large-4 medium-4列。将类.column-1添加到第一个,.column-2添加到第二个,依此类推。代码如下所示:

我们现在有五个类(.column-1到.column-5),我们可以将效果应用到。 Motion UI会为我们计时效果,因此它们会一个接一个地播放。

打开app.scss。要设置我们的动画队列,我们从mui-series()mixin开始。请注意,这个mixin不会进入CSS选择器;它只是文档的根源。

@include Mui-series {}

在mui-series()里面,我们将为我们的五个列类添加CSS选择器。在每个类中,我们使用mui-queue()mixin将新项添加到队列中。队列以与CSS相同的顺序移动,因此我们将从.column-1开始。

@include mui-series {.column-1 {@include mui-queue(0.5s,0s,fade); }}

Mui-queue()中的第一个数字是效果的长度,而第二个数字是此效果与下一个效果之间的差距。在这个例子中,间隙是0,这意味着下一个效果将立即播放,一旦前一个效果完成。

最后一个参数fade是我们想要使用的效果。但是,与mui-animation()一样,我们不仅限于一种效果。我们可以添加更多效果作为附加参数,并将它们配置为与mui-animation()完全相同。

@include mui-series {.column-1 {@include mui-queue(0.5s,0s,fade,slide); }}

现在让我们添加其他四个类。为了方便起见,我们将给予它们所有相同的效果 - 只需剪切和粘贴。

@include mui-series {.column-1 {@include mui-queue(0.5s,0s,fade,slide); } .column-2 {@include mui-queue(0.5s,0s,fade,slide); } .column-3 {@include mui-queue(0.5s,0s,fade,slide); } .column-4 {@include mui-queue(0.5s,0s,fade,slide); } .column-5 {@include mui-queue(0.5s,0s,fade,slide); }}

切换回浏览器,刷新页面,......没有任何反应。这是因为必须使用类手动触发Motion UI。该类称为.is-animating,它用于所有系列动画。

为了简单起见,我们将.is-animating类添加到HTML中,因此效果会在页面加载时自动播放。为了使事情变得更简单,我们将把类添加到正文中。

现在,当您刷新页面时,您的花式动画队列将会播放。您将看到所有标注部分一次滑入一个。

尝试通过改变每个效果的持续时间和间隙来改变系列的时间!您甚至可以设置负间隙,这将导致两个效果重叠。

运动UI的未来

Create custom animations with Motion UI

Motion UI是Foundation for Sites和Foundation for Apps框架共享的第一个库

Motion UI最初与Foundation for Apps捆绑在一起,这是一个用于创建响应式,Angular支持的Web应用程序的框架,该框架于2014年12月推出。今年早些时候,ZURB团队推出了Foundation for Apps运动模型,并通过新效果加强了它和动画排队系统,并将其作为独立的动态UI库发布。

所有空白的Foundation 6项目都已安装Motion UI,并且许多框架的JavaScript插件与Motion UI无缝协作,正如您在本教程中看到的那样。很快,新的Motion UI将被集成到Foundation for Apps中,取代框架的现有运动模块。在未来,Motion UI还将通过新效果和更强大的组合效果的方式进行扩展。

本文最初发表于276期网络杂志

相关文章:



翻译字数超限