Question

我在个人项目上工作，我有许多卡片，并希望多次垂直旋转它们，最后是一张随机卡片。我在angular2中重新创建了我的项目，并且对于如何设置旋转动画有点迷失。这就是我到目前为止......

card.component.ts：

@Component({
    selector: 'app-card',
    styleUrls: ['./card.component.css'],
    templateUrl: './card.component.html',
    animations: [
        trigger('spinCard', [
            state('inactive', style({
                transform: 'translateY(0px)'
            })),
            state('active', style({
                transform: 'translateY(100%)'
            })),
            transition('inactive => active', animate('200ms ease-in-out')),
            transition('active => inactive', animate('200ms ease-in-out'))
        ])
    ]
})
export class CardComponent { 
    @Input()
    cardState: string;
}

card.component.html：

<div class="card {{cardStyle}}" [@spinCard]="cardState">
    <div class="inside-text" id="{{cardId}}">{{cardName}}</div>
</div>

spinner.component.html：

<div class="spinner" id="spinner">

<div class="game-container">
    <div class="game-overlay"></div>
    <div class="game-area" id="game-area">
        <app-card *ngFor="let card of (cards | spinnablePipe: true)" cardState={{cardState}} cardName={{card.name}} cardId={{cardId}} cardStyle={{cardStyle}}></app-card>
    </div>
</div>

<div class="spin-layout">
    <button type="button" class="spin-btn green-btn" aria-label="Spin" (click)="animateSpin()">
        <span>S P I N</span>
    </button>
</div>

在原生JS中，我只需要requestAnimationFrame（）并通过JS更改css和html。但是，我不太确定如何使用Angular-way。

我希望能够点击一个按钮，这些卡片会在一个容器内旋转，卡片会在随机卡片上停止。

到目前为止，我最好的想法就是在容器中添加5套完全相同的卡片并为其设置动画。我不认为这是一个正确的方法，而且我也不确定如何随机化他们停止的地方。

会喜欢一些帮助！谢谢！

Answer 1

尝试下面的旋转卡示例

app.component.html

<div class="game-area">
    <div class="card" *ngFor="let card of cards" [@cardSpinner]="card.state" [style.background]="card.color">
        <p style="font-size: 24px; text-align: center;">{{card.value}}</p>
    </div>
</div>

<button type="button" class="spin-btn green-btn" aria-label="Spin" (click)="animateSpin()">
    <span>S P I N</span>
</button>

app.component.scss

.game-area {
    box-sizing: border-box;
    position: relative;
    height: 80px;
    overflow: hidden;

    .card {
        bottom: 0;
        box-sizing: border-box;
        height: 80px;
        left: 0;
        position: absolute;
        right: 0;
        width: 80px;
    }
}

app.component.ts

import { Component } from '@angular/core';
import { trigger, state, animate, transition,
  style } from '@angular/animations';

@Component({
  selector: 'ap-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [
    trigger('cardSpinner', [
      state('in', style({ opacity: 1, transform: 'translateY(0)' })),
      state('out', style({ opacity: 0, display: 'none', transform: 'translateY(-100%)' })),
      transition('in => out', [
        style({ transform: 'translateY(0)', opacity: 1 }),
        animate('0.1s', style({ transform: 'translateY(-100%)', opacity: 0 }))
      ]),
      transition('out => in', [
        style({ transform: 'translateY(100%)', opacity: 0 }),
        animate('0.1s', style({ transform: 'translateY(0)', opacity: 1 }))
      ])
    ])
  ]
})
export class AppComponent {

  currentIndex = 0;
  intervalInstance;
  cards = [
    {value: 0, state: 'out', color: '#F44336'},
    {value: 1, state: 'out', color: '#E91E63'},
    {value: 2, state: 'out', color: '#9C27B0'},
    {value: 3, state: 'out', color: '#673AB7'},
    {value: 4, state: 'out', color: '#3F51B5'},
    {value: 5, state: 'out', color: '#2196F3'},
    {value: 6, state: 'out', color: '#03A9F4'},
    {value: 7, state: 'out', color: '#00BCD4'},
    {value: 8, state: 'out', color: '#009688'},
    {value: 9, state: 'out', color: '#4CAF50'}
  ];

  animateSpin() {
    this.cards.forEach(card => card.state = 'out');
    this.currentIndex = 0;
    this.cards[this.currentIndex].state = 'in';

    this.intervalInstance = setInterval(() => {
      this.currentIndex++;
      if (this.currentIndex === this.cards.length) {
        this.currentIndex = 0;
      }
      if (this.currentIndex !== 0 ) {
        this.cards[this.currentIndex - 1].state = 'out';
      } else {
        this.cards[this.cards.length - 1].state = 'out';
      }
      this.cards[this.currentIndex].state = 'in';
    }, 100);

    const itemIndex = Math.floor((Math.random() * ((this.cards.length * 5) - this.cards.length)) + this.cards.length);
    console.log(itemIndex);
    setTimeout(() => {
      clearInterval(this.intervalInstance);
      const randomCard = this.cards.filter(card => card.state === 'in');
      console.log(randomCard);
    }, itemIndex * 100);
  }
}

老虎机的角度旋转效果2

1 个答案: