原文标题:Responsive CSS Keyframe Animations
原文作者:Joni Trythall
原文地址:http://designmodo.com/responsive-animation/
译文作者:@静逸秋水(蒲欢)
==============================
我知道对于CSS动画的的喜好并非自己一人。同时我也认为还有诸多人同我一样热衷移动开发。然而,使用带有动画网站的愉悦体验往往却在移动端戛然止步。如果我们的目标是创造最好的用户体验,我们承认,动画无疑会丰富这方面的体验,我们需要确保我们交付不管正在使用的设备。
由于移动端受到屏幕尺寸限制,再加上我们当中不少人还有一个很大的拇指,这很有可能遮挡住动画。这样一想,似乎会觉得在移动端实现动画有些让人沮丧。但我 们依旧不能把所有的注意力花在创建桌面动画上,而不是仅仅让移动端用户驻足观看。而那样做,将会牺牲掉很大比例的用户体验。
通过动画实现交流
我们也可以通过这些动画跨越简单的颜色和大小过渡。它并不必须和最终事件相关。我们可以用有趣的动画作为与用户沟通的工具。用户可以仅此一乐,或者带有目的性的去观赏。既然我们已经得到了他们的注意力,现在我们想要做些什么?
移动端,动画第一
就像我们在建设一个网站,我们首先需要开发手机端的动画。这迫使我们缩小范围并专注于我们上面所要表达的意思。创建响应的动画将使我们能够更好的适应不同 设备的限制,从而构建不同的用户体验。即使存在这些差异,但动画还是不得不表达同样的事情。每个屏幕都为我们提供了限制(是的,甚至是桌面),响应式设计 将克服这些局限性。
按钮草图和DEMO
这是关于消息,适应局限以及乐趣。为了证明这个理念,我们将会为一个提交按钮创建动画。我们的移动动画将保持按钮的边界内。我们的桌面动画将超出按钮的边界,并利用外面的一些空间。先看下草图吧!
按钮草图
我们在这里向用户传达了三个阶段的消息:激活,提交和完成。通过这些动画,我们完成了与用户沟通的整个过程。尽管两者存在区别,但传达却是同一个意思。我们的信息是一致的,我们的图片风格是一致的,而现在我们应该能够理解它所带来的乐趣,无需顾忌屏幕大小。
让我们来看看我们的按钮的演示(见文章最后),我们潜水(公顷)进入前的@keyframe。我们的按钮有一组动画的适应于屏幕比800px小的,另一组动画适应于比800px大的屏幕。当你改变浏览器窗口大小时将重设,以便展现不同的动画
移动端的@keyframe
我们在传达一个“提交”或“处理”信息,当按钮点击后,通过让水面出现,然后让潜艇移动到另一侧。同样文本也会随着动画改变。我们会告诉用户“嘿,感谢点击,我们在提交您的信息”。
要做到这一切,我们将设立三个不同的@keyframe。
@keyframes submerge {
to {
transform: translateY(-50px);
}
}
@keyframes drive {
to {
transform: translateX(140px);
}
}
@keyframes sent {
to {
opacity: 1;
}
}
在上面的@keyframe的命令,我们已经把我们的水位上升,潜艇在按钮中移动,最后,让我们的“已发送”的文字出现,传达完成信号。
移动限制
当我们赋予这些动画,我们需要考虑其他因素,或许受限的不是手机屏幕大小,而是我们的大拇指。当用户用手指点击按钮后,那马上开始动画,无意动画可能被错 过。牢记这一点,我们的动画任务中定时功能将是重要的。我们声明延迟和设置完成时间都是为了考虑到拇指的影响如同需要正在处理的动画一样。
动画是微妙的,如果不能如此微妙,或许我们意图可能已经失去,比如,如果用户是步行,他很有可能错过动画,也就无法激起用户的关注。我们已经成功地展示给用户激活,提交,并完成状态,并且无需使用额外的空间。这样做会不会很有趣,至少是一个不错的开始。
桌面关键帧
现在,到了我们的桌面动画。这次我们将它做得更炫一点。我们希望潜艇能够飞出按钮,并带有水花,移动到右边,然后再回到按钮吗,再次出现水花。然后潜艇停 留在右边。与移动端一致,这些动画都将在4秒内完成。我们按钮的整体外观看起来很好玩。让我们来看看每个@keyframe。
潜艇被定位在左边,我们希望它上下移动,翻转,然后下来。它会跳出水面,因此我们将调用此
@keyframe。
@keyframes jump {
25% {
transform: translateY(-90px) rotate(-40deg);
}
75% {
transform: translateY(-90px) translateX(150px) rotate(40deg);
}
100% {
transform: translateY(0) translateX(150px);
}
}
为了实现贱入效果,我们希望水滴从隐藏到短暂出现,需要如下@keyframe
@keyframes water-splash {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
在动画的中途,水滴将完全可见的,但随后在动画完成后消失。我们不希望这些家伙一直参与其中,只是做一个简单的外观。我们将针对我们的第二飞溅提供一个额外的类,向右移动,然后添加2秒潜艇去那边的动画延迟。然后,我们的“已发送”的文字会出现,标示完成的状态。
桌面的限制
我们在这里的主要限制还是在创建移动端的动画时的消息。我们已经在使用我们的动画来传达提交过程中的不同状态,因此桌面动画也需如此。主要的区别是在我们 如何使用空间,以及我们如何确定移动的速度。我们让潜艇舒展了下他的螺旋桨,相信它和用户的眼球都应该会为此而感谢我们。
提交完成
我们已成功地使用两种不同的方式传达同样一件事情。消息和体验在不同分辨率表现出一致性。这一概念,当然,并不局限于移动一个可爱的潜水艇。我们在我们网 站上创建的每个动画需要先开发移动。从较小的屏幕省略动画,或有一个是否适用不同屏幕大小的动画,都将会影响传递的消息,品牌,和用户的体验。
我们动画都是响应式,我们所有的用户现在极其疯狂地提交数据来观看我们的潜艇的舞蹈。只是,你知道,在这种情况下没有实际的数据。我们还成功地使用CSS动画作为一种交流形式,而不只是一个华而不实的效果。
是不是觉得这样的提交很赞?
=============
DEMO:http://designmodo.com/demo/cssresponsivebutton/
Download: https://dl.dropboxusercontent.com/u/21385868/designmodo/cssresponsivebutton.zip
Related Posts
-
推荐10款非常优秀的 HTML5 开发工具HTML5 发展如火如荼,随着各大浏览器对 HTML5 技术支持的不断完善以及 HTML5 技术的不断成熟,未来 HTML5 必将改变我们创建 Web 应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具,帮助你更高效的编写…
html照片从模糊到清晰的渐变加载显示方法1.背景介绍 在网络相册应用中用户查看照片是最朴素的需求,当网络比较慢的时候查看照片等待的时间是比较长的,用户体验会很差。 2.现状 现在加载照片的方法主要有一下两种: (1)最原始的方式在html页面直接用img标签加载显示照片。该方法在网络速度比较慢或者要显示的照片比较大的时候会页面出现空白的等待过程,并且不能开始给用户看到照片大概的情况,用户体验比较不好 (2)在html页面先用img标签加载显示照片的缩略图,同时用javascript隐藏的加载照片的原图,等照片大图加载完成后再将原图显示到页面中。以下是流程图: 该方法用户可以先看到的是模糊的小图,等照片的原图加载完后才能看到真实的照片,如果网络慢的话中间等待的时间也是比较长的,用户就一直看到模糊的小图,用户体验也不好。 …
html照片从模糊到清晰的渐变加载显示方法1.背景介绍 在网络相册应用中用户查看照片是最朴素的需求,当网络比较慢的时候查看照片等待的时间是比较长的,用户体验会很差。 2.现状 现在加载照片的方法主要有一下两种: (1)最原始的方式在html页面直接用img标签加载显示照片。该方法在网络速度比较慢或者要显示的照片比较大的时候会页面出现空白的等待过程,并且不能开始给用户看到照片大概的情况,用户体验比较不好 (2)在html页面先用img标签加载显示照片的缩略图,同时用javascript隐藏的加载照片的原图,等照片大图加载完成后再将原图显示到页面中。以下是流程图: 该方法用户可以先看到的是模糊的小图,等照片的原图加载完后才能看到真实的照片,如果网络慢的话中间等待的时间也是比较长的,用户就一直看到模糊的小图,用户体验也不好。 …