有意思的clip-path
source link: https://juejin.im/post/59cc619551882530f31a3349
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
有意思的clip-path
前段时间朋友介绍了一个很帅的网站 www.species-in-pieces.com/
F12看了一下 Dom 结构,发现作者只是结合了 CSS3 的 clip-path 和 transition 特性,就实现了很厉害的效果,每个转场和动物的细节都做得很棒。
然后我根据自己的理解做了一个Demo, 并将核心js部分打包了出来,欢迎感兴趣的朋友一起交流
Demo for ani-clipathDemo中的图片来自 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中所需要的基本动画 变形 + 变色, 至于如何构建精美的图形变化, 就需要一点想象力和设计能力了
我们需要先设计出满意的低边图案,注意控制三角形的数量,越少越好越少越好越少越好越少越好越少越好越少越好
sharkshark
shark
接下来,需要将每个三角形的坐标和色值转化为数据格式。我目前找不到很高效的转化方式,就用标注软件标注完后,手工录入,最后画了3个就结束了。所以三角形的数量越少越好越少越好越少越好越少越好越少越好越少越好。
图形转为数据或者你有很好的方式介绍,请一定要告诉我。
现在准备工作完成了,最痛苦的阶段也已经过去了
代码实现的基本思路是这样的
- 每个动物都是由 36 个不同颜色的三角形拼接而成, 所以需要 36 个 div 来显示
- 每一次变化都将 36 个div 的 clip-path 属性重新赋值
- 每个 div 都设置 transition 属性, 让转场自动实现
区区几行代码就不贴出来了,感兴趣的移步 github
不过我想介绍一下封装好的插件的使用方法
<script src="https://unpkg.com/ani-clipath/dist/ani-clipath.min.js">复制代码
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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK