From e3c1039895bc181ec7470e0f84f3c2b2e5c902e5 Mon Sep 17 00:00:00 2001 From: Marc Stammerjohann Date: Sat, 9 Feb 2019 20:06:01 +0100 Subject: [PATCH] feat(lottie): generate lottie lib --- projects/lottie/ng-package.json | 2 +- projects/lottie/package.json | 7 +- .../lottie/src/lib/lottie.component.spec.ts | 25 ------- projects/lottie/src/lib/lottie.component.ts | 47 +++++++++++-- projects/lottie/src/lib/lottie.module.ts | 4 +- .../lottie/src/lib/lottie.service.spec.ts | 12 ---- projects/lottie/src/lib/lottie.service.ts | 9 --- projects/lottie/src/lib/symbols.ts | 68 +++++++++++++++++++ projects/lottie/src/public_api.ts | 2 +- src/app/components/components.module.ts | 11 --- .../components/lottie/lottie.component.html | 2 - .../components/lottie/lottie.component.scss | 0 .../lottie/lottie.component.spec.ts | 25 ------- src/app/components/lottie/lottie.component.ts | 52 -------------- src/app/home/home.module.ts | 7 +- src/app/home/home.page.html | 7 +- src/app/home/home.page.ts | 14 +++- tsconfig.json | 7 +- 18 files changed, 141 insertions(+), 160 deletions(-) delete mode 100644 projects/lottie/src/lib/lottie.component.spec.ts delete mode 100644 projects/lottie/src/lib/lottie.service.spec.ts delete mode 100644 projects/lottie/src/lib/lottie.service.ts create mode 100644 projects/lottie/src/lib/symbols.ts delete mode 100644 src/app/components/components.module.ts delete mode 100644 src/app/components/lottie/lottie.component.html delete mode 100644 src/app/components/lottie/lottie.component.scss delete mode 100644 src/app/components/lottie/lottie.component.spec.ts delete mode 100644 src/app/components/lottie/lottie.component.ts diff --git a/projects/lottie/ng-package.json b/projects/lottie/ng-package.json index 583d6da..05eb224 100644 --- a/projects/lottie/ng-package.json +++ b/projects/lottie/ng-package.json @@ -1,6 +1,6 @@ { "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", - "dest": "../../dist/lottie", + "dest": "../../dist/@fivethree/lottie", "lib": { "entryFile": "src/public_api.ts" } diff --git a/projects/lottie/package.json b/projects/lottie/package.json index 05735b0..a5b1f09 100644 --- a/projects/lottie/package.json +++ b/projects/lottie/package.json @@ -1,8 +1,9 @@ { - "name": "lottie", + "name": "@fivethree/lottie", "version": "0.0.1", "peerDependencies": { - "@angular/common": "^7.2.0", - "@angular/core": "^7.2.0" + "@angular/common": "^7.0.0", + "@angular/core": "^7.0.0", + "lottie-web": "^5.4.3" } } \ No newline at end of file diff --git a/projects/lottie/src/lib/lottie.component.spec.ts b/projects/lottie/src/lib/lottie.component.spec.ts deleted file mode 100644 index 8653cb5..0000000 --- a/projects/lottie/src/lib/lottie.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { LottieComponent } from './lottie.component'; - -describe('LottieComponent', () => { - let component: LottieComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ LottieComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(LottieComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/projects/lottie/src/lib/lottie.component.ts b/projects/lottie/src/lib/lottie.component.ts index af65cd1..c39b489 100644 --- a/projects/lottie/src/lib/lottie.component.ts +++ b/projects/lottie/src/lib/lottie.component.ts @@ -1,19 +1,58 @@ -import { Component, OnInit } from '@angular/core'; +import { + Component, + OnInit, + ViewChild, + ElementRef, + Output, + EventEmitter, + Input +} from '@angular/core'; +import * as lottie from 'lottie-web'; +import { LottieParams, LottieAnimation } from './symbols'; @Component({ selector: 'fiv-lottie', template: ` -

- lottie works! -

+
+
`, styles: [] }) export class LottieComponent implements OnInit { + @Input() params: LottieParams; + @Input() width: number; + @Input() height: number; + + @Output() animationCreated = new EventEmitter(); + + @ViewChild('lottieContainer') lottieContainer: ElementRef; + + public viewWidth: string; + public viewHeight: string; + + private _params: LottieParams; + constructor() { } ngOnInit() { + this._params = { + autoplay: this.params.autoplay, + animationData: this.params.animationData, + container: this.params.container || this.lottieContainer.nativeElement, + loop: this.params.loop, + name: this.params.name, + path: this.params.path || '', + renderer: this.params.renderer || 'svg', + rendererSettings: this.params.rendererSettings + }; + + const animation = lottie.loadAnimation(this._params); + + this.viewWidth = this.width + 'px' || '100%'; + this.viewHeight = this.height + 'px' || '100%'; + + this.animationCreated.emit(animation); } } diff --git a/projects/lottie/src/lib/lottie.module.ts b/projects/lottie/src/lib/lottie.module.ts index 78e4e03..67edfc7 100644 --- a/projects/lottie/src/lib/lottie.module.ts +++ b/projects/lottie/src/lib/lottie.module.ts @@ -1,10 +1,10 @@ +import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { LottieComponent } from './lottie.component'; @NgModule({ declarations: [LottieComponent], - imports: [ - ], + imports: [CommonModule], exports: [LottieComponent] }) export class LottieModule { } diff --git a/projects/lottie/src/lib/lottie.service.spec.ts b/projects/lottie/src/lib/lottie.service.spec.ts deleted file mode 100644 index c57df10..0000000 --- a/projects/lottie/src/lib/lottie.service.spec.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { LottieService } from './lottie.service'; - -describe('LottieService', () => { - beforeEach(() => TestBed.configureTestingModule({})); - - it('should be created', () => { - const service: LottieService = TestBed.get(LottieService); - expect(service).toBeTruthy(); - }); -}); diff --git a/projects/lottie/src/lib/lottie.service.ts b/projects/lottie/src/lib/lottie.service.ts deleted file mode 100644 index a8c2075..0000000 --- a/projects/lottie/src/lib/lottie.service.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable({ - providedIn: 'root' -}) -export class LottieService { - - constructor() { } -} diff --git a/projects/lottie/src/lib/symbols.ts b/projects/lottie/src/lib/symbols.ts new file mode 100644 index 0000000..2658089 --- /dev/null +++ b/projects/lottie/src/lib/symbols.ts @@ -0,0 +1,68 @@ +export interface LottieParams { + autoplay?: boolean; + animationData?: any; + container?: any; + loop?: boolean | number; + name?: string; + path: string; + renderer?: 'svg' | 'canvas' | 'html'; + rendererSettings?: LottieRenderSettings; +} + +export interface LottieRenderSettings { + context: any; + scaleMode: 'noScale' | string; + clearCanvas: boolean; + progressiveLoad: boolean; + hideOnTransparent: boolean; + className: string; +} + +export interface LottieAnimation { + /** + * @param name to target a specific animation + */ + play(name?: string): void; + /** + * @param name to target a specific animation + */ + pause(name?: string): void; + /** + * @param name to target a specific animation + */ + stop(name?: string): void; + destroy(): void; + /** + * @param href usually pass as location.href. Its useful when you experience mask issue in safari where your url does not have # symbol. + */ + setLocationHref(href: string); + /** + * @param speed 1 is normal speed, plays reverse if minus + * @param name to target a specific animation + */ + setSpeed(speed: number, name?: string); + /** + * @param value frame value + * @param isFrame defines if first argument is a time based value or a frame based (default false) + */ + goToAndStop(value: number, isFrame?: boolean); + /** + * @param value frame value + * @param isFrame defines if first argument is a time based value or a frame based (default false) + */ + goToAndPlay(value: number, isFrame?: boolean); + /** + * @param direction 1 is forward, -1 is reverse + */ + setDirection(direction: 1 | -1); + /** + * @param inFrames If true, returns duration in frames, if false, in seconds + */ + getDuration(inFrames?: boolean): number; + /** + * @param segments Can contain 2 numeric values that will be used as first and last frame of the animation. + * Or can contain a sequence of arrays each with 2 numeric values. + * @param forceFlag If set to false, it will wait until the current segment is complete. If true, it will update values immediately. + */ + playSegments(segments: any[], forceFlag?: boolean); +} diff --git a/projects/lottie/src/public_api.ts b/projects/lottie/src/public_api.ts index 4d96dcc..13993fd 100644 --- a/projects/lottie/src/public_api.ts +++ b/projects/lottie/src/public_api.ts @@ -2,6 +2,6 @@ * Public API Surface of lottie */ -export * from './lib/lottie.service'; export * from './lib/lottie.component'; export * from './lib/lottie.module'; +export * from './lib/symbols'; diff --git a/src/app/components/components.module.ts b/src/app/components/components.module.ts deleted file mode 100644 index 0e7a389..0000000 --- a/src/app/components/components.module.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { LottieComponent } from './lottie/lottie.component'; -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -@NgModule({ - declarations: [LottieComponent], - imports: [CommonModule], - exports: [LottieComponent], - providers: [], -}) -export class ComponentsModule { } diff --git a/src/app/components/lottie/lottie.component.html b/src/app/components/lottie/lottie.component.html deleted file mode 100644 index 3df23e1..0000000 --- a/src/app/components/lottie/lottie.component.html +++ /dev/null @@ -1,2 +0,0 @@ -
-
\ No newline at end of file diff --git a/src/app/components/lottie/lottie.component.scss b/src/app/components/lottie/lottie.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/components/lottie/lottie.component.spec.ts b/src/app/components/lottie/lottie.component.spec.ts deleted file mode 100644 index 8653cb5..0000000 --- a/src/app/components/lottie/lottie.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { LottieComponent } from './lottie.component'; - -describe('LottieComponent', () => { - let component: LottieComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ LottieComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(LottieComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/lottie/lottie.component.ts b/src/app/components/lottie/lottie.component.ts deleted file mode 100644 index 9c4d5d4..0000000 --- a/src/app/components/lottie/lottie.component.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { Component, OnInit, ViewChild, ElementRef, Output, EventEmitter } from '@angular/core'; -import * as lottie from 'lottie-web'; - -export interface LottieParams { - autoplay?: boolean; - animationData?: any; - container: any; - loop?: boolean | number; - name?: string; - path: string; - renderer?: 'svg' | 'canvas' | 'html'; -} - -export interface LottieAnimation { - play(name?: string): void; - pause(name?: string): void; - stop(name?: string): void; - destroy(): void; -} - -@Component({ - selector: 'app-lottie', - templateUrl: './lottie.component.html', - styleUrls: ['./lottie.component.scss'] -}) -export class LottieComponent implements OnInit { - - params: LottieParams; - - @Output() animationCreated = new EventEmitter(); - - @ViewChild('lottieContainer') lottieContainer: ElementRef; - - constructor() { } - - ngOnInit() { - this.params = { - name: 'h', - container: this.lottieContainer.nativeElement, - renderer: 'canvas', - path: 'assets/lottie/empty_box.json', - loop: true, - autoplay: false, - }; - - const animation = lottie.loadAnimation(this.params); - console.log(animation); - - this.animationCreated.emit(animation); - } - -} diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts index 3681c1e..d75afeb 100644 --- a/src/app/home/home.module.ts +++ b/src/app/home/home.module.ts @@ -1,3 +1,4 @@ + import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { IonicModule } from '@ionic/angular'; @@ -5,7 +6,7 @@ import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { HomePage } from './home.page'; -import { ComponentsModule } from '../components/components.module'; +import { LottieModule } from '@fivethree/lottie'; @NgModule({ imports: [ @@ -18,8 +19,8 @@ import { ComponentsModule } from '../components/components.module'; component: HomePage } ]), - ComponentsModule + LottieModule ], declarations: [HomePage] }) -export class HomePageModule {} +export class HomePageModule { } diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html index c03aa2a..478d831 100644 --- a/src/app/home/home.page.html +++ b/src/app/home/home.page.html @@ -7,5 +7,8 @@ - - + + + + + \ No newline at end of file diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts index 4bfa4b1..083c407 100644 --- a/src/app/home/home.page.ts +++ b/src/app/home/home.page.ts @@ -1,6 +1,6 @@ -import { LottieAnimation } from './../components/lottie/lottie.component'; import { Component } from '@angular/core'; import { timer } from 'rxjs'; +import { LottieAnimation, LottieParams } from '@fivethree/lottie'; @Component({ selector: 'app-home', @@ -9,9 +9,17 @@ import { timer } from 'rxjs'; }) export class HomePage { + lottieParams: LottieParams = { + path: 'assets/lottie/empty_box.json', + renderer: 'canvas', + // autoplay: true, + loop: true + }; + onAnimationCreated(animation: LottieAnimation) { - animation.play('h'); + animation.play(); + animation.setSpeed(0.8); - timer(1000).subscribe(() => animation.pause('h')); + timer(1000).subscribe(() => animation.pause()); } } diff --git a/tsconfig.json b/tsconfig.json index b5de153..cb6ecbd 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,11 +18,8 @@ "dom" ], "paths": { - "lottie": [ - "dist/lottie" - ], - "lottie/*": [ - "dist/lottie/*" + "@fivethree/lottie": [ + "dist/@fivethree/lottie" ] } }