Question

我想创建一个滑动的背景图像，就像您在此站点上看到的那样：https://chucklefish.org/。注意新背景图片每隔几秒钟就会滑动一次。

我想使用Angular的动画模块来做到这一点。

打字稿

import { Component, HostBinding, OnInit } from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition,
  // ...
} from '@angular/animations';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  animations: [
    trigger('slidingPictures',[
      state('game1',style({
        background:"url(../assets/images/game1.jpg)"
      })),
      state('game2',style({
        background:"url(../assets/images/game2.png)"
      })),
      state('game3',style({
        background:"url(../assets/images/game3.jpg)"
      })),
      transition('game1=>game2',[
        animate('1s',
        style (
          {
            transform: 'translateX(-100%)',

          }
          ))
      ]),
      transition('game2=>game3',[
        animate('1s',style({
          transform: 'translateX(-100%)',

        }))
      ]),
      transition('game3=>game1',[
        animate('1s',style({transform: 'translateX(-100%)'}))
      ])

    ]),
  ]
})
export class HomeComponent implements OnInit {
  game:string;
  gameIndex:number;
  games:string[];
  constructor() { 
    this.gameIndex = 0;

    this.games = ['game1','game2','game3'];
    this.game = this.games[this.gameIndex];

    setInterval(() => this.rotatingBackground(), 5000);

  }

  ngOnInit() {


  }

  rotatingBackground():any {
    console.log(this.gameIndex);
    this.game = this.games[this.gameIndex];
    this.gameIndex++;
    if(this.gameIndex >= this.games.length) {
      this.gameIndex = 0;
    }
    console.log(this.game);
  }


}

现在，代码的工作方式是有些图像向左滑动，但是当图像向左滑动时却出现白色背景。我希望新图像同时从右侧滑入。

Answer 1

如果您需要一次查看两张图像，则几乎需要两个div（*）。使用.css的div模拟背景非常简单

.background {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:-1;
}

如果您具有divuals div，则可以使用经典动画“ flyInOut”来模拟简单

  animations: [
    trigger('flyInOut', [
      state('in', style({ transform: 'translateX(0)' })),
      transition('void => *', [
        style({ transform: 'translateX(-100%)' }),
        animate(100)
      ]),
      transition('* => void', [
        animate(100, style({ transform: 'translateX(100%)' }))
      ])
    ])
  ]

我更喜欢订阅间隔而不创建setInterval

interval(5000).subscribe(() => {
  this.index = (this.index + 1) % this.numImages
})

请参见stackblitz

中的示例

更新2 ，我真的不知道如何使图像预加载。因此，我最好的尝试是重复div，最后一个高度等于0的

<ng-container *ngFor="let i of [0,1,2,3]">
    <div *ngIf="i==index && !loading" [@flyInOut] [ngClass]="'background div'+i">
    </div>
</ng-container>

<ng-container *ngIf="loading">
    <div style="with:0;height:0" *ngFor="let i of [1,2,3]" [ngClass]="'background div'+i">
    </div>
    <div [@flyInOut] class="background div0"></div>
</ng-container>

在间隔

    interval(5000).subscribe(() => {
      this.loading=false;
      this.index = (this.index + 1) % this.numImages
    })

更新了3 ，对此问题question on stackoverflow的答案是强烈的，我建议像这样更改ngOnInit

  index: number = 0;
  numImages: number = 4;
  imagesLoaded: number = 0;
  loading: boolean = true;
  imagesUrl = [
    "https://picsum.photos/id/402/2500/1667",
    "https://picsum.photos/id/301/2500/1667",
    "https://picsum.photos/id/302/2500/1667",
    "https://picsum.photos/id/400/2500/1667"]

  ngOnInit() {
    //preload the images
    this.imagesUrl.forEach((x, index) => {
      const image = new Image();
      image.onload = (() => {
        this.imagesLoaded++;
        this.loading = (this.imagesLoaded != this.numImages)
      })
      image.src = x
    })

    interval(5000).subscribe(() => {
      if (!this.loading)
         this.index = (this.index + 1) % this.numImages
    })
  }

（*）其他选项是将所有图像大背景合成，一个接一个，另一个为背景位置设置动画

显示滑动的背景图像

1 个答案: