实现前端弹簧动效

原文链接
参考文章npm
用到了一个css-spring的库
虽然这些动画不是页面重要的部分，但是感觉这些小动画会提升页面的好感度。

    npm install css-spring

• 因为要实现一个弹簧振动效果，需要有两个参数，一个是阻尼系数damping ration(em...关于什么是阻尼系数传送带)，另一个是刚度stiffness，阻尼系数决定了衰减的快慢，刚度决定了往返的周期长短。给定这两个参数和弹簧的始末位移，根据一些物理公式可以推导出任意时刻弹簧的位移，这个位移就可以当作上面的scale缩放的值，或者是translate、rotate等的值。

弹窗动效

除了放大，缩小也能这样处理，还可以应用于旋转，效果如下图所示：

log.png

实际应用

当然以上代码是能帮我们实现部分css
还需要将css 插入到页面中， 将css 插入到head头部，写了一个util

// 获取head 元素
const head = document.head || document.getElementsByTagName('head')[0]
// 创建一个style元素
const style = document.createElement('style')
// 这里必须显示设置style元素的type属性为text/css，否则在ie中不起作用
style.type = 'text/css'

function addCSS(cssText) {
  const textNode = document.createTextNode(cssText)
  style.appendChild(textNode)
  head.appendChild(style)
}
// 可以在外部进行引用
module.exports = {
  addCSS,
}

• 此为简化版
  原代码

• 实现

  const springStar = `.star{
  visibility: hidden;
  animation: spring-rotate .59s linear 3 forwards;
}
.star:nth-of-type(2) {
  animation-delay: .15s;
}
.star:nth-of-type(3) {
  animation-delay: .3s;
}`
const modelCss = `.modal{
  animation: spring-show .59s linear forwards;
}
`
addCSS(springStar)

总结： 对单调的h5页面添加了一点点小的动效，感觉挺有意思的，我感觉提高了用户的体验感
在以后的页面中可以使用～