有意思的clip-path

2019年9月14日 119次阅读 来源: JesseLuo

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

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

然后我根据自己的理解做了一个Demo, 并将核心js部分打包了出来，欢迎感兴趣的朋友一起交流

《有意思的clip-path》

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

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

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

实现过程

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

《有意思的clip-path》

<!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中所需要的基本动画 变形 + 变色, 至于如何构建精美的图形变化, 就需要一点想象力和设计能力了

设计

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

《有意思的clip-path》

《有意思的clip-path》

《有意思的clip-path》

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

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

《有意思的clip-path》

现在准备工作完成了，最痛苦的阶段也已经过去了

码起

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

  1. 每个动物都是由 36 个不同颜色的三角形拼接而成, 所以需要 36 个 div 来显示
  2. 每一次变化都将 36 个div 的 clip-path 属性重新赋值
  3. 每个 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>

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

参数类型说明
elString绑定DOM容器
speedNumber控制变化速度
delayNumber控制变化的延迟
shapesArray低边图形的坐标

使用公共方法切换

方法说明
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

    原文作者：JesseLuo
    原文地址: https://segmentfault.com/a/1190000011394201
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞