练习动画最好的方式（二）：屏幕指纹开锁动画效果

这部分时间比较忙，正是我所在行业中的旺季，也没有时间更新，这篇文章我会用SCSS+GSAP实现一个屏幕指纹的登录效果，让我们先来看看效果图

开始创作

第一步：将指纹绘制转为SVG,

我用 Adob​​e Illustrator 用钢笔工具追踪指纹，得到这组路径：

<svg width='180' height='320'>
  <path d="M46.1,214.3c0,0-4.7-15.6,4.1-33.3"/> 
      <path d="M53.5,176.8c0,0,18.2-30.3,57.5-13.7"/>
      <path d="M115.8,166.5c0,0,19.1,8.7,19.6,38.4"/>
      <path d="M47.3,221c0,0,3.1-2.1,4.1-4.6s-5.7-20.2,7-36.7c8.5-11,22.2-19,37.9-15.3"/>
      <path d="M102.2,165.4c10.2,2.7,19.5,10.4,23.5,20.2c6.2,15.2,4.9,27.1,4.1,39.4"/>
      <path d="M51.1,226.5c3.3-2.7,5.1-6.3,5.7-10.5c0.5-4-0.3-7.7-0.3-11.7"/>
      <path d="M129.3,200.1"/>
      <path d="M56.3,197.9c3.1-16.8,17.6-29.9,35.1-28.8c17.7,1.1,30.9,14.9,32.8,32.2"/>
      <path d="M124.2,207.9c0.5,9.3,0.5,18.7-2.1,27.7"/>
      <path d="M54.2,231.1c2.1-2.6,4.6-5.1,6.3-8c4.2-6.8,0.9-14.8,1.5-22.3c0.5-7.1,3.4-16.3,10.4-19.7"/>
      <path d="M77.9,178.2c9.3-5.1,22.9-4.7,30.5,3.3"/>
      <path d="M113,186.5c0,0,13.6,18.9,1,54.8"/>
      <path d="M57.3,235.2c0,0,5.7-3.8,9-12.3"/>
      <path d="M111.7,231.5c0,0-4.1,11.5-5.7,13.6"/>
      <path d="M61.8,239.4c9.3-8.4,12.7-19.7,11.8-31.9c-0.9-12.7,3.8-20.6,18.5-21.2"/>
      <path d="M97.3,188.1c8.4,2.7,11,13,11.3,20.8c0.4,11.8-2.5,23.7-7.9,34.1c-0.1,0.1-0.1,0.2-0.2,0.3
        c-0.4,0.8-0.8,1.5-1.2,2.3c-0.5,0.8-1,1.7-1.5,2.5"/>
      <path d="M66.2,242.5c0,0,15.3-11.1,13.6-34.9"/>
      <path d="M78.7,202.5c1.5-4.6,3.8-9.4,8.9-10.6c13.5-3.2,15.7,13.3,14.6,22.1"/>
      <path d="M102.2,219.7c0,0-1.7,15.6-10.5,28.4"/>
      <path d="M72,244.9c0,0,8.8-9.9,9.9-15.7"/>
      <path d="M84.5,223c0.3-2.6,0.5-5.2,0.7-7.8c0.1-2.1,0.2-4.6-0.1-6.8c-0.3-2.2-1.1-4.3-0.9-6.5c0.5-4.4,7.2-6.9,10.1-3.1c1.7,2.2,1.7,5.3,1.9,7.9c0.4,3.8,0.3,7.6,0,11.4c-1,10.8-5.4,21-11.5,29.9"/>
      <path d="M90,201.2c0,0,4.6,28.1-11.4,45.2"/>
      <path d="M67.3,219C65,188.1,78,180.1,92.7,180.3c18.3,2,23.7,18.3,20,46.7"/>
</svg>
复制代码

效果：

第二步：实现动画

我将重点介绍这里的重要部分，你可以参考演示以获取完整代码。

填写指纹： 让我们创建手机屏幕和指纹的 HTML 结构。

<div class="demo">
  <div class="demo__screen demo__screen--clickable">
    <svg class="demo__fprint" viewBox="0 0 180 320">  
      <path class="demo__fprint-path demo__fprint-path--removes-backwards demo__fprint-path--pinkish" d="M46.1,214.3c0,0-4.7-15.6,4.1-33.3"/>
      <path class="demo__fprint-path demo__fprint-path--removes-backwards demo__fprint-path--purplish" d="M53.5,176.8c0,0,18.2-30.3,57.5-13.7"/>
      <path class="demo__fprint-path demo__fprint-path--removes-forwards demo__fprint-path--pinkish" d="M115.8,166.5c0,0,19.1,8.7,19.6,38.4"/>   
    </svg>

到目前为止，样式非常简单。请注意，我在整个演示中都使用了 Sass——并有助于我们完成一些更重的工作。

$scale: 1.65;
$purplish-color: #8742cc;
$pinkish-color: #a94a8c;
$bg-color: #372546;


.demo {
  background: linear-gradient(45deg, lighten($pinkish-color, 10%), lighten($purplish-color, 10%));
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0;
  user-select: none;
  overflow: hidden;
  position: relative;
  

  &__screen {
    position: relative;
    background-color: $bg-color;
    overflow: hidden;
    flex-shrink: 0;
    &--clickable {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
  }
  

  &__fprint-path {
    stroke-width: 2.5px;
    stroke-linecap: round;
    fill: none;
    stroke: white;
    visibility: hidden;
    transition: opacity 0.5s ease;
    
    &--pinkish {
      stroke: $pinkish-color;
    }
    
    &--purplish {
      stroke: $purplish-color;
    }    
  }
  
 
  &__fprint {
    width: 180px * $scale;
    height: 320px * $scale;
    position: relative;
    top: 20px * $scale;
    overflow: visible;
 
    background-image: url('fprintBackground.svg');
    background-size: cover;
    
    &--no-bg {
      background-image: none;
    }
  }
}

现在是困难的部分：使指纹具有交互性。这就是我将用来填充每个单独路径的方法。

创建一个描述路径元素的类，以便以后更容易操作路径。

class Path {
  constructor(selector, index) {
    this.index = index;
    this.querySelection = document.querySelectorAll(selector)[index];
    this.length = this.querySelection.getTotalLength();
    this.$ = $(selector).eq(index);
    this.setDasharray();
    this.removesForwards = this.$.hasClass('demo__fprint-path--removes-forwards');
  }
  
  setDasharray() {
    this.$.css('stroke-dasharray', `${this.length} ${this.length + 2}`);
    return this;
  }
  
  offset(ratio) {
    this.$.css('stroke-dashoffset', -this.length * ratio + 1);
    return this;
  }
  
  makeVisible() {
    this.$.css('visibility', 'visible');
    return this;
  }
}
复制代码

大体思路是这样的：为我们指纹中的每条路径创建一个此类的实例，并在每一帧中修改它们。路径将以-1