那些你不知道的炫酷按钮交互效果-六虎

我报名参加金石计划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",
});

删去按钮

此交互作用适用于删去逻辑，将删去的含义表述的很实在，点击删去按钮时，动画作用进程如下：

点击按钮左边图标平移居中显现并改动图标方式，按钮案牍淡出躲藏
从上往下呈现蓝色纸张通过碎纸机图标时改动为蓝色条形，形象化碎纸机的功用
蓝色条形移出图标时下方呈现打勾蓝色图标，代表履行完结

此处代码纯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;
    }
}

点赞按钮

此交互作用适用于用户点赞的场景，首要亮点是其间的大拇指的动作，完美的诠释了实在场景中点赞的动作，整个动画进程可拆解如下：

鼠标悬停时手掌往下，大拇指按下
点击按钮时，大拇指弹出，整个图标有纤细向上的动画
点击完结时，按钮变色，案牍改动
此处完结运用点击添加class结合gsap完结，首先来看纤细的大拇指动画。整个大拇指是由一个元素和一个伪元素完结，hover样式到点击后样式改动其旋转的角度即可。

// 未点击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

那些你不知道的炫酷按钮交互效果

保藏按钮

发布按钮

按钮点星作用

删去按钮

点赞按钮

提交按钮

进展按钮

源码在线预览

完毕

参阅

相关文章

从0搭建webpack5+vue3开发环境

让AI 帮你生成 git 提交信息

「源码级回答」大厂高频Vue面试题（中）

解决 Github 国内访问问题

作者信息