Web动画

特别声明:为感谢社区广大朋友对小站的支持,自2019年10月1日至2019年11月11日开通年费VIP通道,年费价格为 ¥299.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

动画是使 Web 应用和网站吸引人的重要因素。 用户希望有快速响应和高度交互的用户界面。 但是,为界面设置动画未必很简单。 什么应设置动画,何时显示,以及动画应有哪种感觉?

使用动画作为一种给项目增加活力的方式。动画应支持用户交互。要注意设置动画的属性;有一些属性比其他属性开销更大!

选择合适的内容来设置动画

出色的动画可增添一层享受,增加项目对用户的吸引力。 可以将您喜欢的几乎所有内容设置动画,不管是宽度、高度、位置、颜色、背景,但您需要注意潜在的性能瓶颈,以及动画将如何影响您的应用的个性。 卡顿或选择不当的动画可能对用户体验产生负面影响,因此动画需要高性能并且恰当。

使用动画来支持交互

不要仅仅因为您可以做动画就随便做;它只会惹恼用户并妨碍操作。 相反,要有策略地放置动画以增强用户交互。 如果用户点击菜单图标,则让菜单从页面侧边伸出,或如果他们点击按钮,则可以使用少量辉光或弹跳来确认交互。 注意避免不必要地打断或妨碍用户活动的动画。

避免为开销大的属性设置动画

唯一比错误放置的动画更糟的事情是导致页面卡顿的动画。 这将让用户觉得失望和不悦,并且可能希望您根本不必费心去设置动画!

改变一些属性的开销比改变其他属性要多,因此更可能使动画卡顿。 因此,例如,与改变元素的文本颜色相比,改变元素的box-shadow将需要开销大很多的绘图操作。 改变元素的width可能比改变其transform要多一些开销。

您可以在动画和性能指南中阅读有关动画性能考虑事项的更多内容,但是如果想要TL;DR,则坚持使用转换和透明度改变,以及利用will-change。 如果想确切知道给指定的属性设置动画会触发什么效果,请查阅CSS 触发器

CSS 触发器

CSS 对比 JavaScript 动画

有两种主要方法在网页上创建动画:使用 CSS 和使用 JavaScript。 您选择哪种方法实际上取决于项目的其他依赖关系,以及您尝试实现什么类型的效果。

使用 CSS 动画来实现较简单的“一次性”转换,例如切换 UI 元素状态。当您想要高级效果时,例如弹跳、停止、暂停、倒退或减速,则使用 JavaScript 动画。如果选择使用 JavaScript 来编写动画,可选用 TweenMax,或者如果想要更轻量的解决方案,则使用 TweenLite。

大多数基本动画可以使用 CSS 或 JavaScript 来创建,但工作量和时间将有所不同 (另请参考CSS 对比 JavaScript 性能)。 每种方法都各有利弊,但是以下是很好的经验法则:

  • 当您为 UI 元素采用较小的独立状态时,使用 CSS。 CSS 转换和动画非常适合于从侧面引入导航菜单,或显示工具提示。 最终,可以使用 JavaScript 来控制状态,但动画本身是采用 CSS。
  • 在需要对动画进行大量控制时,使用 JavaScript。 动态跟踪触摸位置的动画,或需要停止、暂停、减速或倒退的动画一般需要使用 JavaScript。 如果您已使用包括了动画功能的 jQuery 或 JavaScript 框架,则可能发现继续使用该方法来做动画在总体上更方便,而不是切换到 CSS。

如果您已使用包括了动画功能的 jQuery 或 JavaScript 框架,则可能发现继续使用该方法来做动画在总体上更方便,而不是切换到 CSS。

使用 CSS 编写动画

使用 CSS 编写动画无疑是使事物在屏幕上移动的最简单方式。

以下是一些 CSS 代码,让一个元素同时在 X 轴和 Y 轴上移动 100px。 其实现方法是使用 CSS 转换,用时设置为 500ms。 当添加了move类时,transform值被改变并且转换开始。

.box {
    -webkit-transform: translate(0, 0);
    -webkit-transition: -webkit-transform 500ms;

    transform: translate(0, 0);
    transition: transform 500ms;
}

.box.move {
    -webkit-transform: translate(100px, 100px);
    transform: translate(100px, 100px);
}

除了转换的持续时间之外,还有针对缓动的选项,缓动基本上是动画表现的方式。 您可以在“缓动的基础知识”指南上了解更多信息。

如果在上述代码段中,创建单独的 CSS 类来管理动画,则可以使用 JavaScript 来打开和关闭每个动画:

box.classList.add('move');

这样将为应用实现很好的平衡。 您可以侧重于使用 JavaScript 来管理状态,只需在目标元素上设置相应的类,让浏览器去处理动画。 如果您按照这种方法,则可以侦听元素的transitionend事件,但前提是您能够放弃对 Internet Explorer 较旧版本的支持;IE10 是支持这些事件的首个版本。 所有其他浏览器均已支持此事件有一段时间了。

侦听转换结束所需的 JavaScript 如下:

var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
  // Handle the transition finishing.
}

除了使用 CSS 转换之外,还可以使用 CSS 动画,这允许您对单个动画关键帧、持续时间和迭代进行更多控制。

如果您是动画初学者,那么说明一下,关键帧是来自手绘动画的老术语。 动画设计者为一个片段创建多个特定帧,称为关键帧,关键帧将提供某个动作的起止状态,然后它们开始绘出关键帧之间的所有单个帧。 现在我们使用 CSS 动画也有相似的过程,我们指示浏览器,CSS 属性在指定时点需要什么值,然后浏览器填充其中的间隔。

例如,可以使用与转换相同的方式为方框设置动画,但是设置动画时没有任何用户交互(例如点击),而是采用无限重复。 还可以同时更改多个属性:

.box {
    animation-name: movingBox;
    an
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/animation/animations.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部