Скрипт маятника

@Master_Yi · Регистрация: 22.12.2013

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

Задача вероятно простая, но я не могу ее решить...
Я лазил по интернету и нашел много интересного, но в итоге что-то не работает, а что-то работает не так как нужно.

Вся идея в том что маятник держится на пружине или веревочке, которая в свою очередь его и передвигает. Обычный же "-webkit-transform: rotate(90deg);" покрутит картинку не относительно конца ниточки, а относительно центра картинки.

Подскажите пожалуйста, как сделать скрипт маятника?
Благодарю за внимание.

Добавлено через 32 минуты
Кажется я нашел что-то полезное, библиотеку http://ricostacruz.com/jquery.transit/
Там есть такая функция:

JavaScript
1
2
3
4
5
$('.cont_top_lamp')
  .transition({ rotate: '-25deg' }, 0)
  .css({ transformOrigin: '100px 0px' })
  .transition({ rotate: '25deg' }, 2000, 'ease')
  .transition({ rotate: '-25deg' }, 2000, 'ease')

Так вот вопрос, как зациклить этот скрипт до бесконечности?

@Firework · 30.06.2015, 12:59

Сообщение от Master_Yi

Так вот вопрос, как зациклить этот скрипт до бесконечности?

Можно с помощью CSS3 без всяких библиотек

HTML5
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>transform-origin</title>
  <style>
   div {
    display: inline-block;
    transform-origin: 50% 48px;
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
   }
   @-webkit-keyframes spin {
        0% {
          -webkit-transform:rotate(0deg);
        }
        25% {
          -webkit-transform:rotate(30deg);
        }
        50% {
          -webkit-transform:rotate(0deg);
        }
        75% {
          -webkit-transform:rotate(-30deg);
        }
        100% {
          -webkit-transform:rotate(0deg);
        }
    }
    @keyframes spin {
        0% {
          transform:rotate(0deg);
        }
        25% {
          transform:rotate(30deg);
        }
        50% {
          transform:rotate(0deg);
        }
        75% {
          transform:rotate(-30deg);
        }
        100% {
          transform:rotate(0deg);
        }
    }
  </style>
 </head>
 <body>
  <div><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRO6R3kTVSZYyio__UBOG_Q5-MbMEFWHEltREH-i7GNFUSUHRcW" alt=""></div>
 </body>
</html>

@Master_Yi · 30.06.2015, 15:00 **[ТС]**

Сообщение от Firework

Можно с помощью CSS3 без всяких библиотек

Спасибо конечно, так можно, но первое: это наверное поддерживается не всеми браузерами.
А второе: движение не совсем как у маятника, нет ускорения движения и замедления его.

Так что вопрос остается прежним, как зациклить скрипт выше?

@JokerNN · 30.06.2015, 15:45

Master_Yi, библиотека делает то же самое, так что работать будет в тех же браузерах
http://caniuse.com/#feat=css-animation вот список браузеров, которые это поддерживают

http://plnkr.co/edit/QZ9Fqt1fw... ?p=preview - вот вариант Firework с нелинейной скоростью анимации

@Master_Yi · 30.06.2015, 15:48 **[ТС]**

JokerNN, Отлично, как же я сразу не допер что оно работает точно так же...
Спасибо большое.
А не могли бы вы еще обьяснить почему все так ненавидят библиотеки и желают обходить их всеми возможными путями?

@JokerNN · 30.06.2015, 15:58

Сообщение от Master_Yi

А не могли бы вы еще обьяснить почему все так ненавидят библиотеки и желают обходить их всеми возможными путями?

Это сложный вопрос

От себя отвечу, что не надо ненавидеть библиотеки сами по себе.
У библиотек есть как плюсы (увеличение скорости и простоты разработки), так и минусы (оверхед в виде кода, который увеличивает размер скриптов на клиенте и может негативно повлиять на производительность).
И тут уже каждый для себя, и самое главное для задачи, решает что больше перевешивает - плюсы или минусы.
Для каких-то задач можно взять всё готовое и не беспокоиться.
А для каких-то и свои фреймворки пишут.

В данном случае вот Firework подумал, что не стоит тащить целую JS библиотеку(которая к тому же от jquery зависит) для задачи, которую можно средствами CSS решить (да и кода не очень много). Я с этим тоже согласен.
Кому-то может наоборот показаться. А в каких-то случаях может реально удобнее и практичнее будет воспользоваться этой либой.

Новые блоги и статьи Все статьи Все блоги /
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .

@JokerNN 134 / 130 / 57 Регистрация: 29.12.2011 Сообщений: 359
	30.06.2015, 15:45
	Сообщение было отмечено Master_Yi как решение Решение Master_Yi, библиотека делает то же самое, так что работать будет в тех же браузерах http://caniuse.com/#feat=css-animation вот список браузеров, которые это поддерживают http://plnkr.co/edit/QZ9Fqt1fw... ?p=preview - вот вариант Firework с нелинейной скоростью анимации 1

@Master_Yi 13 / 10 / 3 Регистрация: 22.12.2013 Сообщений: 378
	30.06.2015, 15:48 [ТС]
	JokerNN, Отлично, как же я сразу не допер что оно работает точно так же... Спасибо большое. А не могли бы вы еще обьяснить почему все так ненавидят библиотеки и желают обходить их всеми возможными путями? 0

Скрипт маятника

Решение