README
drop-animation
浏览器中的掉落动画 🎾
Install
npm install drop-animation --save
Start
import Dropper from 'drop-animation';
// 新建实例
function onClick() {
new Dropper({
element: '<div class="dropper"></div>',
startPosition: {
x: x + width / 2,
y: y + height / 2,
},
endPosition,
width,
height,
});
}
Document
new Dropper(Object opts)
参数 Object opts:
属性 | 类型 | 是否必填 | 默认值 | 说明 |
---|---|---|---|---|
element | Element | String |
是 | - | 掉落元素 |
container | Element |
否 | document.body |
父级容器 |
startPosition.x | Number |
否 | 0 |
起点位置横坐标,单位:px |
startPosition.y | Number |
否 | 0 |
起点位置纵坐标,单位:px |
endPosition.x | Number |
否 | 0 |
终点位置横坐标,单位:px |
endPosition.y | Number |
否 | 0 |
终点位置纵坐标,单位:px |
width | Number |
否 | 0 |
掉落元素宽度,单位:px |
height | Number |
否 | 0 |
掉落元素高度,单位:px |
duration | Number |
否 | 600 |
掉落时间,单位:ms |
jumpHeight | Number |
否 | 60 |
弹跳的高度,单位:px |
scale | Number |
否 | 1 |
缩放值 |
rotate | Number |
否 | 360 |
旋转度数 |
onEnd | Function |
否 | () => {} |
动画结束回调 |
endAnimation | Boolean |
否 | true |
是否需要收尾动画 |
endRotate | Number |
否 | 360 |
收尾旋转角度 |
endJumpHeight | Number |
否 | 40 |
收尾弹跳的高度,单位:px |
endAnimationDuration | Number |
否 | 400 |
收尾动画时间,单位:ms |
Demo
cd demo
npm install
npm start
访问 http://localhost:3000 查看