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

Как сделать анимацию вращающейся монеты

  • автор:

Как создать эффект (анимацию) вращения по оси Y объекта формы монеты с помощью СSS?

вращение монеты

Была задумка сделать вращение круга, который по оси Z растягивался б на 20+ px (чтобы видно было толщину, как у ребра монеты), но как только я начал выставлять элементы по оси Z, элементы стали вращаться по совсем другой траектории. Как можно получить вышеописанный эффект с помощью CSS/JS/SVG? Второй вопрос: сейчас я использую setTimeout из-за того, что мои классы немедленно присваиваются и я вижу поворот по оси Y только 1 раз из 8 загрузок страницы. Как инициализировать поворот через класс без функции setTimeout , чтобы это срабатывало с каждой загрузкой страницы?

document.addEventListener('DOMContentLoaded', function() < //document.querySelector(".side").classList.add('active'); function flipCircle(n)< setTimeout( ()=>, 50); > var sides = document.getElementsByClassName("side"); for (var i = 0; i < sides.length; i++) < flipCircle(sides[i]); >>);
@font-face < font-family: 'Digital Numbers'; font-style: normal; font-weight: 400; src: local('Digital Numbers'), url('https://fonts.cdnfonts.com/s/15953/DigitalNumbers-Regular.woff') format('woff'); >* < margin: 0; padding: 0; box-sizing: border-box; >body < width: 100vw; height: 100vh; overflow: hidden; background: #0a0a0a; >.text < position: absolute; top: 0;left: 0; width: 100%; height: 100%; overflow-wrap: break-word; word-wrap: break-word; >h1 < display: inline; font-size: 260px; line-height: 290px; margin: 0; padding: 0; animation: glow 1.5s ease-in-out infinite; font-family: 'Digital Numbers', sans-serif; >.flip < margin: calc(50vh - 250px) auto; width: 500px; height: 500px; perspective: 700px; >.container < position: relative; width: 100%; height: 100%; >.side < width: 100%; height: 100%; position: absolute; top:0;left:0; backface-visibility: hidden; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; animation: border-glow 1.5s ease-in-out infinite; border: 100px solid black; border-radius: 100%; transition: transform 30s cubic-bezier(1,.01,1,.5), border 500ms ease-in-out;; transform-style: preserve-3d; >.shuf-front < background-image: url('https://i.ibb.co/FgBcMfm/shuf-771.png'); >.shuf-back < transform: rotateY(180deg) scale(-1, 1); background-image: url('https://i.ibb.co/FgBcMfm/shuf-771.png'); >.active < transform: rotateY(calc(-2000 * 360deg)); >/*rotateX(calc(2000 * 360deg)) */ @keyframes glow < 0%,100%< text-shadow:0 0 30px red; >25% < text-shadow:0 0 50px orange; >50% < text-shadow:0 0 50px forestgreen; >75% < text-shadow:0 0 50px cyan; >> @keyframes border-glow < 0%,100%< border: 10px solid red; >25% < border: 20px solid orange; >50% < border: 10px solid forestgreen; >75% < border: 20px solid blue; >> @keyframes wobble < 0%,100%< transform:rotate3d(1,1,0,40deg); >25% < transform:rotate3d(-1,1,0,40deg); >50% < transform:rotate3d(-1,-1,0,40deg); >75% < transform:rotate3d(1,-1,0,40deg); >>
 

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

Отслеживать
highpassion
задан 5 сен 2021 в 14:28
highpassion highpassion
1,806 1 1 золотой знак 6 6 серебряных знаков 18 18 бронзовых знаков
хороший, интересный вопрос
5 сен 2021 в 14:42
@Alexandr_TT практикуюсь в CSS )))
5 сен 2021 в 14:48
5 сен 2021 в 15:54

@highpassion Замечательные, полезные ответы, пробежался по всем с (+) Вот так, хороший вопрос сгенерировал отличные ответы!

5 сен 2021 в 19:45

@highpassion При наличии нескольких сильных ответов, конфликт интересов неизбежен. Каждый считает свой ответ наилучшим. Но галочка то одна. Поэтому лучше выступать в роли самодура — Этот ответ я понимаю, он мне подходит лучше других и точка. Такое решение люди поймут. Но, на мой взгляд, сделав выбор, не стоит менять его,- перебрасывать галочку. Вот это намного обидней, чем первичный выбор. Если вам хочется как-то ещё дополнительно поблагодарить, тех кому не досталась галочка, то можно плюсануть другие сильные ответы из профиля

6 сен 2021 в 5:43

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

Монетка с ребром ��

.coin < --diameter:200px; --thickness:20px; --scale:0.75; --period:5s; --gradient: linear-gradient(gold 0%, yellow 50%, gold 100%); transform-style: preserve-3d; width: var(--diameter); height: var(--diameter); animation: spin var(--period) linear infinite; >.side < position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: gold; display: flex; align-items: center; justify-content: center; color: yellow; font-size: calc(var(--diameter) * 0.6); font-weight: bold; >.head < transform: translateZ(calc(var(--thickness) / 2)); animation: flip-head var(--period) linear infinite; >.tail < transform: translateZ(calc(0px - var(--thickness) / 2)) rotateY(180deg); animation: flip-tail var(--period) linear infinite; >.edge < position: absolute; width: var(--thickness); height: 100%; transform: translateX(calc(var(--diameter) / 2)) translateZ(calc(var(--thickness) / 2)) rotateY(90deg); transform-origin: 0 0; background-color: gold; background-image: var(--gradient); >@keyframes spin < 0% < transform: rotateY(0deg) scale(var(--scale)); >100% < transform: rotateY(360deg) scale(var(--scale)); >> @keyframes flip-tail < 0% < background-image: var(--gradient); color: transparent; >50% < background-image: none; color: yellow; >100% < background-image: var(--gradient); color: transparent; >> @keyframes flip-head < 0% < background-image: none; color: yellow; >50% < background-image: var(--gradient); color: transparent; >100% < background-image: none; color: yellow; >>

В основе решения идея, реализованная в первом ответе от Andrey Fedorov — плавная анимация вращения вокруг оси Y, и пошаговая смена фона.

Однако, если смотреть на объект строго в направлении оси Z, то можно добиться иллюзии объема за счет синхронного вращения двух скругленных плоскостей и вертикального прямоугольника («ребра»), проходящего через центры кругов под углом 90 градусов. Ширина прямоугольника должна быть равна расстоянию между кругами по оси Z.

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

схема анимации

�� Ниже схематическая анимация с полупрозрачными элементами:

.coin < --diameter:200px; --thickness:20px; --scale:0.75; --period:5s; --gradient: linear-gradient(blue 0%, blue 100%); transform-style: preserve-3d; width: var(--diameter); height: var(--diameter); animation: spin var(--period) linear infinite; >.side < opacity:0.75; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: red; display: flex; align-items: center; justify-content: center; color: transparent; font-size: calc(var(--diameter) * 0.6); >.head < transform: translateZ(calc(var(--thickness) / 2)); animation: flip-head var(--period) linear infinite; >.tail < transform: translateZ(calc(0px - var(--thickness) / 2)) rotateY(180deg); animation: flip-tail var(--period) linear infinite; >.edge < opacity:0.75; position: absolute; width: var(--thickness); height: 100%; transform: translateX(calc(var(--diameter) / 2)) translateZ(calc(var(--thickness) / 2)) rotateY(90deg); transform-origin: 0 0; background-color: gold; background-image: var(--gradient); >@keyframes spin < 0% < transform: rotateY(0deg) scale(var(--scale)); >100% < transform: rotateY(360deg) scale(var(--scale)); >> @keyframes flip-tail < 0% < background-image: var(--gradient); color: transparent; >50% < background-image: none; color: green; >100% < background-image: var(--gradient); color: transparent; >> @keyframes flip-head < 0% < background-image: none; color: green; >50% < background-image: var(--gradient); color: transparent; >100% < background-image: none; color: green; >>

Отслеживать
ответ дан 5 сен 2021 в 17:20
Alexey Vladimirov Alexey Vladimirov
1,519 1 1 золотой знак 4 4 серебряных знака 15 15 бронзовых знаков

очень крутой результат! самый минималистичный по объему кода, думаю, вы ближе всех подошли к оптимальному решению )

5 сен 2021 в 21:28
@highpassion Ведьмаку заплатите чеканной монетой ✅
5 сен 2021 в 21:31

@AlexeyVladimirov Отличная реализация! Спасибо. В принципе решение более-менее понятно. Контейнер с тремя объектами вращается. Внутри каждого объекта свои трансформации, анимации. Но у вас наверняка были вопросы, идеи, как это всё связать в целостную картинку. Не могли бы вы поделиться в комментариях к коду, основными идеями, тонкостями решения.

6 сен 2021 в 6:43
@Alexandr_TT +1
6 сен 2021 в 7:02

@Alexey Vladimirov благодарю. Всё внимательно прочитал, понял идею. Особая благодарность за поясняющий пример. Оч. приятно встретить человека, который умеет кратко и доходчиво объяснять. Эта такая редкость в настоящее время.

6 сен 2021 в 15:01

body < display: flex; min-height: 100vh; >div < margin: auto; width: 50vh; height: 50vh; border-radius: 100%; background-color: #D1C7BB; background-size: cover; background-repeat: no-repeat; background-image: url(https://i115.fastpic.org/thumb/2021/0905/38/_94172dc7f7cefcb43a44012c6c104438.jpeg); animation: bshit 3s infinite linear; >@keyframes bshit < from < transform: rotateY(0); background-image: url(https://i115.fastpic.org/thumb/2021/0905/38/_94172dc7f7cefcb43a44012c6c104438.jpeg); >50% < background-image: url(https://i115.fastpic.org/thumb/2021/0905/35/_41069afe25725a9574235b4b84009235.jpeg); >to < transform: rotateY(360deg); >>

Отслеживать
ответ дан 5 сен 2021 в 14:43
Andrei Fedorov Andrei Fedorov
5,809 1 1 золотой знак 9 9 серебряных знаков 31 31 бронзовый знак

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

5 сен 2021 в 14:44
А можно ли как-то назначить разные фоны для аверса/реверса? Орел и решку можно сделать?
5 сен 2021 в 14:47
@Leonid можно, это мало что мне дает. первоначальный вариант моего shuffie-flipper’a так и выглядел
5 сен 2021 в 14:53
@Leonid как я понимаю, для обеих сторон анимация начнется одновременно
5 сен 2021 в 14:55

А что не устраивает? Толщины нет? Что значит «не трехмерный круг»? И почему мало что дает такой вариант?

5 сен 2021 в 14:58

Решение с помощью canvas:

const canvas = document.getElementById('coin'); const ctx = canvas.getContext('2d'); const w = canvas.width = 600; const h = canvas.height = 180; const coinWidth = 8; const radius = Math.min(w,h)/3; const risk = 0.8; let pattern; let heads; let tails; let gurt; let pos1 = 0; let pos2 = coinWidth; let scale = 1; let direction = 0.01; let image = new Image(); image.src = 'https://as2.ftcdn.net/v2/jpg/02/15/57/69/500_F_215576902_nDCSvmb5QL3D6kHknzy9gorsFoBEFV8t.jpg'; image.onload = () => < let faceCanvas = document.createElement('canvas'); let fw = faceCanvas.width = radius*2 + 2; let fh = faceCanvas.height = radius*2 + 2; let context = faceCanvas.getContext('2d'); context.drawImage(image,28,13,210,210,0,0,fw,fh); tails = ctx.createPattern(faceCanvas, 'no-repeat'); context.drawImage(image,262,13,210,210,0,0,fw,fh); heads = ctx.createPattern(faceCanvas, 'no-repeat'); pattern = heads; context.fillStyle = '#efd894'; context.fillRect(0,0,fw,fh); for(let i=0; i < fh; i+=risk*2)< context.fillStyle = '#efd894'; context.fillRect(0,i,fw,risk); context.fillStyle = '#7b521c'; context.fillRect(0,i+risk,fw,risk); >gurt = ctx.createPattern(faceCanvas,'no-repeat'); ctx.strokeStyle = '#7b521c'; ctx.strokeWidth = 1; ctx.translate(w/2,h/2); draw(); > function draw()< ctx.clearRect(-w/2,-h/2,w,h); if(scale >= 1) < direction = -direction; [pos1,pos2] = [pos2,pos1]; >else if(scale ctx.save(); ctx.translate(pos1-(Math.abs(scale)*pos1),0); ctx.scale(scale,1); ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2 * Math.PI); ctx.translate(-radius,-radius-1); ctx.fillStyle = gurt; ctx.fill(); ctx.stroke(); ctx.restore(); ctx.save(); ctx.beginPath(); ctx.rect(0, -radius-1, coinWidth*(1-scale), radius*2+2); ctx.translate(-radius,-radius-1); ctx.fillStyle = gurt; ctx.fill(); ctx.restore(); ctx.save(); ctx.translate(pos2-(Math.abs(scale)*pos2),0); ctx.scale(scale,1); ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2 * Math.PI); ctx.translate(-radius,-radius); ctx.fillStyle = pattern; ctx.fill(); ctx.stroke(); ctx.restore(); scale += direction; requestAnimationFrame(draw); >

Спрайты. Как можно создать текстуру «вращающейся» монеты для 2D игрушки? (по кадровая анимация)

Так как я профан в рисовании, может есть какой нить простой редактор 3D моделей специально для этих целей?
Создаю что-то вроде марио, и, собственно, нужны рубины, алмазы, вода и прочие мелкие анимации, разбитые по кадру в массив картинок в файл.

Голосование за лучший ответ

Самый простой и легкий способ — ГИФ-анимация (в фотошопе) — всего 4 кадра надо)..

Александр ТрофимовМастер (1601) 11 лет назад

Так как я профан в рисовании — говорит само за себя. В том то и дело, что в фотожабе работать умею, но вот рисовать, даже, 3D примитивы, увы не получается. В фотожабе как раз с разбиением по кадру не составляет труда, просто в ряд картинки выставить (нужно каждый кадр отдельно рисовать в области в файле, а потом все в png сохранить, чтоб совместимый массив картинок с прозрачностью получился)

Похожие вопросы

Как сделать, чтобы логотип крутился как монета (анимация)?

Нужно сделать, чтобы логотип крутился как монета (анимация).

5b728aff14b60526873102.jpeg

  • Вопрос задан более трёх лет назад
  • 4506 просмотров

2 комментария

Средний 2 комментария

alex-1917

а чо ставку не пишете? за вас народ отдувается, корячится, а вы даже спасибо не говорите. чужое время стоит бабла, если вы конечно не совсем потерянный для Тостера человек.
Это задание, а не вопрос! в спам отправляю.

vilka_2009

Виолетта Морозова @vilka_2009
Пройдите курс на htmlacademy.ru по анимациям
Решения вопроса 1

snap44

Ответ написан более трёх лет назад
Нравится 16 4 комментария

Alizoda

Cosmonaut . @Alizoda Автор вопроса
Спасибо вам большое

tolfy

шикарная тема!! Мне зашло к месту как раз, спасибо

Alizoda

Cosmonaut . @Alizoda Автор вопроса
Размер логотипа 245px, как можно адаптировать?

Спасибо за пример. Сделал для своего сайта
Скажите пожалуйста.

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

Ответы на вопрос 2

ixon

https://codepen.io/anon/pen/XBQgKa
Используя css3 анимацию добавим к логотипу ссылку на анимацию coin, установим итерацию в 5 секунд и бесконечное повторение:
animation:coin 5s infinite;

.coin< display:block; background:url('https://2ch.hk/b/arch/2018-05-23/src/176403732/15270649403080.jpg'); background-size: 100% 100%; width:120px; height:120px; border-radius:50%; animation:coin 5s infinite; >

Добавим анимацию coin, изменив ширину до 0, затем вернём её в изначальное положение.
И сделаем отступ, чтобы анимация происходила относительно центра монеты.

@keyframes coin < 0% < width: 120px; margin-left:0px; >50% < width: 0px; margin-left:60px; >100% < width: 120px; margin-left:0px; >>

0x: золотая монета — анимация загрузки

Анимация загрузки с лого криптовалюты 0x расположенным по обеим сторонам вращающейся золотой монеты с отражающим полем. Монета вращается вокруг своей оси на прозрачном фоне. Округлая монета смоделирована с буртиком и рубчатым гуртом. Монета, также, иллюстрирует установленный вокруг логотипа текст в виде бинарного кода и ободок, нарисованный между текстом и логотипом криптотокена. Данное анимированное изображение состоит из 30-ти кадров. Если требуется уменьшить размер файла, количество кадров можете поменять в форме-генераторе. Но это действие может привести к плохому качеству гладкости анимации. Если вам требуется снизить количество кадров, примите во внимание, что увеличение скорости анимации поможет сделать анимацию более гладкой. Изображение вращается обратном часовой стрелке, но это возможно изменить в форме-редакторе. Самый большой размер наилучшего качества — 256 x 256 пикселей, но проект допускает выставлять размеры изображения до 512 x 512 пикселей. Если вам требуется больше возможностей создания, вы можете поправить сгенерированную иконку загрузки используя Animizer — наш редактор анимированных GIF и APNG изображений. Монету можно скачать для сайтов посвященных этому криптотокену (0x), и описывает или упоминает ее. Часто такая иконка используется в списках ICO (Initial Coin Offering) или уже выпущенных криптовалют. Также, этими изображениями отмечают то, что определенный сайт или приложение принимает эту криптовалюту в качестве платы за товары или услуги и пожертвований. Исходный файл монеты доступен в формате 3DS Max (2017, VRay) и может быть использован для 3D печати, но может потребовать некоторых изменений, в виду того, что не был оптимизирован под 3D печать.

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

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