有意思的clip-path

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

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

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

Demo for ani-clipath

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

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

源码地址: github.com/luosijie/an…

实现过程

先从一个简单的 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

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

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

图形转为数据

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

码起

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

每个动物都是由 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