有意思的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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。