有意思的clip-path

JesseLuo發表於2019-02-21

前段時間朋友介紹了一個很帥的網站 www.species-in-pieces.com/

F12看了一下 Dom 結構，發現作者只是結合了 CSS3 的 clip-path 和 transition 特性，就實現了很厲害的效果，每個轉場和動物的細節都做得很棒。

然後我根據自己的理解做了一個Demo, 並將核心js部分打包了出來，歡迎感興趣的朋友一起交流

Demo for ani-clipath
Demo for ani-clipath

Demo中的圖片來自 www.behance.net/tomanders, 我只是做了低邊處理

預覽地址: luosijie.github.io/ani-clipath…

原始碼地址: github.com/luosijie/an…

實現過程

先從一個簡單的 clip-path 變形開始

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中所需要的基本動畫 變形 + 變色, 至於如何構建精美的圖形變化, 就需要一點想象力和設計能力了

設計

我們需要先設計出滿意的低邊圖案，注意控制三角形的數量，越少越好越少越好越少越好越少越好越少越好越少越好

shark
shark

shark
shark

shark
shark

接下來，需要將每個三角形的座標和色值轉化為資料格式。我目前找不到很高效的轉化方式，就用標註軟體標註完後，手工錄入,最後畫了3個就結束了。所以三角形的數量越少越好越少越好越少越好越少越好越少越好越少越好。

或者你有很好的方式介紹，請一定要告訴我。

圖形轉為資料
圖形轉為資料

現在準備工作完成了，最痛苦的階段也已經過去了

碼起

程式碼實現的基本思路是這樣的

  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>複製程式碼

初始化一個例項，並傳入引數

引數 型別 說明
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

相關文章