关于前端:那些你不知道的炫酷按钮交互效果

在日常开发中必定都遇到过不少有按钮交互的中央，但你有用到什么炫酷的交互成果吗？日常开发中想必最多的就是点击按钮背景文字变色，暗影，按钮按下，加载中之类的成果，绝对都比拟平平无奇，都是一些循序渐进的成果。一个好的前端页面在实现设计图的同时，如果也有极强的与用户交互成果，那么给用户带来的体验是极好的。近期整顿了一组绝对炫酷前端按钮交互动画，明天分享给大家。

明天分享的次要内容来源于 [Aaron Iker
](https://github.com/aaroniker)，有趣味的能够去看看原设计。为不便国内拜访，本文有稍加整顿批改，波及到的代码较多，文中只展现外围局部代码，残缺代码可在文末码上掘金看源码。特地阐明，因波及细节的动画比拟多，所以导致 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 都在变动，绝对是比拟空虚。

这个成果可能有人会说按钮元素太多了，那么看上面这个绝对简洁吧，如果是上传能够扭转箭头的方向，由下往上过渡实现。

最初来一个用圆环展现进度的模式，成果也是十分简洁难受。

https://code.juejin.cn/pen/71…

明天整体的按钮交互分享就完结了，置信看到这些成果会给在开发中带来肯定的启发吧，下次再有老板或业务方说你这个成果还不够炫的时候，拿出这份成果，惊呆掉他们的下巴。然而日常前端开发都是还原设计稿，设计稿不肯定如此，然而在适宜的场景能够给他们参考，好的交互成果给用户的感觉是很棒的，咱们可能实现更好的交互成果给到用户也是很棒的感觉，耶～

看完本文如果感觉有用，记得点个赞反对，珍藏起来说不定哪天就用上啦～

专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）

gsap 官网

aaroniker

tin-fung-hk

关于前端:那些你不知道的炫酷按钮交互效果

珍藏按钮

公布按钮

按钮点星成果

删除按钮

点赞按钮

提交按钮

进度按钮

源码在线预览

完结

参考