在日常开发中，你一定遇到过不少按钮交互，但是你用过哪些炫酷的交互效果呢？在日常开发中，最常见的效果就是背景文字变色、阴影、按钮按下、点击按钮后加载效果。如果一个好的前端页面既实现了设计图，又与用户有很强的交互效果，那么它给用户带来的体验是极好的。最近整理了一套比较酷的前端按钮交互动画，今天分享给大家。今天分享的主要内容来自【AaronIker】(https://github.com/aaroniker)，感兴趣的可以查看原设计。为方便国内查阅，对本文进行了一些整理和修改。它涉及更多的代码。文中只展示了核心部分的代码。完整代码可以在文末查看源码。特别是因为涉及细节的动画比较多，CSS代码量会比较高。部分效果依赖gsap、animejs、三等动画库。如果需要在在线环境下使用，请注意整体性能影响，主要是按钮的参考和交互效果的参考。收藏按钮此交互效果适用于用户收藏或喜欢某个内容时。看下图，我们可以把动画拆分成以下几个步骤。这里的交互效果主要是星星的动画。在相互作用过程中，恒星自转和上下运动分两个阶段。星星在中间变成一个圆圈，从第二阶段跳出来。星星改变了它的颜色。而此时，星辰的神色也发生了变化，嘴角上扬。在跳星过程中，在底部添加了一个椭圆。从nothingtosomething再到nothing的过程是基于上面的主要动画流程开始编码的，这里使用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,持续时间:.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})释放按钮这个交互效果适合发布新版本，submit对于云部署等类型的功能，观察下面的动画分析动画步骤如下：当按钮被点击时，箭头开始展开和收缩。箭头的背景出现向下运动。上传后出现小云。就是按钮中箭头的伸缩效果，使用悬停按钮时也会有这个效果。--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'}]})然后创建云彩的动画，因为云彩飞出后元素被移除，所以启动一个定时器不断创建云彩。functioncreateCloud(node,parent){letelem=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)//将箭头移到可见区域外到(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轴偏差element位移量显示不同的状态文本，下面是状态文本控制代码。span{不透明度：var(--o,var(--text-normal-o));转换：translateY(var(--y,var(--text-normal-y)))translateZ(0);&.done{--o:var(--text-done-o);--y:var(--text-done-y);}}//完成状态显示到(button,{'--text-done-o':1,'--text-done-y':'0px',duration:.3,delay:.1})buttonstar效果这个交互效果适合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,},],曲率:1.2,},ease:"sine.in",});删除按钮这个交互效果适用于删除逻辑，表达删除的意思很真实。点击删除按钮时，动画效果步骤如下：点击按钮左侧的图标，在中间平移显示，改变图标形式。按钮文本淡出并隐藏。蓝纸从上到下出现，经过碎纸机图标时变为蓝色条。形状，以可视化碎纸机的功能。当蓝色条移出图标后，其下方会出现一个打勾的蓝色图标，表示执行完成。这里的代码是纯CSS实现，没有使用其他动画库。点击按钮添加一个类，在CSS中通过不同的类实现动画效果。下面的代码简单列出了几个属性的变化：.delete-button{span{opacity:var(--span-opacity,1);转换：translateX(var(--span-x,0))translateZ(0);过渡：变换.4s缓动var(--span-delay,.2s)，不透明度.3s缓动var(--span-delay,.2s)；}.trash{transform:translate(var(--trash-x,0),var(--trash-y,1px))translateZ(0)scale(var(--trash-scale,.64));}//点击&.delete后{//Copywritinghides--span-opacity:0;--span-x:16px;--跨度延迟：0s；//中心图标显示--trash-x:46px;--trash-y:2px;--垃圾规模：1；--trash-lines-opacity:0;--trash-line-scale:0;}}点赞按钮这个交互效果适用于用户点赞的场景，主要亮点是拇指的动作，完美诠释了真实场景中点赞的动作，整个动画步骤可以拆解如下：鼠标悬停时，手掌向下，拇指按下点击按钮时，拇指弹起，整个图标有微微向上的动画。单击按钮时，按钮会更改颜色。这里的文案修改是通过clicktoaddclass结合gsap实现的。首先，让我们看一下微妙的拇指动画。整个拇指由一个元素和一个伪元素实现，悬停样式点击后改变旋转角度。//当悬停未被点击时&:not(.liked){&:hover{--hand-rotate:8;--hand-thumb-1:-12deg;--hand-thumb-2:36deg;}}//default.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。基于此，效果可以稍微修改为下载按钮。交互，如下图，不过这里是卡车出现后掉落的包裹，比较适合下载场景。进度按钮这个交互效果适合按钮执行时间比较长的场景，比如上传或者下载的时候，这种功能一般遇到的比较多，大多都是加了一个加载的过程，但是下面的效果我相信可以给你新的灵感，这部分的效果比较多，就不细说了。下面整个过程就是成功后从白底到蓝底，再加上文案和图标淡入淡出的动画，整个过程不会给用户一种很枯燥的感觉。border、percentage、loading都在变化，比较饱满。对于这个效果，可能有人会说按钮元素太多了，那么看下面这个比较简单的吧。如果是上传，可以改变箭头的方向，完成从下到上的过渡。最后还有一个表格，用圆环来显示进度，效果也很简洁舒服。源码在线预览https://code.juejin.cn/pen/71...今天的整体按键交互分享到此结束。相信看到这些效果会给开发带来一些启发。下次有老板或者业务方说你的效果不够亮眼的时候，把这个效果拿出来，惊掉他们的下巴。但是日常的前端开发就是还原设计稿，不一定是这样，但是在合适的场景下可以给他们做个参考。好的交互效果给用户的感觉很好，我们可以为用户实现更好的交互效果。也是一种很棒的感觉耶~如果你看完这篇文章觉得有用，记得点赞支持哦。说不定哪天会用到~专注于前端开发，分享前端相关技术干货，公众号：南城大学ID：nanchengfe）参考gsap官网aaronikertin-fung-hk
