Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Вращение фото

Сообщений 1 страница 15 из 15

1

Всем привет, нужен скрипт для вращения фото на 360 градусов, зацикленно. Вот это фото надо вращать постоянно, ну чтобы оно крутилось по часовой стрелке https://forumstatic.ru/files/001b/d8/65/75674.png

0

2

Тоха
Cпроси на https://forumd.ru/viewforum.php?id=75 отдельной темкой... вродь уже было такое

0

3

Deff написал(а):

Тоха
Cпроси на https://forumd.ru/viewforum.php?id=75 отдельной темкой... вродь уже было такое

Нашел вот такой код, и там надо добавить позицию с возможностью перемещать в любую часть форума
код такой -

Код:
<!doctype html>
<html>
<head>
  <style>

    #my-canvas { border: 1px solid gray; }

  </style>
</head>
<body>
  <canvas id="my-canvas" width="500" height="500"></canvas>
  <script>

    var RADIAN = Math.PI / 180;

    function toRadians(degrees) {
        return degrees * RADIAN;
    }
    
    // Draws image in indicated position rotated around origin point (originX, originY).
    // Hint: when we want to rotate around image center point, origin point should be:
    //     originX = imageX + image.width / 2;
    //     originY = imageY + image.height / 2;
    //
    function drawRotated$1(context, image, imageX, imageY, originX, originY, degrees) {
        var radians = toRadians(degrees);
        context.save();                            // saves current transformation matrix (state)
      	context.translate(+originX, +originY);
        context.rotate(radians);                   // rotates the image around origin point by used translations
        context.translate(-originX, -originY);
        context.drawImage(image, imageX, imageY);  // draws the image in the position (imageX, imageY)
        context.restore();                         // restores saved transformation matrix (state)
    }
    
    // Draws image in indicated position rotated around relative origin point (originX, originY).
    // Origin point is measured from let-top image corner.
    // Hint: when we want to rotate around image center point, origin point should be:
    //     originX = image.width / 2;
    //     originY = image.height / 2;
    //
    function drawRotated$2(context, image, imageX, imageY, originX, originY, degrees) {
        drawRotated$1(context, image, imageX, imageY, imageX + originX, imageY + originY, degrees);
    }
    
    // Draws image in indicated position rotated around image center.
    //
    function drawRotated$3(context, image, imageX, imageY, degrees) {
        // we rotate image around image center (0.5 * image.width, 0.5 * image.height)
        var originX = 0.5 * image.width;
        var originY = 0.5 * image.height;
        drawRotated$2(context, image, imageX, imageY, originX, originY, degrees);
    }
    

    // Usage example:

    var canvas = document.querySelector('#my-canvas');
    var context = canvas.getContext('2d');
    
    var image = new Image();

    image.onload = function() {
        var degrees = 0;
        var callback = function () {
            context.clearRect(0, 0, canvas.width, canvas.height);
            
            // image placed in point (50, 50) and rotated around his center
            drawRotated$3(context, image, 50, 50, degrees);
           
            degrees += 1;
        };
        setInterval(callback, 10);
    };

    image.src = 'https://forumstatic.ru/files/001b/d8/65/75674.png';

  </script>
</body>
</html>

0

4

Поставил его на своем форуме внизу это выглядит так http://alfedr.mybb.ru/

0

5

и хотел бы переместить это фото по центру выше и чтобы вращающееся фото было поверх форума как стоит анимация огня, как то так)

Отредактировано Тоха (Ср, 20 Сен 2023 21:29:40)

0

6

Тоха написал(а):

Нашел вот такой код, и там надо добавить позицию с возможностью перемещать в любую часть форума
код такой -

Чот такое сложное, нормальный код через css анимацию, чот там три-пять строк

https://ru.stackoverflow.com/questions/ … угу-на-css

0

7

Тоха написал(а):

чтобы вращающееся фото было поверх форума как стоит анимация огня, как то так)

Ну поставь первым кодом по ссылке, крикни если поправить размещение нужно

Отредактировано Deff (Ср, 20 Сен 2023 21:45:08)

0

8

Deff написал(а):
Тоха написал(а):

Нашел вот такой код, и там надо добавить позицию с возможностью перемещать в любую часть форума
код такой -

Чот такое сложное, нормальный код через css анимацию, чот там три-пять строк

https://ru.stackoverflow.com/questions/ … угу-на-css

Я его ствил ранее так после этого кода все картинки начинают вращаться, а мне надо чтобы только одна вращалась

0

9

Ребята проблема решена - добавил в строке кода вот что -  #my-canvas { border: 1px solid gray;position:absolute ; z-index: 1; left: 510px; top: 190px }

+1

10

Как замедлить вращение изображения? Deff

0

11

Тему можно закрыть, всем спасибо)

0

12

IDsaya написал(а):

Как замедлить вращение изображения? Deff

Извините что перебиваю, просто измените значение цифр на большее. Чем больше значение - тем медленнее. В этом куске кода     var RADIAN = Math.PI / 180;

0

13

Deff написал(а):

Kenapa rumit sekali, kode normal lewat animasi CSS, kenapa barisnya tiga sampai lima?

https://ru.stackoverflow.com/questions/ ... uh-huh-on-css

извините, я использовал код с этого сайта
Тоха

Код:
img.rot {
  animation: 1s linear 0s normal none infinite running rot;
  -webkit-animation: 1s linear 0s normal none infinite running rot;
  width: 100px;
}
@keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Отредактировано IDsaya (Ср, 20 Сен 2023 22:16:43)

+1

14

Вот готовый рабочий код там всего лишь добавлена позиция изображения и убрана рамка в 7 строчке -

Код:
<!-- Вращение Фото-->
<!doctype html>
<html>
<head>
  <style>

    #my-canvas { border: 0px solid gray;position:absolute ; z-index: 1; left: 450px; top: 190px }

  </style>
</head>
<body>
  <canvas id="my-canvas" width="450" height="450"></canvas>
  <script>

    var RADIAN = Math.PI / 1800;

    function toRadians(degrees) {
        return degrees * RADIAN;
    }
    
    // Draws image in indicated position rotated around origin point (originX, originY).
    // Hint: when we want to rotate around image center point, origin point should be:
    //     originX = imageX + image.width / 2;
    //     originY = imageY + image.height / 2;
    //
    function drawRotated$1(context, image, imageX, imageY, originX, originY, degrees) {
        var radians = toRadians(degrees);
        context.save();                            // saves current transformation matrix (state)
      	context.translate(+originX, +originY);
        context.rotate(radians);                   // rotates the image around origin point by used translations
        context.translate(-originX, -originY);
        context.drawImage(image, imageX, imageY);  // draws the image in the position (imageX, imageY)
        context.restore();                         // restores saved transformation matrix (state)
    }
    
    // Draws image in indicated position rotated around relative origin point (originX, originY).
    // Origin point is measured from let-top image corner.
    // Hint: when we want to rotate around image center point, origin point should be:
    //     originX = image.width / 2;
    //     originY = image.height / 2;
    //
    function drawRotated$2(context, image, imageX, imageY, originX, originY, degrees) {
        drawRotated$1(context, image, imageX, imageY, imageX + originX, imageY + originY, degrees);
    }
    
    // Draws image in indicated position rotated around image center.
    //
    function drawRotated$3(context, image, imageX, imageY, degrees) {
        // we rotate image around image center (0.5 * image.width, 0.5 * image.height)
        var originX = 0.5 * image.width;
        var originY = 0.5 * image.height;
        drawRotated$2(context, image, imageX, imageY, originX, originY, degrees);
    }
    

    // Usage example:

    var canvas = document.querySelector('#my-canvas');
    var context = canvas.getContext('2d');
    
    var image = new Image();

    image.onload = function() {
        var degrees = 0;
        var callback = function () {
            context.clearRect(0, 0, canvas.width, canvas.height);
            
            // image placed in point (20, 20) and rotated around his center
            drawRotated$3(context, image, 0, 0, degrees);
           
            degrees += 1;
        };
        setInterval(callback, 10);
    };

    image.src = 'https://forumstatic.ru/files/001b/d8/65/75674.png'; 

  </script>
</body>
</html>
<!-- Окончание -->

Отредактировано Тоха (Ср, 20 Сен 2023 22:22:04)

0

15

Тоха написал(а):

Ребята проблема решена - добавил в строке кода вот что -  #my-canvas { border: 1px solid gray;position:absolute ; z-index: 1; left: 510px; top: 190px }

Ну скрипты всегда лишняя нагрузка на браузер и процессор  :dontknow:  Css делается на уровне машинного кода, а скрипты - это интерпретатор, который затем переводится в машинный код, на что тратится время и ресурсы

+1