css 原型头像
动画确实是很长一段时间以来击中CSS的最佳功能之一。 毕竟,正如我们已经意识到的那样,运动可以增强用户体验并鼓励在静态上下文不足的情况下采取行动。 在本教程中,我们将使用CSS动画和JavaScript来为应用程序构建原型。
我们正在创造什么
在本练习中,我们将为一个应用程序开发一个原型,使订阅者可以彼此关注。 最初,我们将加载一个用户列表,其名称在每个对应的头像下方。 单击这些头像时,将触发一个模态,其中包含一个“关注”按钮以及与每个用户有关的其他信息。
出于演示目的,我们将使用名为Random User Generator的免费服务加载30个用户。 他们的API不仅提供用户的随机图像,而且还提供名称,地址,电子邮件等更多随机数据。
1.搭建舞台
我之前已经讨论了用于构建原型概念的选项 ,但是在本文中,我们将使用实际代码构建原型。 对于这个任务,我们将使用漫威设备 ; 一个包含11个纯CSS移动设备的开源库,以展示通常用Marvel App制作的原型。
要开始使用,请在文档顶部包含devices.min.css ,返回到演示并选择所需的组合,然后将生成HTML复制并粘贴到您的项目中。
2.加载用户
有了为演示设备(Nexus 5)获得CSS,就可以开始加载应用程序的用户供稿了。
<div class="marvel-device nexus5">
<div class="top-bar"></div>
<div class="sleep"></div>
<div class="volume"></div>
<div class="camera"></div>
<div class="screen">
<h3 class="title">Results</h3>
<ul class="users"></ul>
</div>
</div>
用户将作为列表项加载,并注入到.users
无序列表中。 这是最初的基础,但是我们需要使用JavaScript与随机用户API进行通信才能插入这些列表项。 为了发出此请求,我们将使用普通的原始 JavaScript ES6样式。
let request = new XMLHttpRequest();
该request
是将包含我们的AJAX请求的变量,但它需要使用URL进行连接。
request.open('GET', 'https://randomuser.me/api/?results=30', true);
open
方法将从我们设置的URL和参数中检索API数据。 还有许多其他参数可以使用 ,但是对于本演示,我们将仅检索30个结果。 现在我们已经有了我们的URL并发送了请求,让我们检索该数据。
// Utility for DOM selection
function select(s) {
return document.querySelector(s);
}
// Store for referencing
const users = select('.users'),
// AJAX Request
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
let data = JSON.parse(request.responseText),
l = data.results.length;
for(var i = 0; i < l; i++) {
// data results
console.log(data.results[i]);
}
} else {
alert('We reached our target server, but there was an error');
}
};
request.onerror = function() {
alert('There was a connection error of some sort')
};
// Send Ajax call
request.send();
整个请求现在到位。 打开控制台,您将看到列出的所有数据的所有结果。 这是一个好的开始,但是我们绝对要做的不只是将输出记录到控制台。
3.注入用户数据
在下一部分中,我们将使用从随机用户API中获得的数据注入标记。
users.insertAdjacentHTML('beforeend', '<li><img src="'+
data.results[i].picture.medium +'" data-pic="'+
data.results[i].picture.large +'" data-name="'+
data.results[i].name.first + ' ' +
data.results[i].name.last + '" data-email="'+
data.results[i].email +'"><span class="user-name">'+
data.results[i].name.first +'</span></li>');
上面的代码行将放在将数据记录到控制台之前创建的循环中。 如前所述,关于附加到用户对象的数据,我们有很多选择,例如名字,电子邮件和头像大小。 中等大小的图像将用于初始显示,而较大的大小将用于单击缩略图头像时触发的模态。 所有这些信息都将存储在数据属性中,因此我们可以根据需要检索它们。
4.检测头像位置
我们将为此演示构建另一个组件; 从执行点(即,单击头像)触发的模式。 我们将需要我们亲爱的朋友数学来真正确定模态将从何处扩展。
var transOriginNames = {
webkitTransformOrigin : 'webkitTransformOrigin',
MozTransformOrigin : 'MozTransformOrigin',
msTransformOrigin : 'msTransformOrigin',
transformOrigin : 'transformOrigin'
};
users.addEventListener('click', function(e) {
let target = e.target,
target_coords = target.getBoundingClientRect();
if(target.nodeName === 'IMG') {
for(var name in transOriginNames) {
modal.style[name] = (target.offsetLeft + (target_coords.width/2)) +'px ' + ((target.offsetTop + (target_coords.height/2)) - screen_scroll.scrollTop) + 'px';
}
}
});
为了从执行的角度实现模态的这种扩展,我们需要确保我们的transform-origin
正确,以便正确地具有模态比例。 我使用一个object
来保存我们所有的transform-origin
前缀,因为我们使用JavaScript来设置它们,并且还需要确保不支持该标准的浏览器覆盖所有基础。
请注意确定transform-origin
值所需的数学运算。
modal.style[name] = (target.offsetLeft + (target_coords.width/2)) +'px ' + ((target.offsetTop + (target_coords.height/2)) - screen_scroll.scrollTop) + 'px';
上图直观地说明了如何计算数学。 为了确定正确的位置,我们分别使用offsetLeft
和offsetTop
加一半的width
和height
来查找化身的确切中心。 scrollTop
也是非常重要的,因为30个用户将溢出设备屏幕的边界,并且offsetTop
将需要减去此值以确定距屏幕顶部的适当距离。 上图中的所有值均由我们的朋友getBoundingClientRect
。
将target_coords
登录到控制台,您可以看到进行适当假设所需的所有尺寸和值。 关于width
和height
这些值将始终根据化身在设备屏幕中的位置而变化。
5.动画模态
准备好化身坐标并准备好接收我们的click事件之后,就该添加模态运动了,该运动将显示用户的个人资料。
.modal {
transform: scale(0) translateZ(0);
transition-duration: 320ms;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-property: transform, opacity;
opacity: 0;
}
上面的代码从实时演示中进行了精简,以展示我们将要使用的确切运动属性。 我们最初使用opacity
和scale
隐藏。
现在是时候定义CSS属性了,它将处理模态运动的活动状态。
.screen.active .modal {
transform: scale(1) translateZ(0);
opacity: 1;
}
使用JavaScript,我们将在screen
切换一个active
类。 在上面的几行中,我们正在反转之前设置的内容。 这就是我们如何创建模态的扩展效果。 这是一种非常类似于Google Material Design风格的样式 ,有助于破坏认知行为,并快速响应用户输入,从而使动作响应灵敏。 此样式还通过从接触点立即向外扩展来确认用户输入。
6.让化身动起来
在加载过程中,我们将创建缩放效果,使序列的静态性降低,响应速度更快。 每个头像将以与下一个不同的间隔进行缩放,为此,我们将使用CSS。
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes expand-out {
from { transform: scale(0); }
to { transform: scale(1); }
}
.users li {
opacity: 0;
}
最初,我们将隐藏用户,然后在AJAX请求执行良好后切换show
类。 我还包括了一些关键帧,这些关键帧会将我们的属性变形为正确的值。 我们将在下面的代码片段中使用这些关键帧,这些关键帧将使动作生效。
$user-count: 30;
$duration: 200ms;
$stagger_delay: 0.0125s;
$easing: cubic-bezier(.66, .14, .83, .67);
.users.show {
li {
animation-duration: $duration;
animation-name: fade-in;
animation-fill-mode: both;
animation-timing-function: $easing;
opacity: 1;
img {
animation-duration: $duration;
animation-name: expand-out;
animation-fill-mode: both;
animation-timing-function: $easing;
}
@for $i from 1 through $user-count {
&:nth-of-type(#{$i}) {
animation-delay: ($stagger_delay * $i);
img {
animation-delay: ($stagger_delay * $i);
}
}
}
}
}
为了帮助进行数学计算,我使用了Sass循环和变量来保存用户计数,该计数还与随机用户API调用中的JS结果相关。 循环是整个难题的关键,因为它将遍历我们的用户数并添加我们在变量中定义的交错值。
以上是我们的最终头像动画序列的结果。 请记住,一旦从随机用户API中检索了化身,我们将仅在CSS中使用关键帧动画,并使用JavaScript切换show
类。
总结思想
确保查看实时演示,因为还有其他元素可以带来更多好处,例如动画加载器,将在用户加载时显示,并在加载化身后自动删除。
感谢Shaw的洞察力和这张Dribbble镜头为我们提供了灵感。 与往常一样,在下面留下任何评论以进行进一步的讨论,如果您想看到更多类似的内容,请在CodePen上给演示一些支持 !
css 原型头像