1.0.9 • Published 7 years ago
billiard-element v1.0.9
billliard-element
DEMO
https://elon-hu.github.io/billliard-element/
You can move and launch it
notice: Touch is only supported by mobile phone or phone mode in chrome
Speciality
- easy to use
- very light(7k)
- esay to customize
- support commonjs, AMD and typescript
- very fluent when element move
- all element can use it.
Install
sudo npm i billliard-element --save
Initial Position
You can set initial position by css, like this:
#billiard-element {
width: 50px;
height: 70px;
position: fixed;
/* if you haven't set "position: fixed", the plug will force it and could cause an accident */
left: 40px;
top: 40px;
}
Example
Without Framework
// import directly,this way create a global variable named "BilliardElement"
<script src="./node_modules/billiard-element/dist/billiard-element.min.js"></script>
var BilliardElement = window.BilliardElement;
// by commonjs
var BilliardElement = require('billiard-element');
// by AMD or typescript
import { BilliardElement } from 'billiard-element';
<div id="billiard-ball" style="width: 50px;height: 50px;background-color: green;">
</div>
var element = document.getElementById('billiard-ball');
var billiardEl = new BilliardElement(element);
billiardEl.setConfig({
FPS: 50,
frictionSpeed: 1000
});
billiardEl.drive(5000,320);// give a driving force
For angular4
import { NgModule } from '@angular/core';
import { BilliardElementModule } from 'billiard-element/angular';
@NgModule({
imports: [
BilliardElementModule
]
})
export class AppModule { }
// and use the directive
<div billiard-element>
</div>
if you want config it, fllow the setup
import { Component } from '@angular/core';
import { BilliardElement, BilliardConfigInterface } from 'billiard-element';
export class AppComponent {
billiardConfig: BilliardConfigInterface = {
touchDriveCoefficient: 1,
frictionSpeed: 2000
};
billiardElCreated(billiardEl: BilliardElement) {
// billiardElCreated event return the instance of BilliardElement
billiardEl.drive(4000,247);
}
}
<div [billiard-element] = "billiardConfig" (billiardElCreated) = "billiardElCreated($event)">
</div>
for angularjs
// import plug
<script src="./node_modules/billiard-element/dist/billiard-element-angularjs.min.js"></script>
// import module
var app = angular.module('myApp', [ "billiard-element" ]);
// use
<div billiard-element></div>
// or
<div billiard-element="config"></div>
app.controller('myCtrl', function($scope) {
$scope.config = {
moveAreaMarginLeft: 50,
moveAreaMarginRight: 50,
moveAreaMarginTop: 50,
moveAreaMarginBottom: 50,
FPS: 50,
billiardElCreated: function(billiardEl) {
// for get instance
billiardEl.drive(2000, 180);
}
};
});
Method of BilliardElement Instance
setConfig(config: BilliardConfigInterface): BilliardElement;
Config the instance, BilliardConfigInterface described by next.
getConfig(): BilliardConfigInterface;
Return a mirror of config parms.
drive(speed: number, angle: number): BilliardElement | void;
Drive the element move.
First parameter is the driving speed.
Second parameter is the direction of movement, for example, value 90 mean 90°.
the method not function when element moving, and return void.
updateElPosition(): BilliardElement;
After instance created, if you modify the element style
"width", "height", "top", "left", "bottom" and "right".
Just use the method to update.
BilliardConfigInterface
interface BilliardConfigInterface {
moveAreaMarginLeft?: number; // default: 0
moveAreaMarginRight?: number; // default: 0
moveAreaMarginTop?: number; // default: 0
moveAreaMarginBottom?: number; // default: 0
/*
default moving area of element is fullscreen,
the parms above is for constom it.
*/
FPS?: number; // default: 50
/*
Fps of animation.
The higher the fps value, the fluent it is, and cost more device performance.
*/
frictionSpeed?: number; // default: 1000
/* simulate friction */
touchDriveCoefficient?: number; // default: 1
/* the speed drive it by touch will multiplied by the value. */
}