Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add angular package #5

Merged
merged 3 commits into from Sep 15, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
13 changes: 13 additions & 0 deletions packages/ng-scene/.editorconfig
@@ -0,0 +1,13 @@
# Editor configuration, see http://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
max_line_length = off
trim_trailing_whitespace = false
16 changes: 16 additions & 0 deletions packages/ng-scene/.npmignore
@@ -0,0 +1,16 @@
node_modules/
*.DS_Store
.DS_Store
doc/
template/
example/
karma.conf.js
test/
mocha.opts
Gruntfile.js
webpack.*.js
.travis.yml
packages
release/
demo/
coverage/
83 changes: 83 additions & 0 deletions packages/ng-scene/README.md
@@ -0,0 +1,83 @@
# ng-scene [![npm version](https://badge.fury.io/js/ng-scene.svg)](https://badge.fury.io/js/ng-scene)
It is an angular component of scenejs animation library.

This supports @angular 5.x, 6.x.

* [Raindrop Demo](https://codesandbox.io/s/6vmzwl9nvz)

## Install
```bash
$ npm install ng-scene --save
```

## How to use
* Module
```js
import { NgSceneModule } from 'ng-scene';

@NgModule({
imports: [
...
NgSceneModule,
...
],
})
export class AppModule {}
```
* Component
```ts
import { Component } from '@angular/core';
import { easing } from 'ng-scene';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
easing = easing.EASE_IN_OUT;
keyframes = {
'0': {'border-width': '150px', opacity: 1, transform: 'scale(0)'},
'1': {'border-width': '0px', opacity: '0.3', transform: 'scale(0.7)'},
};
}

```
* Template
```html
<ng-scene iterationCount="infinite" [easing]="easing.EASE_IN_OUT" css autoplay>
<ng-scene-item
[duration]=1
[from]="{'border-width': '150px', opacity: 1, transform: 'scale(0)'}"
[to]="{'border-width': '0px', opacity: 0, transform: 'scale(1)'}">
<div class="raindrop"></div>
</ng-scene-item>
<div class="raindrop" [keyframes]="keyframes" [delay]=0.4 ng-scene-item>
</div>
<div class="raindrop" [keyframes]="keyframes" [delay]=0.8 ng-scene-item>
</div>
</div>
</ng-scene>
```

### Attributes
|name|type|default|description|
|---|---|---|---|
|css|boolean|false|Check to play with CSS|
|autoplay|boolean|false|Check to play automatically|
|from(ng-scene-item)|object||Start properties. only |
|tofrom(ng-scene-item)|object||End properties|
|keyframesfrom(ng-scene-item)|object||Specify properties by time. If not keyframes, use **from**, **to**, and **duration**.|
|...options|||[Check out the options](https://daybrush.github.io/scenejs/release/latest/doc/global.html#AnimatorOptions)|

### Events
The event prefix is **ng**
```html
<ng-scene-item [delay]=1 [duration]=2 (nganimate)="animate($event)" (ngplay)="play($event)" ngpaused="paused($event)">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</ng-scene-item>
```
* [ng-scene events](https://daybrush.github.io/scenejs/release/latest/doc/Scene.html#events)
* [ng-scene-item events](https://daybrush.github.io/scenejs/release/latest/doc/Scene.SceneItem.html#events)
127 changes: 127 additions & 0 deletions packages/ng-scene/angular.json
@@ -0,0 +1,127 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular-scenejs": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "",
"schematics": {},
"targets": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/angular-scenejs",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "angular-scenejs:build"
},
"configurations": {
"production": {
"browserTarget": "angular-scenejs:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "angular-scenejs:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.css"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"angular-scenejs-e2e": {
"root": "e2e/",
"projectType": "application",
"targets": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "angular-scenejs:serve"
},
"configurations": {
"production": {
"devServerTarget": "angular-scenejs:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "angular-scenejs"
}