JavaScript动画和CSS动画该如何选择

　　介绍

这篇文章主要介绍了JavaScript动画和CSS动画该如何选择,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

概述

你肯定知道,动画在创建引人注目的网络应用程序中扮演着重要的角色。随着用户越来越多地将注意力转移到用户体验上,商户开始意识到完,美愉快的用户体验的重要性,结果网络应用程序变得越来越重,并具有更动态交互的UI。这一切都需要更复杂的动画,以便用户在整个过程中更平稳地进行状态转换。今天,这甚至不被认为是什么特别的事情。用户正变得越来越挑剔,默认情况下,他们期望的是具有高响应性和交互性的用户界面。

然而,界面的动画化并不一定是简单的。什么是动画,什么时候该用动画,动画应该有什么样的视频效果,这些都是棘手的问题。

JavaScript和CSS动画比较

创建网络动画的两种主要方法是使用JavaScript和CSS。选择哪种没有对或错,这完全取决于你想要达到的效果。

CSS动画

用CSS制作动画是让元素在屏幕上移动的最简单方法。

这里将从如何让元素在X和Y轴上移动50 px简单示例开始,通过持续1秒的CSS过渡来移动元素。

。盒子{ 　　-webkit-transform:翻译(0,0); 　　-webkit-transition: -webkit-transform 1000 ms; 　　 　　变换:翻译(0,0); 　　过渡:变换1000 ms; 　　} 　　 　　.box。{移动 　　-webkit-transform:翻译(50 px, 50 px); 　　变换:翻译(50 px, 50 px); 　　}

当元素加上<代码> 类移动时,改变<代码>变换>

除了转换持续时间外,还有<代码>宽松属性,这实际上就是动画的运动速度方式,该参数会在之后详细介绍。

如果像上面的代码片段一样,创建单独的CSS类来实现动画,当然也可以使用JavaScript来切换每个动画。

如下元素:

p类=癰ox"比; 　　样本内容。 　　& lt;/p>

然后,使用JavaScript来切换每个动画。

var boxElements=document.getElementsByClassName(& # 39;盒# 39;), 　　boxElementsLength=boxElements.length, 　　我; 　　 　　(我=0;我& lt;boxElementsLength;我+ +){ 　　boxElements[我].classList.add(& # 39;行动# 39;); 　　}

上面的代码片段是为所有包含盒子<代码> 类的元素为其添加<代码> 移动类以触发动画。

这样做可以为你的应用提供良好的平衡。你可以专注于使用JavaScript管理状态,只需在目标元素上设置适当的类,让浏览器处理动画。如果沿着这条路线前进,你可以在元素上监听<代码> transitionend 事件,但前提是放弃旧版ie的支持:

JavaScript动画和CSS动画该如何选择

监听<代码> transitionend 触发的事件如下所示:

var boxElement=document.querySelector (& # 39; .box& # 39;); 　　boxElement.addEventListener (& # 39; transitionend& # 39;,>。盒子{/*动画的名字*/animation-name: movingBox;/*动画的持续时间*/动画:2300毫秒;/*动画的运行次数*/animation-iteration-count:无限;/*设置对象动画在循环中是否反向运动的方法*/动画方向:备用; 　　} 　　 　　@keyframes movingBox { 　　0% { 　　变换:翻译(0,0); 　　透明度:0.4; 　　} 　　 　　25% { 　　透明度:0.9; 　　} 　　 　　50% { 　　变换:翻译(150 px, 200 px); 　　透明度:0.2; 　　} 　　 　　100% { 　　变换:翻译(40 px, 30 px); 　　透明度:0.8; 　　} 　　}

效果示例:https://sessionstack.github.i..。

使用CSS动画,你可以独立于目标元素定义动画本身,并使用animation-name属性来选择所需的动画。

CSS动画在某种程度仍然需要加浏览器前缀的,在Safari, Safari移动和Android中都使用了webkit。Chrome, Opera, Internet Explorer和Firefox都不需要添加前缀。许多工具可以帮助你创建所需的CSS的前缀,这样就不需要在源文件中带样式前缀。

JavaScript动画

和CSS过渡或者CSS动画相比,使用JavaScript创建动画更加复杂,但它通常为开发人员提供了更强大的功能。

JavaScript动画是作为代码的一部分内联编写的。你还可以将它们封装在其他对象中。以下为用JavaScript来实现最开始的CSS过渡的代码:

var boxElement=document.querySelector (& # 39; .box& # 39;); 　　var动画=boxElement.animate ([ 　　{变换:& # 39;翻译(0)& # 39;}, 　　{变换:& # 39;翻译(150 px, 200 px) & # 39;} 　　]) 　　 　　animation.addEventListener(& # 39;完成# 39;,函数(){ 　　boxElement.style。变换=& # 39;翻译(150 px, 200 px) & # 39;; 　　})

JavaScript动画和CSS动画该如何选择