parabolajs's Introduction

Parabola js

🖥 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;