我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第3篇文章，点击查看活动详情
在日常开发中肯定都遇到过不少有按钮交互的地方，但你有用到什么炫酷的交互效果吗？日常开发中想必最多的就是点击按钮背景文字变色，阴影，按钮按下，加载中之类的效果，相对都比较平平无奇，都是一些按部就班的效果。一个好的前端页面在实现设计图的同时，如果也有极强的与用户交互效果，那么给用户带来的体验是极好的。近期整理了一组相对炫酷前端按钮交互动画，今天分享给大家。
今天分享的主要内容来源于 Aaron Iker，有兴趣的可以去看看原设计。为方便国内访问，本文有稍加整理修改，涉及到的代码较多，文中只展示核心部分代码，完整代码可在文末码上掘金看源码。特别说明，因涉及细节的动画比较多，所以导致CSS的代码量会比较高，部分效果依赖于gsap，animejs，three等动画库，如需线上环境使用，请留意整体性能影响，主要是按钮交互效果的参考与借鉴。
收藏按钮
此交互效果适用于用户收藏或是喜欢某个内容的时候。观察下图，我们可以将动画拆分为以下几个步骤，这里的交互效果主要是星星的动画。
- 星星在交互过程中有旋转
- 有两段上下移动的过程
- 星星中途有变化为圆形
- 从第二段跳出星星改变了颜色
- 此时星星的表情也变更为嘴角上扬
- 星星跳出过程中底部增加了一个椭圆的从无到有再到无的过程
基于以上主要的动画过程开始编码，这里使用gsap实现，当然使用常规CSS也是可行的。核心代码如下，CSS部分代码较多可看文末源码：
// 上下跳出动画 gsap.to(button, { keyframes: [{ '--star-y': '-36px', duration: .3, ease: 'power2.out' }, { '--star-y': '48px', '--star-scale': .4, duration: .325, onStart() { // 中途变圆形 button.classList.add('star-round') } }, { '--star-y': '-64px', '--star-scale': 1, duration: .45, ease: 'power2.out', onStart() { // 高亮黄色 button.classList.toggle('active') setTimeout(() => button.classList.remove('star-round'), 100) } }, { '--star-y': '0px', duration: .45, ease: 'power2.in' }, { '--button-y': '3px', duration: .11 }, { '--button-y': '0px', '--star-face-scale': .65, duration: .125 }, { '--star-face-scale': 1, duration: .15 }], clearProps: true, onComplete() { button.classList.remove('animated') } }) // 底部圆形变化 gsap.to(button, { keyframes: [{ '--star-hole-scale': .8, duration: .5, ease: 'elastic.out(1, .75)' }, { '--star-hole-scale': 0, duration: .2, delay: .2 }] }) // 星星旋转 gsap.to(button, { '--star-rotate': '360deg', duration: 1.55, clearProps: true })
发布按钮
此交互效果适用于发布新版本，提交云部署等类型功能时，观察以下动图分析动画步骤如下：
- 点击按钮时箭头开始伸缩效果
- 箭头背景出现向下运动的小云朵
- 上传完成出现☑️小图标
- 文案变更：处理前-过程中-处理完成
首先是按钮中箭头的伸缩效果，hover按钮的时候也会有此效果，--icon-arrow-y改变箭头的y轴数值，--icon-line-offset改变箭头自身的高度。
fromTo(button, { '--icon-arrow-y': '0px', '--icon-line-offset': '21px', duration: .15 }, { repeat: -1, keyframes: [{ '--icon-arrow-y': '-6px', '--icon-line-offset': '24px', duration: .6, }, { '--icon-arrow-y': '0px', '--icon-line-offset': '21px', duration: .85, ease: 'power2.out' }] })
然后创建云朵的动画，因为云朵飞出后则移除了元素，所以开启一个定时器不断创建云朵。
function createCloud(node, parent) { let elem = node.cloneNode(true) parent.appendChild(elem) set(elem, { x: gsap.utils.random(-8, 8), y: -36 }) to(elem, { y: 36, duration: gsap.utils.random(.4, 1.5), onComplete() { elem.remove() } }) } // 定时创建 cloudInterval = setInterval(() => { createCloud(clone, button.querySelector('.icon')) }, 400)
最后是结束状态，结束时移除云朵和箭头，显示带☑️小图标，并变更文案。
clearInterval(cloudInterval) // 将箭头移动到可视区外 to(button, { duration: .25, keyframes: [{ '--icon-line-offset': '13px' }, { '--icon-arrow-offset': '4px' }] }) // 显示带☑️小图标 to(button, { '--icon-tick-offset': '0px', duration: .25, delay: .3 }) to(button, { '--icon-circle-scale': 1, duration: .7, delay: .2, ease: 'elastic.out(1, .75)' })
整个通过控制元素的透明度和y轴偏移量显示不同的状态文案，以下时完成状态文案控制代码。
span { opacity: var(--o, var(--text-normal-o)); transform: translateY(var(--y, var(--text-normal-y))) translateZ(0); &.done { --o: var(--text-done-o); --y: var(--text-done-y); } }
// 完成状态显示 to(button, { '--text-done-o': 1, '--text-done-y': '0px', duration: .3, delay: .1 })
按钮点星效果
此交互效果适用于github给开源项目点星的时候用，也可以用于类似加星加赞等场景。此效果除了gsap之外还用到了threejs，通过观察下面等动图，可分析出动画主要有以下几个步骤：
- 鼠标悬停时会出现3D星星并带有翻转动画
- 点击按钮时星星会产生抛物线的运动轨迹到按钮后面的数字
- 星星经过按钮数字的时候，数字+1，并有+1的文字和星星一同飞出
- 点击时文案变化并向左移动
整体效果很炫，星星数量增加的效果很真实，星星的运动轨迹让交互效果锦上添花。此处贴一下星星运动轨迹的代码，其他的代码涉及threejs绘制星星的较多，有兴趣的可查看源码。
gsap.to(object.position, { duration: 0.7, motionPath: { path: [ { x: 0, y: -0.5, }, { x: 5.45, y: -5, }, { x: 10.9, y: -0.5, }, { x: 7, y: 7, }, ], curviness: 1.2, }, ease: "sine.in", });
