Don't panic.

用 animejs 制作 Slack 的 logo

anime.js 是一个 javascript 的动画引擎,很轻量级,只有 9kb,最开始关注它是被它官网首页的动画吸引的,感觉很有意思,最近使用 animejs,并参考这篇文章 Building the slack animating logo with only css 做了个 Slack 的 Logo 动效。

See the Pen Slack logo made by anime.js by Tony Chu (@Sanster) on CodePen.

可以看到,整个动画分为四个独立的球,每个球有三个动画阶段:

  • 小球长度/宽度延长
  • 小球长度/宽度反向减小
  • 小球返回原位

使用 animejs 1.0 写出来的代码感觉不是很简洁,要用在 complete 里面嵌套着写动画,当然上面的代码还可以优化优化,不过始终有点怪怪的。作者在 2.0 里面作者增加了一个 property 可以设定多个值的支持:Keyframes,和 CSS3 的 keyframe 差不多,定义每个阶段的值,使用这个特性可以写出结构更清晰的代码:

var slack_size = '96px'
var dot_width = '18px'
var pos_dis = '78px'
var duration = 2000
var restart_wait_time = 100
anime({
targets: '.green',
easing: 'linear',
loop: true,
duration: duration,
top: ['0px', pos_dis, '0px'],
height: [slack_size, dot_width, dot_width],
})
anime({
targets: '.blue',
easing: 'linear',
loop: true,
duration: duration,
right: ['0px', pos_dis, '0px'],
width: [slack_size, dot_width, dot_width],
})
anime({
targets: '.pink',
easing: 'linear',
loop: true,
duration: duration,
left: ['0px', pos_dis, '0px'],
width: [slack_size, dot_width,dot_width],
})
anime({
targets: '.yellow',
easing: 'linear',
loop: true,
duration: duration,
bottom: ['0px', pos_dis, '0px'],
height: [slack_size, dot_width, dot_width],
})