练习动画最好的方式（一）：锁链按钮

练习动画最好的方式（一）：锁链按钮

你能相信这张图片是由纯CSS绘画的吗？

这是国外一位大师的作品，作者并把整个制作的过程都录制了下来，虽然不知道总共花了多少时间，但这绝对是一个惊人的作品

我知道很多人会觉得，『对呀很酷，但是怎么实现的呢？』。

我也不懂为什么，但知道能利用CSS 做出这种极限真的很令人感到兴奋。光是观察他的代码就可以学到不少技巧，

虽然试着理解高手如何做到是能吸收不少经验，但还是会想要自己动手做点什么，好在我又发现了另一个稍微平易近人的高手- Aaron Iker，他大多的作品都围绕在一个网页上不可缺乏，但鲜少被人拿来做文章的元件- "按钮"。

按钮，几乎所有网页都会用到它，但就是拿来触发一些动作，被触发的动作才是我们在意的，很少会在上头多作着墨，顶多加个Hover 变色或位移就很差不多了。

但看看下面这个实例：

一点小巧思，瞬间就让按钮活了起来。

而且因为范围限缩在了按钮的大小，就算动画稍微华丽一些也不会对整体页面造成太多干扰。

受到Aaron启发，趁着空闲时间我也试着做了一个按钮动画，今天这篇文章就分享一下过程中使用到的工具与眉角！

灵感来源

这次的按钮动画主要修改自Dribbble上YorKun的作品- Button Lock Animation，感谢作者还有附上源码档案，让我能更轻松的参照。

不过我并没有完全照着原作的动画制作，主要是想多试试一些不同的动画组合，接下来我会一一介绍。

动画实作

我一开始想达到的动画有四项：

1. 滑动解锁
2. 锁头开启与掉落
3. 对应开锁状态的动画
4. 锁头拖拉时的2D 物理效果

理论上应该是很快就能完成，但因为对GSAP不熟，走了很多冤枉路，导致最后只完成了前三项的效果，算是差强人意。

用到的工具主要是GSAP与GSAP的Draggable plugin

滑动解锁

GSAP的Draggable plugin真的有够简单好用，只要给定想要启动Draggable的DOM物件，并指定要拖拉的方向（type）与范围（bounds），就能瞬间完成这样的效果（demo由此去）：

// 注册GSAP的draggable插件
gsap.registerPlugin(Draggable);

// 选择需要与queryselector交互的DOM
const button = document.querySelector(".unlock-btn");
const lockerArea = button.querySelector(".locker");
const dropArea = button.querySelector(".drop");

// 主要的可拖动的实例
Draggable.create(lockerArea, {
  type: "x",
  bounds: button,
  onDrag(e) {},
  onRelease(e) {
    if (!this.hitTest(dropArea)) {
      gsap.to(lockerArea, {
        x: 0,
        duration: 0.6,
        ease: "elastic.out(1, .75)"
      });
    } else {
      // this.disable();
      gsap.to(lockerArea, {
        x: dropArea.offsetLeft - 9,
        duration: 0.6,
        ease: "elastic.out(1, .8)",
        onUpdate(e) {
          tl.restart();
        }
      });
    }
  }
});
复制代码

中间可以看到，我们指定type为x，表示移动方向为x轴，而bounds为buttonDOM物件，所以最多不会拖移超过butotn的范围。

另外，影片中有一个效果是当你拖拉到前