Как сделать вращающуюся картинку на python
Перейти к содержимому

Как сделать вращающуюся картинку на python

  • автор:

Как сделать движение картинки снизу вверх, при наведении на неё

Мне нужно чтобы была картинка которая немного выходила из низа экрана, и при наведении на неё она сдвигалась по 3-5 пикселей вверх, тем самым создавав анимацию. Сейчас у меня получилось это:

import pygame, ctypes, time from pygame.locals import * user32 = ctypes.windll.user32 w = user32.GetSystemMetrics(0) h = user32.GetSystemMetrics(1) hc = int(h/2) wc = int(w/2) pygame.init() game_display = pygame.display.set_mode((w, h), pygame.RESIZABLE) kartinka = pygame.image.load("assets/kartinka.png") kartinkar = pygame.transform.scale(kartinka, (160, 240)) pygame.display.update() speedCard = 5 while True: InGameSPP_MOUSE_POS = pygame.mouse.get_pos() InGameSPP_MOUSE_POS_XW = InGameSPP_MOUSE_POS[0] InGameSPP_MOUSE_POS_YH = InGameSPP_MOUSE_POS[1] for event in pygame.event.get(): if event.type == QUIT: pygame.quit() quit() game_display.blit(kartinkar, ((w-1080)-175, h-(188-125))) if (InGameSPP_MOUSE_POS_XW in range(int((w-1080)-175), int((w-1080)-175+160))) and (InGameSPP_MOUSE_POS_YH in range(h-(188-125), h-(188-125)+120)): # InHands0Card print("1") newposcard0 = h-(188-125) runwhilecard0 = True while runwhilecard0 == True: time.sleep(0.05) newposcard0 -= speedCard # print(newposcard0) if newposcard0  

вот, именно такой результат как тут у меня в программе происходит. Приведённый код выше ^ не работает(

Как вращать картинку вокруг своей оси?

Author24 — интернет-сервис помощи студентам

Помогите пожалуйста!
Мне нужно что бы картинка "planet" вращалась вокруг своей оси.
Еще бы хотелось контролировать скорость и сторону вращения.
Всё что из кода есть:

1 2 3 4 5 6 7 8 9 10 11 12
from tkinter import * window = Tk() image = PhotoImage(file="planet.png").subsample(3, 3) canvas = Canvas(window, width=500, height=340, bg='black') canvas.pack() canvas.create_image(250, 150, image=image) window.mainloop()

Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Вращение объекта вокруг своей оси
Есть такой класс class TPoint(): def __init__(self): self._x = random.randint(0.

Вращать сферу вокруг центра координат, и одновременно вращать ее вокруг своей оси
Всем привет! Долблюсь о стену второй день ( Суть в том, что мне необходимо вращать сферу вокруг.

Как вращать эллипс вокруг своей оси ? (вокруг себя)
напишите код плиз я вот написал для того чтобы эллипс вращался вокруг точки, а вот еще надо.

Как вращать эллипс вокруг своей оси?
дано задание "создать приложение, отображающее движение автомобиля с вращающимися колесами." на.

Найти точку Z и вращать вокруг своей оси
Доброго времени суток, задача такая: есть спидометр Удалено модератором. Изображение загружено на.

1007 / 351 / 59
Регистрация: 28.02.2013
Сообщений: 932

Лучший ответ

Сообщение было отмечено Fudthhh как решение

Решение

Artem_Bro, как то так)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
from PIL import Image, ImageTk import tkinter as tk pil_img = Image.open("planet.png") def loading_loop(i=0): global tk_img if i == 100: return # Поворот на угол против часовой стрелки (нужно плавнее сделайте k меньше) # Если нужно в другую сторону сделайте k = -5 k = 5 rotated_pil_img = pil_img.rotate(k*i) tk_img = ImageTk.PhotoImage(rotated_pil_img) canvas.delete("all") canvas.create_image(0, 0, image=tk_img, anchor="nw") # Вызов loading_loop каждые 100 ms (нужно быстрее поменяйте на 50 и т.д.) root.after(100, loading_loop, i+1) root = tk.Tk() canvas = tk.Canvas(root, width=300, height=300, bg='black') canvas.pack() loading_loop() root.mainloop()

Изображения
Регистрация: 04.11.2022
Сообщений: 35

Михалыч, спасибо, как раз то, что мне нужно.
Но у меня есть ещё маленький вопросик: можно как-нибудь зациклить анимацию? А то я заметил что она через некоторое время становится не активной

Эксперт Python

2685 / 1591 / 513
Регистрация: 21.02.2017
Сообщений: 4,209
Записей в блоге: 1

Artem_Bro, ак условие в функции стоит, что на сотой итерации выйти из фукнции(10, 11 строки), а не добавить ее в список событий (22 строка).

Вращение 2D объекта по окружности

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

Если проще то наш алгоритм работает так.

Мы представляем окружность, где:

  1. Центр это точка, вокруг которой мы вращаем объект.
  2. Радиус — расстояние от центра до вращаемого объекта.

Давайте взглянем на рисунок ниже:

image

Дано: длинна радиуса, координаты точки вращения, угол АОВ, АВ перпендикулярен оси ОХ.
Задача: Задать вращение точки А на 360 градусов с помощью формулы.
Рассмотрим: треугольник ОАВ:
угол ОВА — прямой => треугольник ОАВ — прямоугольный треугольник;
тогда:
гипотенуза = радиусу окружности с центром в точке О
угол поворота = от 1 до 360 градусов
тогда чтобы найти катеты ОВ и АВ нужно:
АВ = радиус * cos(угла поворота),
ОВ = $inline$радиус * sin(угла поворота)$inline$
Теперь когда мы знаем размеры катетов
мы составим формулу:
для координаты по x:$inline$позиция по x = радиус * cos(угла поворота) + начальная позиция по x$inline$,
и для координаты по y: $inline$позиция по y = радиус * sin(угла поворота) + начальная позиция по y$inline$

Давайте попробуем применить формулы:

import pygame, math #colors black = (0, 0, 0) size = (500, 500) screen = pygame.display.set_mode(size) a = b = 200 clock = pygame.time.Clock() FPS = 60 for i in range(1, 361, 3): clock.tick(FPS) angle = i * 3.14 / 180 a = 100 * math.cos(angle) + 300 b = 100 * math.sin(angle) + 300 screen.fill(black) pygame.draw.circle(screen, (122, 0, 0), (int (a), int (b)), 6) pygame.display.update() 

Не сложно догадаться что делает этот код, а именно вращает наш кружок по оси, но почему лишь один раз?

Давайте вспомним уроки геометрии в седьмом классе: градусная мера угла не может превышает 360 градусов.

А если попробуем обнулять угол вращения, когда тот будет больше 360 градусов, давайте посмотрим что из этого выйдет:

import pygame, math #colors red = (122 , 0, 0) green = (0, 122, 0) black = (0, 0, 0) size = (500, 500) screen = pygame.display.set_mode(size) a = b = 200 i = 0 clock = pygame.time.Clock() FPS = 60 while True: clock.tick(FPS) for event in pygame.event.get(): if event.type == pygame.QUIT: quit() screen.fill(black) pygame.draw.circle(screen, red, (int (a), int (b)), 6) if i 360 градусов нет, а кружок прошел свой путь 

Этот код позволяет вращать кружок по оси бесконечно.

Однако у этой формулы есть один недостаток: можно вращать объекты только на 1 оборот. Это значит что нам нужна другая формула.

image

Давайте улучшим нашу формулу:

Дано:
треугольник ОАВ — прямоугольный
катет 1 = x1 — начальная координата X
катет 2 = y1 — начальная координата y

Задача:
улучшить формулу так, что-бы можно было вращать точку А на неизвестный угол.

Решение:
Из предыдущей задачи мы знаем что:
$inline$$inline$xPos = (lineLong * cos(a)) + StartPosX$inline$$inline$. => $inline$cos(a) = xPos — startPosX: (lineLong )$inline$

И теперь мы можем вывести формулу по нахождению угла a
$inline$yPos = (lineLong * sin(a)) + StartPosY$inline$ => $$display$$a = arccos((xPos — startPosX): lineLong)$$display$$.

А сейчас обновим нашу формулу и получим: $$display$$xPos = (lineLong * cos(a +b)) + startPosX$$display$$

Теперь у нас есть формула которая позволяет бесконечно вращать точку по окружности: $$display$$xPos = (lineLong * cos(a +arccos((xPos — startPosX): lineLong))) + startPosX$$display$$

Давайте напишем код, который будет вращать наш объект по нажатию на клавишу.

import pygame, math #colors black = (0, 0, 0) green = (0, 122, 0) size = (600, 600) screen = pygame.display.set_mode(size) a = b = 500 i = 0 clock = pygame.time.Clock() FPS = 60 while True: clock.tick(FPS) for event in pygame.event.get(): if event.type == pygame.QUIT: quit() keys = pygame.key.get_pressed() if keys[pygame.K_RIGHT]: angle = i * 3.14 / 180 l = math.acos((a - 400) / math.sqrt(500 ** 2 - 400 **2)) int(l) a = (100 * math.cos(angle + l)) + 400 b = (100 * math.sin(angle + l)) + 400 i -= 3 elif keys[pygame.K_LEFT]: angle = i * 3.14 / 180 l = math.acos((a - 400) / math.sqrt(500 ** 2 - 400 **2)) int(l) a = (100 * math.cos(angle + l)) + 400 # 400 - начальная точка по х и по у b = (100 * math.sin(angle + l)) + 400 i += 3 screen.fill(black) pygame.draw.circle(screen, green, (int (a), int (b)), 6) pygame.display.update() 

Примерно таком образом решается эта задача.

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

2D трансформации. Вращение — CSS: Transform (трансформация объектов)

Вращение объекта на странице — без преувеличения одна из самых полезных функций при разработке анимаций и не только. Этот эффект, будучи простым в понимании, содержит некоторые хитрости, о которых не стоит забывать во время разработки шаблона.

Вращение объекта достигается путём использования функции rotate() свойства transform . В отличие от функции перемещения, вращение не может быть описано пикселями, процентами и другими привычными единицами измерения. Для вращения объекта используются специальные «угловые» единицы, среди которых:

  • deg — Градусы. Знакомая многим единица измерения, по которой можно указать, на какой угол повернуть объект относительно его начального положения .
  • grad — Градианы. Отличительной особенностью такой единицы является количество град на один квадрант — 100. То есть полный круг описывается в 400 град.
  • rad — Радианы. Мера, при которой за одну единицу принимается угол дуги, длина которой равна радиусу окружности.
  • turn — Оборот. Количество оборотов окружности, где единица равна одному полному обороту.

Не пугайтесь этих единиц, если вы с ними не знакомы. Для большинства действий нет необходимости использовать их все, при этом в каждой единице есть свои плюсы, которые помогут выразительнее использовать функцию rotate() . Для удобства, в этом курсе мы будем использовать только привычные градусы.

Важно: для вращения объекта по часовой стрелке используются положительные значения функции rotate()

Взгляните на наложение элементов. Изменив положение в пространстве, они не стали занимать «особое» положение в потоке документов. Для потока с этими элементами ничего и не случалось. То место, в котором они находились до трансформации всё так же зарезервировано и не занимается другими элементами. Это же пространство так же не изменяется вне зависимости от значений свойства transform . Такое поведение обеспечивает корректность отображения страницы браузерами на случай, если они не поддерживают свойство transform .

Как и с перемещением, функция rotate() не является единственной функцией для поворота элемента. Существует еще несколько:

  • rotateX()
  • rotateY()
  • rotateZ()

Про rotateZ() и похожие функции будет подробнее рассказано в темах, посвящённых 3D трансформациям. Работа двух других функций в двумерной области может поначалу запутать. Как это вращать объект только по одной оси? Ответ на этот вопрос будет ближе к концу урока. А сейчас стоит понять, как именно вращаются элементы и можно ли управлять точкой, вокруг которой и произойдёт вращение.

Точка вращения

Если вы попробуете вращать любой HTML-элемент на странице, то cможете заметить, что браузер за точку вращения устанавливает центр элемента. Именно вокруг этой точки и происходит всё вращение. Это позволяет не выходить объекту за пределы своего изначального положения и является самым интуитивным способом. Скорее всего, мысленно, вы сможете перевернуть объект на 90 градусов по часовой стрелке и, еще до трансформации, определить конечный результат преобразования.

В следующих примерах ось вращения будет обозначена тёмной точкой в квадрате. Следите за тем, как вращается элемент, но не поддавайтесь гипнозу 🙂

Используя CSS мы можем произвольно изменять точку, вокруг которой будет происходить вращение. Для этого используется свойство transform-origin , оно может принимать от одного до трёх значений одновременно. Третье значение отвечает за ось z, и к ней мы вернёмся во время изучения 3D трансформаций. Поведение при указании одного или двух значений следующее:

  • Одно значение: устанавливается точка по оси x. Значение по оси y будет равняться center
  • Два значения: устанавливаются точки по оси x и по оси y

В качестве значений могут выступать проценты или специальные ключевые слова top, right, bottom, left, center. Добавим для квадрата из примера выше в качестве точки вращения левый верхний угол. Этого можно добиться двумя способами:

  • transform-origin: left top
  • transform-origin: 0% 0%

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

Обратите внимание на последний пример. В нём точка вращения вынесена за пределы самого объекта. Таким образом создается эффект, что объект перемещается не по определённой точке вращения, а вокруг неё. Попробуйте изменять значения, чтобы убедиться в понимании точки вращения объекта.

Вращение по одной оси

В самом начале урока говорилось о том, что существуют еще две функции для вращения 2D объектов:

Как можно вращать двумерный объект по одной из осей? Добавим вращение по оси x на 360 градусов c точкой вращения по центру

Для большей наглядности на объекте используется градиент. Во время изучения трехмерных объектов станет понятнее, что происходит с двумерным объектом. Он действительно крутится только по одной оси. В данном случае наклоняясь вперёд и проходя под осью x. Это похоже на качели, которые раскручивают «солнышком», только мы не видим глубину объекта. Вращение по оси y работает по тому же принципу, только визуально объект будет вращаться вокруг вертикальной оси.

У двумерных объектов нет глубины, и именно поэтому визуально происходит скорее деформация объекта, чем его вращение. Такой принцип можно использовать при создании небольших анимаций. Например, используя :hover на кнопке можно изменить угол её положения относительно пользователя. Похожим приёмом можно добиться эффекта трехмерности в двумерной плоскости. Подробнее об анимации будет в следующих курсах, но этот пример уже можно взять на вооружение для создания простых анимаций интерфейсов.

Дополнительное задание

Используя последний пример с кнопкой, попробуйте изученные свойства трансформации, чтобы увидеть, как будет вести себя объект при наведении. Скорость трансформации можно изменить в свойстве transition .

Полезные ссылки

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

Наши выпускники работают в компаниях:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *