🖥 Environment Support

| IE / Edge | Firefox | Chrome | Safari | Electron | | --- | --- | --- | --- | --- | | IE8+, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

📦 Install

npm install parabola-js

yarn add parabola-js

https://cdn.jsdelivr.net/npm/[email protected]/lib/parabola.js

参数

源自 zhangxinxu(.com) http://www.zhangxinxu.com/wordpress/?p=3855，做了些许更改

| param | type | |------------|----------------| | element | Node | | target | Node | | options? | object |

| options | type | default | description | |------------|----------------|---------|----------------| | speed | number | 166.67 | A每帧移动的像素大小，每帧（对于大部分显示屏）大约16~17毫秒 | curvature | number | 0.001 | 曲率， 实际指焦点到准线的距离，你可以抽象成曲率，这里模拟扔物体的抛物线，因此是开口向下的 | endScale | string | 1 | 缩放

🔨 抛物线

import React, { Component, createRef } from 'react';
import Parabola from 'parabola-js'
import styles from './pjs.less';

class ParabolaDemo extends Component {
  constructor() {
    super();
    this.wrap = createRef();
    this.item1 = createRef();
    this.item2 = createRef();
  }

  handleClick = e => {
    const rect = this.wrap.current.getBoundingClientRect();
    const diffX = e.clientX - rect.left + this.wrap.current.scrollLeft;
    const diffY = e.clientY - rect.top + this.wrap.current.scrollLeft;
    this.item2.current.style.left = diffX + 'px';
    this.item2.current.style.top = diffY + 'px';
    
+   new Parabola(this.item1.current, this.item2.current).init()
  }

  render() {
    return (
      <div>
        抛物线测试
        <hr/>
        <div ref={this.wrap} className={styles.wrap} onClick={this.handleClick}>
          <div ref={this.item1} className={styles.item1} />
          <div ref={this.item2} className={styles.item2} />
        </div>
      </div>
    )
  }
}

export default ParabolaDemo;

🔨 购物车demo

by zhangxinxu(.com) https://www.zhangxinxu.com/study/201312/js-parabola-shopping.html

🔗 Links

• 抛物线 demo
• blog