html - 显示滑动背景图像

Question

我想创建一个滑动背景图像，就像您在这个网站上看到的那样:https://chucklefish.org/ .注意每隔几秒就会有一张新的背景图片滑入。

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

typescript

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 模拟背景很容易

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

如果你有seerals 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
    })
  }

(*)另一个选项是有一个大的背景合成，所有图像一个接一个地合成，并为背景位置设置动画