Skip to content

Commit

Permalink
Merge 1f51fa3 into 7cb0f22
Browse files Browse the repository at this point in the history
  • Loading branch information
daybrush committed Sep 11, 2018
2 parents 7cb0f22 + 1f51fa3 commit b3517a6
Show file tree
Hide file tree
Showing 27 changed files with 12,392 additions and 0 deletions.
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/
86 changes: 86 additions & 0 deletions packages/ng-scene/README.md
@@ -0,0 +1,86 @@
# 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 { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgSceneModule } from 'ng-scene';

@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
NgSceneModule,
],
providers: [],
bootstrap: [AppComponent]
})
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>
<div class="raindrop" from="{'left': 0, 'top': }" ng-scene-item>
</div>
<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|object||Start properties|
|to|object||End properties|
|keyframes|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"
}

0 comments on commit b3517a6

Please sign in to comment.