0.0.5 • Published 5 years ago
drop-animation v0.0.5
drop-animation
浏览器中的掉落动画 🎾
Install
npm install drop-animation --saveStart
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 查看