我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！
最近在用可画（canva），制作一些素材，海报活动页面，这不情人节快到了吗？基于海报模版，设计自己的页面倒是简单，但是都是静态页面，想着能不能让页面的元素都动起来（Everybody跟我一起嗨嗨嗨!!）。
两个方案
纯CSS animate库
- 利用animate动效，给页面上所有的image和text元素加上className，借助--var全局css变量属性，给元素依次加上delay、duration、index序号、初始化信息rotate、offset、easing等等，我会在码上掘金给一个css的demo版本。CSS版本相对简单一些，只需要循环给所有元素加上对应动画，计算执行时间，延迟时间，页面就可以动起来了。
// 定义的数据结构 Image\Text
[{
"id": "Image/Text-xx",
"type": "Image/Text",
"name": "图片/文本",
"css": {
"top": 0,
"left": 0,
"width": 414,
"height": 736,
"zIndex": 1,
"opacity": 1,
"fontSize": 18,
},
"animationObj": {
{
"delay": 1000,
"duration": 3030,
"type": "flipInY",
"easing": '',
"index": 8,
"rotate_angle": -6.6,
"offset": -112.5,
}
},
"value": "文本内容",
"src": "https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/935920813a0c4151bbf452ef3c53ab7f~tplv-k3u1fbpfcp-watermark.image"
}]
码上掘金-CSS版
下面是纯css的版本： code.juejin.cn/pen/7123482…
JS animejs库
使用JS的关键就是编写对应帧属性，通过时间轴timeline方法给元素加上动画。现在js版本还只是一个demo中的demo，下次再给jym，感兴趣的jy可以自己想想。
时间轴可让你将多个动画同步在一起。
默认情况下，添加到时间轴的每个动画都会在上一个动画结束时开始。
<div class="demo-content params-inheritance-demo">
<div class="line">
<div class="square shadow"></div>
<div class="square el" style="transform: translateX(0px) scale(1); opacity: 0.5;"></div>
</div>
<div class="line">
<div class="circle shadow"></div>
<div class="circle el" style="transform: translateX(7.22878e-10px) scale(1); opacity: 0.5;"></div>
</div>
<div class="line">
<div class="triangle shadow"></div>
<div class="triangle el" style="transform: translateX(2.30924px) scale(1.00924) rotate(180deg); opacity: 0.5;"></div>
</div>
</div>
<script src="https://lib.baomitu.com/animejs/3.2.1/anime.min.js"></script>
.demo-content {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
width: 290px;
height: 100%;
}
.line {
width: 100%;
padding: 1px 0px;
}
.square,
.circle {
pointer-events: none;
position: relative;
width: 28px;
height: 28px;
margin: 1px;
background-color: #005bb7;
font-size: 14px;
}
.triangle {
pointer-events: none;
position: relative;
width: 0;
height: 0;
border-style: solid;
border-width: 0 14px 24px 14px;
border-color: transparent transparent #005bb7 transparent;
}
.shadow {
position: absolute;
opacity: .2;
}
var tl = anime.timeline({
targets: '.params-inheritance-demo .el',
delay: function(el, i) { return i * 200 },
duration: 500,
easing: 'easeOutExpo',
direction: 'alternate',
loop: true
});
tl
.add({
translateX: 250,
// override the easing parameter
easing: 'spring',
})
.add({
opacity: .5,
scale: 2
})
.add({
// override the targets parameter
targets: '.params-inheritance-demo .el.triangle',
rotate: 180
})
.add({
translateX: 0,
scale: 1
});
