原文链接
参考文章npm
用到了一个css-spring的库
虽然这些动画不是页面重要的部分，但是感觉这些小动画会提升页面的好感度。
npm install css-spring
- 因为要实现一个弹簧振动效果，需要有两个参数，一个是阻尼系数damping ration(em...关于什么是阻尼系数传送带)，另一个是刚度stiffness，阻尼系数决定了衰减的快慢，刚度决定了往返的周期长短。给定这两个参数和弹簧的始末位移，根据一些物理公式可以推导出任意时刻弹簧的位移，这个位移就可以当作上面的scale缩放的值，或者是translate、rotate等的值。
弹窗动效
除了放大，缩小也能这样处理，还可以应用于旋转，效果如下图所示：
旋转动
效
- 代码实现 keyframs
// 需要带单位
const keyframes = spring(
// from
{ rotate: '30deg' },
// to
{ rotate: '0deg' },
{ damping: 14, stiffness: 170, precision: 3 }
)
// toString
const keyframeCss = toString(keyframes, (property, value) => property === 'rotate'
? `transform:${property}(${value});`
: `${property}:${value};`)
API spring(start, target, options)
- start ，target
开始和结束的属性 --- 属性要带单位
{left: '10px';, background: #333;}
{left: '100px', background: #000;}
options 操作 (precision, preset, stiffness, damping)
阻尼系数damping和刚度stiffness
精度， precision (number)默认为3 四舍五入的小数
stiffness (number)基于弹簧的刚度 ，默认值为170
damping (number)基于弹簧的动画的阻尼，默认值为26-
preset (string)刚度和阻尼的预设，覆盖给定的任何刚度和阻尼值
- stiff stiffness 210, damping 20
- gentle stiffness 120, damping 14
- wobbly stiffness 180, damping 12
- noWobble stiffness 170, damping 26
API toString(keyframes, formatter)
获取spring的返回值并将其转换为css字符串
- keyframes spring() 值
- formatter 为每个属性/值组合调用的格式化程序函数
(property, value) => `${property}:${value};`
for example
0%{rotate:0deg;left:10px}
/* ... */
100%{rotate:180deg;left:20px;}
const keyframeCss = toString(keyframes, (property, value) =>
property === 'rotate'
? `transform:${property}(${value});`
: `${property}:${value};`
)
0%{transform:rotate(0deg);left:10px}
/* ... */
100%{transform:rotate(180deg);left:20px;}
-
打印出spring()返回的数据
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页面添加了一点点小的动效，感觉挺有意思的，我感觉提高了用户的体验感
在以后的页面中可以使用～
