drop-animation

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 查看