搜索
首页web前端js教程ANIJS:CSS动画的声明性处理库

AniJS: A Declarative Handling Library for CSS Animations

ANIJS:CSS动画的声明性处理库

在学习编程的学生中,动画一直是学生的最爱。在我参加的最近的周末网络开发研讨会上,讨论了使用CSS的动画。那是当我偶然发现Anijs的时候,Anijs是CSS动画的声明性处理库。

在本教程中,我们将看到Anijs的全部内容以及如何使用它来创建一些很酷的动画效果。>

钥匙要点

anijs是CSS动画的声明性处理库,允许使用直接写在HTML中的简单声明的命令创建动画,简化了动画的管理。

>库在html5数据属性中使用一个自定义属性,称为data-anijs来创建动画的声明语句。例如,代码`

`表示如果输入字段焦点,它将对锚标记元素进行“ Wobble”动画。> Anijs可用于使用动画增强Web应用程序。本教程使用了简单的用户注册和登录应用程序的示例,演示了如何创建登录屏幕,验证登录过程以及使用Anijs使用动画创建寄存器屏幕。
    >库还提供了使用“之前”关键字在动画之前和之后调用功能的功能。这可以用于控制动画的流程,例如在运行动画之前验证表单条目,或者在运行动画之前显示和隐藏不同的屏幕。
  • Anijs 简介 使用anijs,我们可以使用html中的声明命令编写动画。它提供了一种使用表达逻辑的声明来管理动画的简便方法。以下是Anijs声明语法的一个示例:
  • 在上面的代码中,声明语法说:
  • 如果专注于焦点,请对锚标记元素进行摇摆。
  • >
入门

在本教程的过程中,我们将使用Anijs创建一个动画来创建一个应用程序。该应用将是一个简单的用户注册和登录应用程序,它将使用ANIJS包括一些动画。本教程的主要重点是我们如何使用Anijs在Web应用中工作。

开始,下载anijs并将其包含在您的页面中,或引用CDN版本。

<span><span><span><input> id<span>="txtName"</span> type<span>="text"</span> data-anijs<span>="if: focus, do: wobble, to: a"</span>></span></span></span>
用于样式,我们将使用andate.css libray by dan Eden。

创建登录屏幕

首先,我们将创建一个屏幕供用户登录。这是html:

到目前为止,我们拥有的只是一个静态登录页面。有了一些CSS,看起来像这样:

>请参阅codepen上的sitepoint(@sitepoint)的pen anijs教程,

上的静态登录屏幕(@sitepoint)

我们已经创建了屏幕,现在我们需要验证登录过程。为了附加动画效果,我们使用特定元素上的数据anijs属性。我们使用称为data-anijs的自定义属性使用HTML5数据属性编写声明语句。让我们将此属性添加到签名按钮中,如下所示:

>
<span><span><span><input> id<span>="txtName"</span> type<span>="text"</span> data-anijs<span>="if: focus, do: wobble, to: a"</span>></span></span></span>
在上面的代码中,声明句子说:

单击“登录”按钮时,使用类别.login_screen对元素进行铰链动画。因此,当我们单击按钮时,铰链动画会生效,正如您通过单击下面的演示中的签名按钮所看到的:

请参阅pen anijs演示,在codepen上通过sitepoint(@sitepoint)登录失败。

在上述演示中,当按钮被单击时,无论有效还是无效的登录,动画都可以使用。这并不是我们想要的,所以让我们修改现有代码以仅在无效的登录中进行动画。

为了检查登录是否有效,我们需要在动画之前调用validation函数。为此,我们将使用之前的关键字。在ANIJS文档中可以找到与调用动画之前和之后的函数有关的详细文档。我们将通过事件对象传递到触发动画以及动画context。首先,我们将定义Anijs助手,然后声明动画函数。这是函数的外观:

>我们还将修改signin按钮的数据属性以包括之前的动画函数,如下所示:

<span><span><span><script> src<span >="http://cdn.jsdelivr.net/anijs/0.4.0/anijs-min.js"</script></span>></span><span><span></span>></span></span>

>现在,只有在电子邮件或密码字段为空的情况下,动画才会发生。使用AnimationContext.run()命令在上方的JavaScript代码块中运行动画。如果输入了电子邮件和密码,则将显示“处理……”消息。

>
<span><span><span><link> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"</span>></span></span></span>
这是我们到目前为止所拥有的演示:

>

>请参阅pen anijs演示,通过codepen上的sitepoint(@sitepoint)验证签名按钮。

创建寄存器屏幕

接下来,我们将为我们的应用创建一个寄存器(或注册)页面。如您所见,我们在登录页面上已经有一个寄存器链接。我们要做的就是将一些动画和事件附加到寄存器链接。首先,将寄存器页面的以下HTML添加到我们现有的HTML: 注意带有显示的内联CSS:.REG_SCREEN元素上的无,这使该屏幕默认隐藏了。要将登录屏幕中的寄存器链接连接到此新屏幕,我们将data-anijs属性添加到链接:

>:

<span><span><span><input> id<span>="txtName"</span> type<span>="text"</span> data-anijs<span>="if: focus, do: wobble, to: a"</span>></span></span></span>

>上面的代码单击注册链接时,在具有reg_screen类别的元素上进行滚动动画(这是我们的寄存器屏幕)。但这是行不通的,因为寄存器屏幕被隐藏了。

我们需要做的是在动画发生之前调用功能。在该功能中,我们在可见寄存器屏幕时隐藏登录屏幕。然后我们运行动画。这是javaScript:

然后,我们将修改寄存器链接的data-anijs属性:>
<span><span><span><script> src<span >="http://cdn.jsdelivr.net/anijs/0.4.0/anijs-min.js"</script></span>></span><span><span></span>></span></span>

这是一个带有我们新添加的代码的演示:

<span><span><span><link> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"</span>></span></span></span>
>请参阅codepen上的sitepoint(@sitepoint)的笔zdjlc。

>现在可以使寄存器屏幕可见,我们还需要将寄存器屏幕中的登录链接连接到原始登录屏幕,类似于我们刚刚为寄存器屏幕所做的操作。这是函数:

>这是登录链接的修改数据-Anijs属性:>

>这是一个带有新代码的演示:
<span><span><span><div> class<span>="container"</span>>

    <span><span><span><div> id<span>="divLogin"</span> class<span>="login_screen"</span>>
      <span><span><span><h2 id="id-span-spnLogin-span-gt"> id<span>="spnLogin"</span>></h2></span>Sign In<span><span></span>></span>
</span>      <span><span><span><input> id<span>="txtLoginId"</span> type<span>="text"</span> placeholder<span>="Email Id"</span> /></span>
</span>      <span><span><span><input> id<span>="txtLoginPass"</span> type<span>="password"</span> placeholder<span>="Password"</span> /></span>
</span>      <span><span><span><a> href<span>="#"</span> class<span>="btn"</span>></a></span>
</span>        SignIn
      <span><span><span></span>></span>
</span>      <span><span><span><a> href<span>="#"</span> class<span>="signup-link"</span>></a></span>Register?<span><span></span>></span>
</span>    <span><span><span></span></span></span></span></span></span></span></span>
</div></span>></span><!-- .login-screen -->
</span>
<span><span><span></span></span></span>
</div></span>></span><!-- .container --></span>
>

>

>编辑器注:下面的演示似乎无法在这些嵌入中正确起作用100%,尤其是当您尝试在“登录”和“寄存器”之间多次切换时。尝试Codepen框架中的“编辑”链接以查看完整的演示,在此工作正常。
<span><span><span><a> href<span>="#"</span> 
</a></span></span><span>   <span>class<span>="btn"</span> 
</span></span><span>   <span>data-anijs<span>="if: click, do: hinge animated, to: .login_screen"</span>></span>
</span>  SignIn
<span><span><span></span>></span></span></span>
>请参阅pen anijs演示,在codepen上按SitePoint(@sitepoint)显示登录和显示登记册。

与我们在登录屏幕中所做的类似,我们将使用一个函数验证寄存器表单:

通常,我们通常会在变量中缓存许多这些对象,而不是重复对它们的引用。我们只是为这个简单的示例而这样做。>

>最后,让我们修改html中的data-anijs属性以包括动画和函数调用。

>

这是我们的最终演示:

<span>var animationHelper = AniJS.getHelper(),
</span>    spnLogin <span>= document.getElementById('spnLogin');
</span>
animationHelper<span>.validateLogin = function (e<span>, animationContext</span>) {
</span>    <span>var email = document.getElementById('txtLoginId').value;
</span>    <span>var pass = document.getElementById('txtLoginPass').value;
</span>    <span>if (email && pass) {
</span>      spnLogin<span>.innerHTML = 'Processing...';
</span>    <span>} else {
</span>      spnLogin<span>.innerHTML = 'Fill Required fields.';
</span>      animationContext<span>.run();
</span>    <span>}
</span><span>}</span>
请参阅codepen上的sitepoint(@sitepoint)的pen anijs演示。

结论

在本教程中,我们讨论的只是一个偷偷摸摸地进入这个很棒的图书馆。有关其使用情况的深入信息可在Anijs文档中获得。
<span><span><span><a> href<span>="#"</span>
</a></span></span><span>   <span>class<span>="btn"</span>
</span></span><span>   <span>data-anijs<span>="if: click, do: hinge animated, to: .login_screen, before: validateLogin"</span>></span>
</span>  SignIn
<span><span><span></span>></span></span></span>
经常询问的问题(常见问题解答)

什么是Anijs,它如何工作? anijs是CSS动画的声明性处理库。它允许开发人员使用简单而直观的语法创建动画,而无需编写复杂的JavaScript代码。 ANIJS通过在您的HTML元素中解析数据anijs属性并执行相应的动画来工作。这使得管理和控制动画变得更容易,因为您可以直接在html中定义它们。

>

>如何安装anijs?

安装Anijs很简单。您可以直接从GitHub存储库下载它,也可以使用NPM或Bower等软件包管理器。下载后,您只需要在HTML文件中包含ANIJS脚本即可。然后,您可以通过将data-anijs属性添加到您的html元素来开始使用anijs。

>

>我可以与其他JavaScript库一起使用anijs?库。它不会干扰其他库的功能,您可以与诸如jQuery,react或Angular之类的库一起使用。这使Anijs成为在各种Web开发环境中创建动画的多功能工具。

如何使用anijs创建动画?

>使用anijs创建动画涉及添加data-anijs属性HTML元素并定义动画参数。 Data-Anijs属性使用的简单语法指定事件,动画元素,应用动画和回调函数。您还可以使用ANIJS助手函数来控制动画流。

>我可以使用Anijs创建哪些类型的动画?

anijs anijs支持广泛的CSS动画。您可以创建简单的动画,例如淡出和幻灯片,以及涉及转换和过渡的更复杂的动画。 ANIJS还支持动画链,使您可以创建以特定顺序执行的动画序列。

我可以使用anijs进行响应式设计吗?

是的,可以将anijs用于响应式设计。使用ANIJS创建的动画基于CSS,这意味着它们可以缩放并适应不同的屏幕尺寸和分辨率。这使ANIJS成为创建在台式机和移动设备上都可以正常工作的动画的有用工具。

如何控制Anijs中动画的时间?

anijs anijs提供了几种控制时间的方法动画。您可以在data-anijs属性中指定动画的持续时间,并且可以使用延迟功能在一定时间内暂停动画。您还可以使用ANIJS助手函数来控制动画流和时机。

我可以使用anijs动画svg元素吗?

是的,可以使用anijs来动画SVG元素。您可以像常规的HTML元素一样,将相同的动画参数和控制方法应用于SVG元素。这使您可以创建涉及SVG图形和形状的复杂动画。

>

>如何调试Anijs中的动画?在anijs中调试动画涉及检查数据anijs属性和CSS的语法动画属性。如果动画无法正常工作,则可以使用浏览器的开发人员工具来检查HTML元素并检查应用的CSS属性。您还可以检查JavaScript控制台是否与Anijs相关的任何错误消息。

>

我可以为Anijs的发展做出贡献吗?您可以通过报告错误,建议新功能,改进文档或提交代码改进的拉请请求来做出贡献。您可以找到有关如何在Anijs GitHub页面上做出贡献的更多信息。

>

以上是ANIJS:CSS动画的声明性处理库的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
node.js流带打字稿node.js流带打字稿Apr 30, 2025 am 08:22 AM

Node.js擅长于高效I/O,这在很大程度上要归功于流。 流媒体汇总处理数据,避免内存过载 - 大型文件,网络任务和实时应用程序的理想。将流与打字稿的类型安全结合起来创建POWE

Python vs. JavaScript:性能和效率注意事项Python vs. JavaScript:性能和效率注意事项Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差异主要体现在:1)Python作为解释型语言,运行速度较慢,但开发效率高,适合快速原型开发;2)JavaScript在浏览器中受限于单线程,但在Node.js中可利用多线程和异步I/O提升性能,两者在实际项目中各有优势。

JavaScript的起源:探索其实施语言JavaScript的起源:探索其实施语言Apr 29, 2025 am 12:51 AM

JavaScript起源于1995年,由布兰登·艾克创造,实现语言为C语言。1.C语言为JavaScript提供了高性能和系统级编程能力。2.JavaScript的内存管理和性能优化依赖于C语言。3.C语言的跨平台特性帮助JavaScript在不同操作系统上高效运行。

幕后:什么语言能力JavaScript?幕后:什么语言能力JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript在浏览器和Node.js环境中运行,依赖JavaScript引擎解析和执行代码。1)解析阶段生成抽象语法树(AST);2)编译阶段将AST转换为字节码或机器码;3)执行阶段执行编译后的代码。

Python和JavaScript的未来:趋势和预测Python和JavaScript的未来:趋势和预测Apr 27, 2025 am 12:21 AM

Python和JavaScript的未来趋势包括:1.Python将巩固在科学计算和AI领域的地位,2.JavaScript将推动Web技术发展,3.跨平台开发将成为热门,4.性能优化将是重点。两者都将继续在各自领域扩展应用场景,并在性能上有更多突破。

Python vs. JavaScript:开发环境和工具Python vs. JavaScript:开发环境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda,适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack,适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

JavaScript是用C编写的吗?检查证据JavaScript是用C编写的吗?检查证据Apr 25, 2025 am 12:15 AM

是的,JavaScript的引擎核心是用C语言编写的。1)C语言提供了高效性能和底层控制,适合JavaScript引擎的开发。2)以V8引擎为例,其核心用C 编写,结合了C的效率和面向对象特性。3)JavaScript引擎的工作原理包括解析、编译和执行,C语言在这些过程中发挥关键作用。

JavaScript的角色:使网络交互和动态JavaScript的角色:使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心,因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容,2)通过DOMAPI操作网页,3)支持复杂的交互效果如动画和拖放,4)优化性能和最佳实践提高用户体验。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境