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

how to update keyframes? i try to use this way to update keyframes,but it is no change? #65

Open
qikong333 opened this issue May 15, 2020 · 3 comments

Comments

@qikong333
Copy link

qikong333 commented May 15, 2020

html

<div class="wrapper">
  <div class="circle-area">
    <ngx-scene
      #scene
      [keyframes]="keyframes2"
      fillMode="forwards"
      easing="ease-in-out"
      (sceneAnimate)="onAnimate($event)"
      (scenePlay)="onPlay($event)"
      (scenePaused)="onPaused($event)"
    >
      <div class="circles">
        <div class="circle circle1"></div>
        <div class="circle circle2"></div>
        <div class="circle circle3"></div>
      </div>
    </ngx-scene>
    <div class="player">
      <div [class]="playState" (click)="onClick()"></div>
      <input
        class="progress"
        type="range"
        [value]="time"
        min="0"
        max="100"
        (input)="onInput($event)"
      />
    </div>
  </div>
</div>

ts

keyframes2 = {};
 
 ngAfterViewInit() {
   this.keyframes2 = {
     item1: {
       0: {
         display: 'none',
       },
       1: {
         display: 'block',
         opacity: 0,
       },
       2: {
         opacity: 1,
       },
     },
     item2: {
       2: {
         opacity: 1,
       },
     },
   };
  
   const tl = new Timeline(this.scene.getItem(), this.timeline.nativeElement, {
     keyboard: true,
   });
   tl.on('select', (e: SelectEvent) => {
     console.log(e.selectedItem);
   });

 }
 }

image

I try to use this way to update keyframes,but it is no change?

@qikong333 qikong333 changed the title i try to use this way to update keyframes,but it is no change? how to update keyframes? i try to use this way to update keyframes,but it is no change? May 15, 2020
@qikong333 qikong333 reopened this May 15, 2020
@qikong333
Copy link
Author

ngAfterViewInit() {
    const frame = {
      item1: {
        0: {
          display: 'none',
        },
        1: {
          display: 'block',
          opacity: 0,
        },
        2: {
          opacity: 1,
        },
      },
      item2: {
        2: {
          opacity: 1,
        },
      },
    };
    const a = this.scene.getItem();
    a.set(frame);
    console.log(a);
}

is it right? This way can change it

image

@daybrush
Copy link
Owner

@qikong333

Oh sorry. The scenejs for the framework can only be set at the init.

You have to do it like you did.

@qikong333
Copy link
Author

@qikong333

Oh sorry. The scenejs for the framework can only be set at the init.

You have to do it like you did.

ok ,thinks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants