有意思的clip-path

时间 2019-12-07

标签有意思 clip path 繁體版

原文原文链接

前段时间朋友介绍了一个很帅的网站 http://www.species-in-pieces.com/

F12看了一下 Dom 结构，发现做者只是结合了 CSS3 的 clip-path 和 transition 特性，就实现了很厉害的效果，每一个转场和动物的细节都作得很棒。
html

而后我根据本身的理解作了一个Demo, 并将核心js部分打包了出来，欢迎感兴趣的朋友一块儿交流git

Demo中的图片来自 https://www.behance.net/tomanders, 我只是作了低边处理github

预览地址: https://luosijie.github.io/ani-clipath/

源码地址: https://github.com/luosijie/ani-clipath

实现过程

先从一个简单的 clip-path 变形开始npm

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>simple move</title>
  <style>
    .polygon{
      width: 600px;
      height: 300px;
      background-color: black;
      clip-path: polygon(20% 30%, 0 70%, 40% 70%);
      animation: move 1s infinite alternate;
    }
    @keyframes move {
      to {
        background-color: grey;
        clip-path: polygon(80% 70%, 100% 30%, 60% 30%);
      }
    }
  </style>
</head>
<body>
 <div class="polygon"></div>
</body>
</html>

这就是Demo中所须要的基本动画变形 + 变色, 至于如何构建精美的图形变化, 就须要一点想象力和设计能力了bash

设计

咱们须要先设计出满意的低边图案，注意控制三角形的数量，越少越好越少越好越少越好越少越好越少越好越少越好动画

接下来，须要将每一个三角形的坐标和色值转化为数据格式。我目前找不到很高效的转化方式，就用标注软件标注完后，手工录入,最后画了3个就结束了。因此三角形的数量越少越好越少越好越少越好越少越好越少越好越少越好。网站

或者你有很好的方式介绍，请必定要告诉我。spa

如今准备工做完成了，最痛苦的阶段也已通过去了.net

码起

代码实现的基本思路是这样的插件

每一个动物都是由 36 个不一样颜色的三角形拼接而成, 因此须要 36 个 div 来显示
每一次变化都将 36 个div 的 clip-path 属性从新赋值
每一个 div 都设置 transition 属性, 让转场自动实现

区区几行代码就不贴出来了，感兴趣的移步 github

不过我想介绍一下封装好的插件的使用方法

安装

CDN

<script src="https://unpkg.com/ani-clipath/dist/ani-clipath.min.js">

NPM

npm install --save ani-clipath

使用

须要自定义一个 DOM 容器，并设置好width和height

<style>
  .shapes{
    width: 800px;
    height: 600px;
  }
</style>
...
<div class="shapes"></div>

初始化一个实例，并传入参数

参数	类型	说明
el	String	绑定DOM容器
speed	Number	控制变化速度
delay	Number	控制变化的延迟
shapes	Array	低边图形的坐标

使用公共方法切换

方法	说明
next()	切换下一个图形
previous()	切换上一个图形

<script>
  var aniClipath = new AniClipath({
    el: '.shapes',
    speed: 1000,
    delay: 30,
    shapes: data
  })
  setInterval(function(){
    aniClipath.next()
  },3000)
</script>

shapes 属性的数据格式

var data = [
  第 1 个低边图形
  [
    // 基本图形参数
    { 
      // 颜色
      c: '#1A1A1A',
      // polygon坐标
      p: [ { x: '50%', y: '30%' }, { x: '30%', y: '70%' }, { x: '70%', y: '70%' }]
    }
    ...
  ],
  第 2 个低边图形
  [
    {
      c: '#E6E6E6',
      p: [ { x: '50%', y: '70%' }, { x: '30%', y: '30%' }, { x: '70%', y: '30%' }]
    }
    ...
  ]
  ...
  第 n 个低边图形
]

先这样了欢迎star