css 原型头像_如何使用CSS和JavaScript创建应用原型

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的洞察力和这张Dr​​ibbble镜头为我们提供了灵感。 与往常一样，在下面留下任何评论以进行进一步的讨论，如果您想看到更多类似的内容，请在CodePen上给演示一些支持 ！

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-create-an-app-prototype-using-css-and-javascript--cms-29062

css 原型头像