Question

我被要求在我们公司的应用程序中实现一些我们公司的360度照片（全景照片）。

到目前为止，我只能使图像清晰可见，然后再返回，这并没有给我们带来流畅的无尽照片循环。

我正在使用Ionic 4。

这是我当前的CSS代码

@keyframes example {
  from {
    left: 0;
  }
  to {
    left: -1350px;
  }
}

.three-sixty {
  max-width: none !important;
  position: absolute;
  height: 250px;
  animation-name: example;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

<ion-col>
  <img class="three-sixty" [src]="mainImage">
</ion-col>

我假设我需要多个带有定时动画的同一图像才能实现无尽循环？

其他信息：

图像的开头与图像的结尾非常吻合-因此，我需要确保图像从最后一个开始平滑地运行。

任何帮助将不胜感激。

Answer 1

请检查我实现的以下组件，以在最新版本的 ionic 中查看 ionic（适用于网络和移动设备）中的 360 度图像：

SCSS：

.rotatable-image {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: lightgrey;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

HTML：

<div
  class="rotatable-image"
  (mousedown)="handleMouseDown($event)"
  (ondragstart)="preventDragHandler($event)"
>
  <img
    draggable="false"
    class="rotatable-image"
    alt=""
    [src]="_dir + '/' + imageIndex + '.jpg'"
  />
  <div style="font-size: 50px">
    {{ imageIndex }}
  </div>
</div>

TS：

import {
  AfterViewInit,
  Component,
  Input,
  OnChanges,
  OnDestroy,
  OnInit,
} from '@angular/core';

// You can play with this to adjust the sensitivity
// higher values make mouse less sensitive
const pixelsPerDegree = 3;

@Component({
  selector: 'app-panoramic',
  templateUrl: './panoramic.component.html',
  styleUrls: ['./panoramic.component.scss'],
})
export class PanoramicComponent implements AfterViewInit, OnDestroy {
  // tslint:disable-next-line: variable-name
  _dir = '../../../assets/dummies/panoramic';
  // tslint:disable-next-line: variable-name
  _totalImages = 46;

  @Input()
  set dir(val: string) {
    this._dir = val !== undefined && val !== null ? val : '';
  }

  @Input()
  set totalImages(val: number) {
    this._totalImages = val !== undefined && val !== null ? val : 0;
  }

  dragging = false;
  dragStartIndex = 1;
  dragStart?: any;
  imageIndex = 1;

  ngAfterViewInit() {
    document.addEventListener(
      'mousemove',
      (evt: any) => {
        this.handleMouseMove(evt);
      },
      false
    );
    document.addEventListener(
      'mouseup',
      () => {
        this.handleMouseUp();
      },
      false
    );
  }

  ngOnDestroy() {
    document.removeEventListener(
      'mousemove',
      (evt: any) => {
        this.handleMouseMove(evt);
      },
      false
    );
    document.removeEventListener(
      'mouseup',
      () => {
        this.handleMouseUp();
      },
      false
    );
  }

  handleMouseDown(e: any) {
    this.dragging = true;
    console.log(e.screenX);
    this.dragStart = e.screenX;
    this.dragStartIndex = this.imageIndex;
  }

  handleMouseUp() {
    this.dragging = false;
  }

  updateImageIndex(currentPosition: any) {
    const numImages = this._totalImages;
    const pixelsPerImage = pixelsPerDegree * (360 / numImages);
    // pixels moved
    const dx = (currentPosition - this.dragStart) / pixelsPerImage;
    let index = Math.floor(dx) % numImages;

    if (index < 0) {
      index = numImages + index - 1;
    }
    index = (index + this.dragStartIndex) % numImages;
    if (index !== this.imageIndex) {
      if (index === 0) {
        index = 1;
      }
      this.imageIndex = index;
    }
  }

  handleMouseMove(e: any) {
    if (this.dragging) {
      this.updateImageIndex(e.screenX);
    }
  }

  preventDragHandler(e: any) {
    e.preventDefault();
  }
}

如何为Ionic App在CSS中循环播放360度图像？

1 个答案: