Анимация для веб-галереи изображений в виде рамки - PullRequest
Новая
       50

Анимация для веб-галереи изображений в виде рамки

0 голосов
/ 17 апреля 2020

Я строю виртуальную галерею в A-рамке, я хотел бы добавить несколько «плавающих» изображений предварительного просмотра вокруг пространства, а затем при клике создать эффект увеличения, пока изображение не достигнет полного экрана.

Я провел несколько тестов без эффекта масштабирования, когда я просто делал видимым полноэкранное изображение в положении 0 0 0 и повороте 0 0 0, и в то же время делал то же самое с положением и поворотом камеры. Таким образом, камера всегда указывала на полноэкранное изображение.

Теперь я хотел бы добавить эффект анимации масштабирования, для этого, я думаю, мне нужно все изменить.

Я думал, чтобы добавьте эффект зомминга к изображению предварительного просмотра, пока он не достигнет камеры, а затем

, как только он достигнет камеры, сделает его видимым на весь экран с тем же положением и расположением, что и у камеры.

Как можно Я добавляю задержку в этот код для создания движения камеры после анимации? 

    <a-entity position="0 0 0">
    <a-curvedimage src="#thumb1" radius="45" theta-length="10" height="4.02" rotation="0 175 0" scale="1 1 1" position="0 0 0"  
                   class="intersectable" animation="startEvents: click; property: position; from: 0 0 0; to: 0 0 50; dur: 2000"  

CREATE A DELAY OF 2 SECONDS AND MATCH THE POSITION OF THE CAMERA AND THE FULL SCREEN IMAGE

 ></a-curvedimage>
         </a-entity>

Есть ли лучший способ создать этот эффект?

Спасибо

...