我报名参加金石计划1期应战——瓜分10万奖池，这是我的第3篇文章，点击检查活动概况
在日常开发中肯定都遇到过不少有按钮交互的地方，但你有用到什么炫酷的交互作用吗？日常开发中想必最多的便是点击按钮布景文字变色，阴影，按钮按下，加载中之类的作用，相对都比较平平无奇，都是一些墨守成规的作用。一个好的前端页面在完结规划图的同时，假如也有极强的与用户交互作用，那么给用户带来的体会是极好的。近期收拾了一组相对炫酷前端按钮交互动画，今日共享给咱们。
今日共享的首要内容来源于 Aaron Iker ，有爱好的能够去看看原规划。为方便国内拜访，本文有稍加收拾修改，触及到的代码较多，文中只展现中心部分代码，完整代码可在文末码上看源码。特别说明，因触及细节的动画比较多，所以导致CSS的代码量会比较高，部分作用依赖于gsap，animejs，three等动画库，如需线上环境运用，请留心全体功用影响，首要是按钮交互作用的参阅与学习。
保藏按钮
此交互作用适用于用户保藏或是喜欢某个内容的时分。调查下图，咱们能够将动画拆分为以下几个进程，这儿的交互作用首要是星星的动画。
- 星星在交互进程中有旋转
- 有两段上下移动的进程
- 星星半途有改动为圆形
- 从第二段跳出星星改动了色彩
- 此时星星的表情也改动为嘴角上扬
- 星星跳出进程中底部添加了一个椭圆的从无到有再到无的进程
// 上下跳出动画
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
})
发布按钮
此交互作用适用于发布新版本，提交云部署等类型功用时，调查以下动图分析动画进程如下：
- 点击按钮时箭头开端伸缩作用
- 箭头布景呈现向下运动的小云朵
- 上传完结呈现☑️小图标
- 案牍改动：处理前-进程中-处理完结
--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的文字和星星一同飞出
- 点击时案牍改动并向左移动
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",
});
删去按钮
此交互作用适用于删去逻辑，将删去的含义表述的很实在，点击删去按钮时，动画作用进程如下：
- 点击按钮左边图标平移居中显现并改动图标方式，按钮案牍淡出躲藏
- 从上往下呈现蓝色纸张通过碎纸机图标时改动为蓝色条形，形象化碎纸机的功用
- 蓝色条形移出图标时下方呈现打勾蓝色图标，代表履行完结
此处代码纯CSS完结，没有运用其他动画库，点击按钮添加一个class类，在CSS通过不同的class完结动画作用。以下代码简略列举其间几个属性的改动：
.delete-button {
span {
opacity: var(--span-opacity, 1);
transform: translateX(var(--span-x, 0)) translateZ(0);
transition: transform .4s ease var(--span-delay, .2s), opacity .3s ease var(--span-delay, .2s);
}
.trash {
transform: translate(var(--trash-x, 0), var(--trash-y, 1px)) translateZ(0) scale(var(--trash-scale, .64));
}
// 点击后
&.delete {
// 案牍躲藏
--span-opacity: 0;
--span-x: 16px;
--span-delay: 0s;
// 图标居中显现
--trash-x: 46px;
--trash-y: 2px;
--trash-scale: 1;
--trash-lines-opacity: 0;
--trash-line-scale: 0;
}
}
点赞按钮
此交互作用适用于用户点赞的场景，首要亮点是其间的大拇指的动作，完美的诠释了实在场景中点赞的动作，整个动画进程可拆解如下：
- 鼠标悬停时手掌往下，大拇指按下
- 点击按钮时，大拇指弹出，整个图标有纤细向上的动画
- 点击完结时，按钮变色，案牍改动
// 未点击hover时
&:not(.liked) {
&:hover {
--hand-rotate: 8;
--hand-thumb-1: -12deg;
--hand-thumb-2: 36deg;
}
}
// 默认
.thumb {
transform: scale(.85) translateY(-.5px) rotate(var(--hand-thumb-1, -45deg)) translateZ(0);
&:before {
transform: rotate(var(--hand-thumb-2, -45deg)) translateZ(0);
}
}
这儿的--hand-rotate是整个手掌的动画操控，运用gsap的调用方式。
gsap.fromTo(button, {
'--hand-rotate': 8
}, {
ease: 'none',
keyframes: [{
'--hand-rotate': -45,
duration: .16,
ease: 'none'
}, {
'--hand-rotate': 15,
duration: .12,
ease: 'none'
}, {
'--hand-rotate': 0,
duration: .2,
ease: 'none',
clearProps: true
}]
});
提交按钮
此交互逻辑适用商城提交订单后的作用，提交按钮后会呈现包裹装车运走的动画作用，给用户的感觉便是发货速度很快，首要动画拆解为如下几个进程：
- 点击按钮后折叠成一个进展条
- 进展条上方呈现货车并呈现包裹装车
- 货车从左到右运动，进展条进展填满
- 按钮康复原样案牍改动并添加绿色打勾
这个作用里边呈现的元素较多，就一个货车就费了不少功夫，还带有进展条的提示，因触及到的动画进程及细节较多，此处还是运用gsap完结，基于此还作用能够稍加修改为下载按钮的交互，如下图所示，只不过这儿是呈现货车后掉下一个包裹，比较适用于下载的场景。
进展按钮
此交互作用适用于按钮履行时间比较长的场景，比方上传或是下载的时分，这类功用平常遇到的还是比较多的，大都是添加一个loading处理，但以下几个作用信任能够给你新的启示，这部分的作用较多就不详细说明晰。
下面整个进程从白色布景到成功后的蓝色布景，再加上案牍和图标的向上淡出淡入的动画，整个进程不回给用户很枯燥的感觉，边框，百分比及loading都在改动，相对是比较充实。
最终来一个用圆环展现进展的方式，作用也是十分简练舒畅。
源码在线预览
完毕
今日全体的按钮交互共享就完毕了，信任看到这些作用会给在开发中带来必定的启示吧，下次再有老板或事务方说你这个作用还不行炫的时分，拿出这份作用，惊呆掉他们的下巴。但是日常前端开发都是还原规划稿，规划稿不必定如此，但是在合适的场景能够给他们参阅，好的交互作用给用户的感觉是很棒的，咱们完结更好的交互作用给到用户也是很棒的感觉，耶～
看完本文假如觉得有用，记得点个赞支撑，保藏起来说不定哪天就用上啦～
那些你不知道的炫酷交互作用系列：
- 那些你不知道的炫酷按钮
- 那些你不知道的炫酷导航
专心前端开发，共享前端相关技能干货，大众号：南城大前端（ID: nanchengfe）
参阅
gsap官网
aaroniker
tin-fung-hk
