使用Animista掌握按需CSS动画

An illustrated astronaut floats in space, representing the new frontier of CSS animation

进入网络动画? Expert Val Head将在网页设计会议上发言生成纽约在四月份。立即获取您的机票

运动在我们的生活中起着非常重要的作用。我们的眼睛和注意力会自动将焦点移向移动物体;静态内容不能有效地做到这一点。

从来没有一个更激动人心的时刻CSS动画。它已成为创建漂亮和引人入胜的界面的宝贵工具。但正确制作动作并不是一项小任务,因此获得一些帮助可以有很长的路要走。这是哪里Animista进来。

Animista既是预制CSS动画的集合,也是一个可以调整和测试它们的游乐场。这大大加快了迭代不同动画创意的过程,这是将Animista融入您的工作流程的好处之一。

了解UI

Animista游乐场UI分为三个主要部分。动画按逻辑类别,组和变体组织,所有这些都位于屏幕顶部。

例如,如果您正在为演示文稿寻找合适的动画,则您很可能希望浏览“入口和退出”类别。然后说你选择滑入,你会发现其他变化,如左下滑动,右下滑等等。

单击类别,组或变体将立即在主舞台上播放动画。每个类别,组和变体都分配了自己的URL,这使得书签或共享非常容易。

The Animista user interface is split into three main sections: 1: the menu bar, 2: the options panel and 3: the main stage

Animista用户界面分为三个主要部分:1:菜单栏,2:选项面板和3:主阶段

主要阶段是所有动画发生的地方。右上角有三个按钮。第一个是重播动画按钮(圆形箭头图标),然后是添加到收藏夹(心形图标)和生成代码(花括号图标)按钮。

您可以在“选项”面板中调整动画的各个方面。第一个是选择对象下拉菜单,使您可以将动画对象与预定义对象列表中的另一个交换。接下来是一组与标准CSS动画属性相对应的选项。了解每个动画如何影响动画的最佳方法是进行实验。

注入你的代码

熟悉UI后,您就可以开始将其集成到工作流程中。说到工作流程,当谈到Animista时,您可以根据自己的喜好和要求在两者之间进行选择。

一次一个

当您看到自己喜欢的动画时,只需单击“生成代码”按钮即可。然后,您将看到动画代码面板。

在面板的顶部有两个复选框。第一个允许您缩小代码,节省过程中的一些空间。第二个是通过在代码中添加浏览器供应商前缀来提高与某些旧版浏览器的兼容性。

The animation code panel reveals the code for the currently active animation

动画代码面板显示当前活动动画的代码

紧接在下面,您将找到以当前活动动画命名的动画助手类的CSS代码。它是一个包含应用了动画选项的动画代码的单行。单击“复制类”按钮会将帮助程序类代码复制到计算机剪贴板,这样您就可以将其简单地粘贴到编辑器中。

最后也是最重要的一点是动画关键帧代码块。它是描述动画的整个序列的地方,也是您在项目中使用动画所需的内容。单击“复制关键帧”按钮后,代码就可以粘贴到CSS中了。

批量动画

与之前的方法相比,当您看到自己喜欢的动画时,可以通过单击“添加到收藏夹”按钮将其添加到收藏夹中。

心脏图标将出现在动画变体列表中的活动动画旁边,将其标记为收藏夹。根据需要多次重复此操作,直到您对选择感到满意为止。

菜单栏右侧的下载按钮将带您进入下载页面,您可以在其中找到包含所有喜爱动画的列表。在这里,您将有机会再次审核您的选择。您还可以通过单击动画名称旁边的“x”按钮进行任何最后更改。

最后一部分包含您为整个动画选择生成的代码。单击“复制代码”按钮后,绿色通知将通知您操作成功,并且代码已准备好粘贴到您选择的编辑器中。如果您要创建新文件,请确保使用正确的扩展名保存它,在本例中为.css。

获取动画效果

有无数种方法可以使用CSS动画并丰富您的Web项目。 Animista使这个过程更有趣,更容易。新动画即将推出 - 与此同时,快乐动画。

本文最初出现在net Magazine Issue 303.购买它
这里

想要了解哪种动画工具最好的建议?

Val Head is giving her talk Choose Your Animation Adventure at Generate New York from 25-27 April 2018

如果你正在进行网络动画,请确保你已经拿到了你的票生成纽约。网络动画专家,Adobe的创作者和设计传播者,Val Head将发表演讲 - 选择你的动画冒险 - 她将打破一长串的选择,让事情在屏幕上移动。

她还将向您展示哪些工具最适合于状态转换,显示数据,制作动画插图以及使动画具有响应性。

Generate New York将于2018年4月25日至27日举行。立即获取您的机票

相关文章:



翻译字数超限