Skip to content

Commit

Permalink
feat(event-display): add a sample animation preset
Browse files Browse the repository at this point in the history
  • Loading branch information
9inpachi committed Jun 6, 2021
1 parent f31e66a commit e07725a
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 54 deletions.
20 changes: 6 additions & 14 deletions packages/phoenix-event-display/src/event-display.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { StateManager } from './managers/state-manager';
import { LoadingManager } from './managers/loading-manager';
import { URLOptionsManager } from './managers/url-options-manager';
import { ActiveVariable } from './helpers/active-variable';
import { AnimationPreset } from './managers/three-manager/animations-manager';

declare global {
/**
Expand Down Expand Up @@ -644,20 +645,11 @@ export class EventDisplay {

/**
* Animate scene by animating camera through the scene and animating event collision.
* @param positions Positions with duration and easing of each tween forming a path.
* @param animateEventAfterInteral Time after which to start the event collision animation.
* @param collisionDuration Duration of the event collision.
*/
public animateScene(
positions: { position: number[]; duration?: number; easing?: any }[],
animateEventAfterInteral?: number,
collisionDuration?: number
) {
this.graphicsLibrary.animateScene(
positions,
animateEventAfterInteral,
collisionDuration
);
* @param animationPreset Preset for animation including positions to go through and
* event collision animation options.
*/
public animateScene(animationPreset: AnimationPreset) {
this.graphicsLibrary.animateScene(animationPreset);
}

/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,16 @@ import {
import * as TWEEN from '@tweenjs/tween.js';
import { RendererManager } from './renderer-manager';

/** Type for animation preset. */
export interface AnimationPreset {
/** Positions with duration and easing of each tween forming a path. */
positions: { position: number[]; duration: number; easing?: any }[];
/** Time after which to start the event collision animation. */
animateEventAfterInterval?: number;
/** Duration of the event collision. */
collisionDuration?: number;
}

/**
* Manager for managing animation related operations using three.js and tween.js.
*/
Expand Down Expand Up @@ -524,19 +534,17 @@ export class AnimationsManager {

/**
* Animate scene by animating camera through the scene and animating event collision.
* @param positions Positions with duration and easing of each tween forming a path.
* @param animateEventAfterInteral Time after which to start the event collision animation.
* @param collisionDuration Duration of the event collision.
* @param animationPreset Preset for animation including positions to go through and
* event collision animation options.
*/
public animateScene(
positions: { position: number[]; duration?: number; easing?: any }[],
animateEventAfterInteral?: number,
collisionDuration?: number
) {
if (animateEventAfterInteral && collisionDuration) {
public animateScene(animationPreset: AnimationPreset) {
const { positions, animateEventAfterInterval, collisionDuration } =
animationPreset;

if (animateEventAfterInterval && collisionDuration) {
setTimeout(() => {
this.animateEventWithCollision(collisionDuration);
}, animateEventAfterInteral);
}, animateEventAfterInterval);
}

const firstTween = this.getCameraTween(
Expand Down
21 changes: 6 additions & 15 deletions packages/phoenix-event-display/src/managers/three-manager/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { ExportManager } from './export-manager';
import { ImportManager } from './import-manager';
import { SelectionManager } from './selection-manager';
import { SceneManager } from './scene-manager';
import { AnimationsManager } from './animations-manager';
import { AnimationPreset, AnimationsManager } from './animations-manager';
import { InfoLogger } from '../../helpers/info-logger';
import { EffectsManager } from './effects-manager';
import { VRManager } from './vr-manager';
Expand Down Expand Up @@ -647,20 +647,11 @@ export class ThreeManager {

/**
* Animate scene by animating camera through the scene and animating event collision.
* @param positions Positions with duration and easing of each tween forming a path.
* @param animateEventAfterInteral Time after which to start the event collision animation.
* @param collisionDuration Duration of the event collision.
*/
public animateScene(
positions: { position: number[]; duration?: number; easing?: any }[],
animateEventAfterInteral?: number,
collisionDuration?: number
) {
this.animationsManager.animateScene(
positions,
animateEventAfterInteral,
collisionDuration
);
* @param animationPreset Preset for animation including positions to go through and
* event collision animation options.
*/
public animateScene(animationPreset: AnimationPreset) {
this.animationsManager.animateScene(animationPreset);
}

/**
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Component } from '@angular/core';
import { AnimationPreset, SceneManager } from 'phoenix-event-display';
import { EventDisplayService } from '../../../services/event-display.service';

@Component({
Expand All @@ -8,20 +9,28 @@ import { EventDisplayService } from '../../../services/event-display.service';
})
export class AnimateCameraComponent {
animationPresets: {
[key: string]: {
positions: { position: number[]; duration: number }[];
animateEventAfterInterval: number;
collisionDuration: number;
};
[key: string]: AnimationPreset;
} = {
'Preset 1': {
positions: [
{
position: [11976, 7262, 11927],
duration: 1000,
},
{
position: [1000, 0, 11927],
duration: 1000,
},
{
position: [-1000, 0, 1000],
duration: 2000,
},
{
position: [11976, 7262, 11927],
position: [-5000, 0, 1000],
duration: 3000,
},
{
position: [-5000, 0, 1000],
duration: 2000,
},
{
Expand All @@ -30,25 +39,28 @@ export class AnimateCameraComponent {
},
],
animateEventAfterInterval: 3000,
collisionDuration: 2000,
collisionDuration: 2500,
},
};

animationPresetsKeys = Object.keys(this.animationPresets);

constructor(private eventDisplay: EventDisplayService) {}

animateScene(preset: string) {
const { positions, animateEventAfterInterval, collisionDuration } =
this.animationPresets[preset];

this.eventDisplay.animateScene(
positions,
animateEventAfterInterval,
collisionDuration
);
this.setDetectorOpacity(0.2);
this.eventDisplay.animateScene(this.animationPresets[preset]);
this.setDetectorOpacity(1);
}

animateCamera() {
this.eventDisplay.animateThroughEvent([11976, 7262, 11927], 3000);
}

private setDetectorOpacity(opacity: number) {
this.eventDisplay
.getThreeManager()
.getSceneManager()
.setGeometryOpacity(SceneManager.GEOMETRIES_ID, opacity);
}
}

0 comments on commit e07725a

Please sign in to comment.