Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   CSS animation математический маятник (https://javascript.ru/forum/xhtml-html-css/77002-css-animation-matematicheskijj-mayatnik.html)

Блондинка 12.03.2019 01:13

CSS animation математический маятник
 
Есть специалисты по физике?
сделать анимацию не сложно, вопрос в другом, чисто по физике, как рассчитать траекторию маятника если известны первоначальный угол отклонения 90° длина нити 1м и ускорение под действием земного притяжения 9.8м/с.

надо высчитать на какой угол отклониться в противоположную сторону, и сколько надо времени для достижения этого угла, и второй момент - надо высчитать угол поворота через равные промежутки времени(например 0.1сек) для задания шагов анимации

просто дайте формулы для этих рассчётов.

Malleys 12.03.2019 03:45

Дифференциальное уравнение, описывающее движение маятника


Если вам не нужна большая точность (для первоначального угла 90°), то можно ограничиться таким приближением (приближённым решением уравнения, выдаёт более точные результаты от -20° до 20°, вне пределов с некой погрешностью)



<div class="pendulum"></div>

<style>

.pendulum {
	width: 1px;
	height: 200px;
	background: red;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	transform-origin: 50% 0;
	margin: auto;
}

.pendulum::after {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	margin-left: -4.5px;
	border-radius: 100%;
	background: inherit;
}

</style>

<script>(function loop() {
	document.querySelector(".pendulum").style.transform = `rotate(${0.5*Math.PI*Math.cos(Math.sqrt(9.8) * Date.now() / 1000)}rad)`;
	requestAnimationFrame(loop);
})();</script>


Если необходимы более точные результаты, воспользуйтесь разложением Фурье... en.wikipedia.org/wiki/Pendulum_(mathematics) (или просмотрите всю статью)

Графики к упомянутому маятнику wolframalpha.com

Блондинка 12.03.2019 20:59

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Математический маятник</title>
<style>
#a { width: 255px; height: 125px;  background: #cfe6cf; border-radius: 15px/12px; border: 1px solid #c0c0c0; position: absolute; }

#b { width: 25px; height: 100px; display: inline-block;  position: absolute; top: 15px; left: 122.5px; -webkit-transform-origin: 50% 0 ;-moz-transform-origin: 50% 0; -o-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: pendulum-1 1.79s linear 0s 1 normal forwards; -moz-animation: pendulum-1 1.79s linear 0s 1 normal forwards; -o-animation: pendulum-1 1.79s linear 0s 1 normal forwards; -ms-animation: pendulum-1 1.79s linear 0s 1 normal forwards; animation: pendulum-1 1.79s linear 0s 1 normal forwards; }
#c { width: 1px; height: 75px; background: #999999; position: absolute; left: 12px; }
#d { width: 1px; height: 1px; background: transparent; border-top: 15px solid #000080; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid transparent; position: absolute; left: 120px; }
#U_2e { width: 25px; height: 25px; display: inline-block; border-radius: 50%; background: -moz-radial-gradient(60% 40%, circle cover, #9999ff 0%, #0000ff 100%); background: -webkit-radial-gradient(60% 40%, circle cover, #9999ff 0%, #0000ff 100%); background: -o-radial-gradient(60% 40%, circle cover, #9999ff 0%, #0000ff 100%); background: -ms-radial-gradient(60% 40%, circle cover, #9999ff 0%, #0000ff 100%); background: radial-gradient(60% 40%, circle cover, #9999ff 0%, #0000ff 100%); position: absolute; top: 75px; }
@-webkit-keyframes pendulum-1 { 0% { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } 100% { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } }
@-moz-keyframes pendulum-1 { 0% { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } 100% { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } }
@-o-keyframes pendulum-1 { 0% { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } 100% { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } }
@-ms-keyframes pendulum-1 { 0% { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } 100% { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } }
@keyframes pendulum-1 { 0% { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } 100% { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } }
</style>
</head>
<body>
<div id="a">
<span id="d"></span>
<span id="b">
<span id="c"></span>
<span id="U_2e"></span>
</span>
</div>
</body>
</html>

вот анимация, надо высчитать правильный угол а не взятый примерно 45градусов и точное время вместо 1.79сек.
просто дайте формулы для этих расчётов.

Malleys 13.03.2019 19:00

Цитата:

Сообщение от Блондинка
просто дайте формулы для этих расчётов

Цитата:

Сообщение от Блондинка
просто дайте формулы для этих расчётов

Если вам формулы «дадут», а не «просто дадут», то это какое-то другое значение будет для вас иметь?

Цитата:

Сообщение от Блондинка
дайте формулы

Рассмотрите внимательно пост №2

Цитата:

Сообщение от Блондинка
надо высчитать правильный угол

Это математический маятник, у него крайние значения угла отклонения не меняется со временем. В начале вы написали условия для маятника, среди которых было θ₀ = 90°, значит угол отклонения с противоположной стороны тоже составляет 90°.

Цитата:

Сообщение от Блондинка
надо высчитать... точное время

Также вы указали, что g = 9.8 и l = 1, статья, которую я вам указал, содержит практически всю информацию о математическом маятнике, включая формулу для вычисления периода колебания (вперёд и назад, полное колебание).



Подставим ваши данные, получается T = 2π ⋅ sqrt(1 / 9.8) ≈ 2 (сек.)

В CSS есть функция cubic-bezier(x₁, y₁, x₂, y₂), возможно ли при помощи неё выразить половину периода колебания маятника? Да, возможно! (Я не буду описывать, как это получается, вот рабочий лист с графиками https://www.desmos.com/calculator/qxtb8h7li7)

Математический маятник
<div class="pendulum"></div>
<style>

	.pendulum {
		width: 255px;
		height: 125px;
		background: #cfe6cf;
		border-radius: 15px / 12px;
		border: 1px solid #c0c0c0;
	}

	.pendulum::before {
		content: "";
		display: block;
		width: 0;
		margin: auto;
		border: 15px solid transparent;
		border-top-color: #000080;
		border-bottom-width: 0;
	}

	.pendulum::after {
		content: "";
		display: block;
		margin: auto;
		width: 25px;
		height: 100px;
		background:
			radial-gradient(closest-side circle at 50% 87.5%, #0000ff 90%, transparent),
			linear-gradient(to right, transparent 47%, #999, transparent 53%)
		;
		--mask: radial-gradient(closest-side circle at 45% 84.5%, rgba(0, 0, 0, .3), black 136%);
		-webkit-mask: var(--mask);
		mask: var(--mask);
		transform-origin: 50% 0;
		animation: pendulum 1s alternate infinite cubic-bezier(0.36, 0, 0.646, 1);
	}

	@keyframes pendulum {
		from {
			transform: rotate(90deg);
		}

		to {
			transform: rotate(-90deg);
		}
	}

</style>


Цитата:

Сообщение от Блондинка
надо высчитать... точное время

Оно равно θ(t), где t принимает значения 0, 1/2 * T, T, 3/2 * T, 2 * T, ..., k/2 * T; k ∈ N. Для математического маятника вы получите всегда одинаковые крайние значения, но можно построить маятник, который со временем придёт к состоянию равновесия из-за трения. Пусть функция выражающая количество энергии равна f(t) и представлена при помощи графика (зелёная пунктирная линия, см. рабочий лист). Тогда можно представить маятник с затухающими колебаниями при помощи f(t) ⋅ θ(t).

Цитата:

Сообщение от Блондинка (Сообщение 504711)
То самое, что я не могла найти, всё супер.

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

Цитата:

Сообщение от Блондинка
как обновить див с анимацией по клику по самому диву без всяких кнопок

Так нажать по чему-то подразумевает, что вы попадёте на кнопку! Вы требуете странное, хотите нажать, но кнопку вам не надо! Это как хлопнуть в ладоши без ладошей! (Вы уже это где-то прочитали!) Да, оно работает с мышью, но оно не работает с клавиатуры, оно не работает на некоторых телефонах, оно не работает на Android TV, оно не воспринимается скинридерами как кнопка ... т. е. вы не сможете запустить свою анимацию заново!

Вот переделанный пример из поста №2... (с применением выше написанного)

Маятник с затухающим колебанием, запускается заново при нажатии на него
<button class="pendulum"></button>

<style>

	.pendulum {
		width: 255px;
		background: #cfe6cf;
		border-radius: 15px / 12px;
		border: 1px solid #c0c0c0;
		padding: 0;
		display: block;
	}

	.pendulum::before {
		content: "";
		display: block;
		width: 0;
		margin: auto;
		border: 15px solid transparent;
		border-top-color: #000080;
		border-bottom-width: 0;
	}

	.pendulum::after {
		content: "";
		display: block;
		margin: auto;
		margin-bottom: 8px;
		width: 25px;
		height: 100px;
		background:
				radial-gradient(closest-side circle at 50% 87.5%, #0000ff 90%, transparent),
				linear-gradient(to right, transparent 47%, #999, transparent 53%)
	;
		--mask: radial-gradient(closest-side circle at 45% 84.5%, rgba(0, 0, 0, .3), black 136%);
		-webkit-mask: var(--mask);
		mask: var(--mask);
		transform: rotate(var(--θ));
		transform-origin: 50% 0;
	}

</style>

<script>{
	const pendulumElement = document.querySelector(".pendulum");
	var startTime;

	function setNewStartTime() {
		startTime = Date.now() / 1000
	}

	setNewStartTime();

	(function loop() {
		const t = Date.now() / 1000 - startTime;
		const θ = 0.5 * Math.PI * Math.cos(Math.sqrt(9.8) * t);
		const f = Math.exp(-.25 / Math.PI * t * t);
		pendulumElement.style.setProperty("--θ", `${f * θ}rad`);
		requestAnimationFrame(loop);
	})();

	pendulumElement.addEventListener("click", setNewStartTime);
}</script>


Вы просите одно, а ожидаете другое. Формулируйте свои вопросы более точно, указывайте все подробности. Указывайте, что вы делали, что именно у вас не получается, и пусть это будет в одной теме!

UPD
Цитата:

Сообщение от Блондинка
Так?

Вы спрашиваете так, как будто это у меня что-то не получается, а вы якобы нашли решение, и вопрошаете, действительно ли мне такое подходит!

рони 13.03.2019 19:21

Malleys,
почему
Цитата:

Сообщение от Malleys
pendulumElement.style.setProperty("--θ",

а не сразу pendulumElement.style.setProperty("transform",

Malleys 13.03.2019 19:35

Цитата:

Сообщение от рони (Сообщение 504739)
Malleys,
почему
а не сразу pendulumElement.style.setProperty("transform",

Так требуется, чтобы только маятник крутился, а не подставка с маятником!

Если я применю transform к .pendulum, то повернётся подставка, поэтому я придумал своё собственное свойство --θ, которое наследуется, и поэтому доступно в .pendulum::after, где я его могу применить в объявлении transform: rotate(var(--θ)); (обратите внимание, маятник представлен при помощи псевдо-элемента)

рони 13.03.2019 19:43

Malleys,
спасибо, я упустил что там ::after, а для него нет отдельного style.

Блондинка 13.03.2019 21:14

Malleys, пока я не могу посмотреть примеры, из-за браузера, надо скопировать на "сайт" и добавить префиксы, я хотела сама все высчитать, типа зная время и угол можно высчитать вторую анимацию с задержкой, хотела сначала высчитать сколько шагов анимации надо высчитав углы для шагов 0,20,40,60,80 100%, если результат не понравится добавить шаги 10,30,50,70,90%, если опять не понравится добавить еще промежуточные шаги по 5% и тд, это для одного колебания, для второго колебания (-45град 30 град образно) добавить вторую анимацию где начальный угол не 90гр а взят из результата расчётов первой анимации, также высчитать шаги для второй анимации, потом для третьей и так до полного затухания

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

Malleys 14.03.2019 01:17

Цитата:

Сообщение от Блондинка
добавить префиксы

Вам не нужно добавлять префиксы, для этого можно использовать ⚡препроцессоры⚡, например autoprefixer https://github.com/postcss/autoprefixer или специальный скрипт, который добавит только необходимые браузеру префиксы, например, prefixfreehttps://leaverou.github.io/prefixfree/

Или вы любитель адского ☣CSS☣ с префиксами?

Цитата:

Сообщение от Блондинка
хотела сама все высчитать

Посмотрите в сторону препроцессоров, например, SASS, чтобы у вас не получился адски не управляемый ☣CSS☣. (Хотя с помощью скрипта вы тоже можете генерировать CSS в данном случае)

Блондинка 14.03.2019 09:41

Цитата:

Сообщение от Malleys
Вы просите одно, а ожидаете другое. Формулируйте свои вопросы более точно, указывайте все подробности.

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

Цитата:

Сообщение от Malleys
Оно равно θ(t), где t принимает значения 0, 1/2 * T, T, 3/2 * T, 2 * T, ..., k/2 * T; k ∈ N.

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

Цитата:

Сообщение от Malleys (Сообщение 504756)
Если вы хотели добавить префиксы, то вам ещё нужно добавить -webkit-border-radius и -moz-border-radius.
...............

исправила
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Математический маятник</title>
<style>
#mathematics_pendulum { width: 930px; height: 500px;  background: -webkit-linear-gradient(top, #ade6ad, #e6e6cc); background: -moz-linear-gradient(top, #ade6ad, #e6e6cc); background: -o-linear-gradient(top, #ade6ad, #e6e6cc); background: linear-gradient(to top, #ade6ad, #e6e6cc); -webkit-border-radius: 50px/35px; border-radius: 50px/35px; border: 1px solid #c0c0c0; position: absolute; }
#still_point { width: 1px; height: 1px; background: transparent; border-top: 45px solid #000080; border-left: 45px solid transparent; border-right: 45px solid transparent; border-bottom: 45px solid transparent; position: absolute; left: 420px; }
#pendulum {  width: 75px; height: 400px; display: inline-block; position: absolute; left: 428px; top: 45px; -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; }
#mathematics_pendulum.animation_demo #pendulum { -webkit-animation: pendulum-1 1.79s linear 0s 1 normal forwards; animation: pendulum-1 1.79s linear 0s 1 normal forwards; }
#pendulum_rod { width: 3px; height: 325px; background: #999999; border-radius: 2px; position: absolute; left: 36px; }
#point_pendulum { width: 75px; height: 75px; display: inline-block; -webkit-border-radius: 50%; border-radius: 50%; background: -webkit-radial-gradient(60% 40%, circle, #bfbfff, #00f); background: -o-radial-gradient(60% 40%, circle, #bfbfff, #00f); background: radial-gradient(circle at 60% 40%, #bfbfff, #00f); position: absolute; top: 325px; }
@-webkit-keyframes pendulum-1 { 0% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 100% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } } @keyframes pendulum-1 { 0% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 100% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } }
</style>
</head>
</head>
<body>
<div id="mathematics_pendulum" class="animation_demo">
<span id="still_point"></span>
<span id="pendulum">
<span id="pendulum_rod"></span>
<span id="point_pendulum"></span>
</span>
</div>
<script>
var a = document.querySelector("#mathematics_pendulum"); a.addEventListener("click", function() { a.classList.remove("animation_demo"); document.documentElement.clientWidth; a.classList.add("animation_demo"); });
</script>
</body>
</html>


Цитата:

Сообщение от Malleys
Вы просите одно, а ожидаете другое. Формулируйте свои вопросы более точно, указывайте все подробности.

Сейчас надеюсь что помогут вставить скрипт маятника с затухающими колебаниями в код представленный выше в этом посте, но со всеми необходимыми префиксами...
<script>{
	const pendulumElement = document.querySelector(".pendulum");
	var startTime;

	function setNewStartTime() {
		startTime = Date.now() / 1000
	}

	setNewStartTime();

	(function loop() {
		const t = Date.now() / 1000 - startTime;
		const θ = 0.5 * Math.PI * Math.cos(Math.sqrt(9.8) * t);
		const f = Math.exp(-.25 / Math.PI * t * t);
		pendulumElement.style.setProperty("--θ", `${f * θ}rad`);
		requestAnimationFrame(loop);
	})();

	pendulumElement.addEventListener("click", setNewStartTime);
}</script>

Блондинка 14.03.2019 12:42

Такой вопрос, кто нибудь делал подобные анимации с transform: rotateX ?
первоначальные значения 90deg и -90deg отличаются визуально? просто немного поэкспериментировала и особой разницы не заметила, видно что элемент вращается но трудно сказать в какую сторону.

Блондинка 14.03.2019 18:01

Цитата:

Сообщение от Malleys
Вам только нужно, чтобы анимация запускалась или маятник правильно работал или то и другое?

В самом идеальном случае надо чтобы маятник правильно работал чисто на css, и только запускался наново на js, поэтому я создала тему в этом разделе, а вопрос про про обновление дива был в другом разделе

Malleys 16.03.2019 04:54

Цитата:

Сообщение от Блондинка
надо, чтобы маятник правильно работал чисто на CSS, и только запускался заново на js

https://codepen.io/Malleys/pen/pYVzEg

https://codepen.io/Malleys/full/pYVzEg

Цитата:

Сообщение от Блондинка
Такой вопрос, кто нибудь делал подобные анимации с transform: rotateX? Первоначальные значения 90deg и -90deg отличаются визуально?

CSS-функция rotateX отвечает за вращение вокруг оси абсцисс, а вам нужно (в примере с маятником) вращение вокруг оси аппликат, за что отвечает rotateZ или rotate.

Блондинка 16.03.2019 17:56

Malleys,
просто возникла идея на основе этого маятника сделать еще что нибудь, типа лого или заголовка, когда буквы с небольшой задержкой поочерёдно начинают "падать" затухая, поэтому и спросила про ось Х

Блондинка 16.03.2019 20:40

Не могу понять что происходит, раньше нормально смотрела на codepen, сейчас никак не могу посмотреть, даже скопировала код страницы по ссылке выше, всё без результата.

Блондинка 16.03.2019 20:46

Если не трудно, скиньте в личку код По этой ссылке
Цитата:

Сообщение от Malleys
https://codepen.io/Malleys/pen/pYVzEg

ну или на мыло или вайбер

Malleys 16.03.2019 20:56

Можно скачать в виде архива https://codepen.io/Malleys/share/zip/pYVzEg

Что за браузер у вас?

Блондинка 17.03.2019 12:42

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

а если серьезно и без ёрничания, объясните мне, если кто-то говорит что "не может зайти", зачем упорно предлагать ему зайти на сторонние ресурсы и создавать ему проблемы, что мешает выложить код в теме или скинуть в личку?

Malleys 17.03.2019 17:37

Цитата:

Сообщение от Блондинка
Объясните мне, если кто-то говорит что "не может зайти", зачем упорно предлагать ему зайти на сторонние ресурсы...

Не ясно, что же означает ваше «не могу зайти»! Я подумал, что может быть у вас отключен JavaScript, и выложил ссылку на архив.

Цитата:

Сообщение от Блондинка
Что мешает выложить код в теме....

Я выкладываю код в теме, если...
  • код разумной длины написан в соответствии с различными спецификациями HTML, CSS и JS, и запускается хотя бы в последней версии Chrome (запускается)
  • это — гипотетический код, который объясняет какую-либо идею (не запускается)

Я выкладываю код в песочнице (codepen.io, codesandbox.io, а также jsfiddle.net или plnkr.co), если...
  • код слишком длинный (более 9 КБ)
  • для работы кода необходима некая файловая система
  • используется препроцессор или сборщик

Цитата:

Сообщение от Блондинка
Что мешает выложить код в теме....

Вы попросили, чтобы вам помогли написать код анимации маятника на CSS, я не думаю, что это великолепно высчитывать значения по формулам вручную, с расстановкой префиксов (вам это надо!), поэтому для этой цели я использовал препроцессор SCSS (я против подключения этого SCSS к любому проекту, но в данном случае он подходит как раз! И вы видели, какая у вас получилась неуправляемая каша/простыня, когда вы только сделали анимацию первого колебания от 90° до -45° в посте №3). Поэтому он написан при помощи препроцессора SCSS, и вы знаете, почему он опубликован в песочнице.

Блондинка 17.03.2019 23:00

Malleys,
я пыталась сегодня что-то сделать часов девять, но результата ноль, где и что не так не могу понять
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Математический маятник</title>
<style>
@import "compass/css3"; $g: 9.8; $l: 1; $beats: 10; $T: 2 * pi() * sqrt($l/$g);
.mathematics_pendulum { width: 930px; height: 500px;  background: -webkit-linear-gradient(top, #ade6ad, #e6e6cc); background: -moz-linear-gradient(top, #ade6ad, #e6e6cc); background: -o-linear-gradient(top, #ade6ad, #e6e6cc); background: linear-gradient(to top, #ade6ad, #e6e6cc); -webkit-border-radius: 50px/35px; border-radius: 50px/35px; border: 1px solid #c0c0c0; position: absolute; }
#still_point { display: inline-block; width: 1px; height: 1px; background: transparent; border: 45px solid transparent; border-top-color: #000080; position: absolute; left: 420px; }
#pendulum { width: 75px; height: 400px; display: inline-block; position: absolute; top: 45px; left: 428px; -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: pendulum #{0.5 * $T * $beats}s cubic-bezier(0.36, 0, 0.64, 1) forwards; animation: pendulum #{0.5 * $T * $beats}s cubic-bezier(0.36, 0, 0.64, 1) forwards; }

#pendulum_rod { width: 3px; height: 325px; background: #999; display: inline-block; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; position: absolute; left: 36px; }
#point_pendulum { width: 75px; height: 75px; display: inline-block; -webkit-border-radius: 50%; border-radius: 50%; background: -webkit-radial-gradient(60% 40%, circle, #bfbfff, #00f); background: -o-radial-gradient(60% 40%, circle, #bfbfff, #00f); background: radial-gradient(circle at 60% 40%, #bfbfff, #00f); position: absolute; top: 325px; }
@-webkit-keyframes pendulum { @for $k from 0 to ($beats + 1) { $t: 0.5 * $k * $T; $θ: 0.5 * pi() * cos(sqrt($g / $l) * $t)$f: pow(e(), -0.25 / pi() * $t * $t); #{100% * $k / $beats} { transform: rotate(#{$f * $θ}rad); } } } @keyframes pendulum { @for $k from 0 to ($beats + 1) { $t: 0.5 * $k * $T; $θ: 0.5 * pi() * cos(sqrt($g / $l) * $t)$f: pow(e(), -0.25 / pi() * $t * $t); #{100% * $k / $beats} { transform: rotate(#{$f * $θ}rad); } } }
</style>
</head>
</head>
<body>
<button class="mathematics_pendulum"></button>
<div class="mathematics_pendulum">
<span id="still_point"></span>
<span id="pendulum">
<span id="pendulum_rod"></span>
<span id="point_pendulum"></span>
</span>
</div>
<script>
addEventListener("click", ({ target }) => { if(target.matches(".mathematics_pendulum")) { const { parentNode } = target; parentNode.replaceChild(target, target); } } );
</script>
</body>
</html>

Блондинка 17.03.2019 23:16

Цитата:

Сообщение от Malleys
Не ясно, что же означает ваше «не могу зайти»! Я подумал, что может быть у вас отключен JavaScript, и выложил ссылку на архив.

зайти то могу, но ничего не видно - черный фон, но сверху справа только полбуквы "А" при клике на которую появляется рамка как возле полей формы при клике, тоже самое с кнопками 1,0 0,5 и 0,25 справа внизу, при клике на кнопки HTML CSS JS вообще ничего не происходит, могу перейти только на главную при клике на лого, и на твою страницу при клике на твой ник, кроме этих двух стр ничего не могу сделать.

Блондинка 17.03.2019 23:43

и архив скачать без регистрации нельзя, а зарегистрироваться не могу.

Блондинка 18.03.2019 07:50

Malleys,
возможно ли исправить код в 19 посте и скинуть в личку? только убедительная просьба, ничего не надо трогать в стиле и в теле страницы, в том смысле что не надо спаны заменять на псевдоклассы/псевдоэлементы, пусть так спаны и останутся

Malleys 19.03.2019 20:58

Вы напечатали код в посте №20...

Да, оно не работает, вам нужен sass c compass, autoprefixer и babel, которые превратили тот код в этот...

Ваш транспилированный пример
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Математический маятник</title>
	<style>

.mathematics_pendulum {
  width: 930px;
  height: 500px;
  background: linear-gradient(to top, #ade6ad, #e6e6cc);
  border-radius: 50px/35px;
  border: 1px solid #c0c0c0;
  position: absolute;
}

#still_point {
  display: inline-block;
  width: 1px;
  height: 1px;
  background: transparent;
  border: 45px solid transparent;
  border-top-color: #000080;
  position: absolute;
  left: 420px;
}

#pendulum {
  width: 75px;
  height: 400px;
  display: inline-block;
  position: absolute;
  top: 45px;
  left: 428px;
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-animation: pendulum 10.03545s cubic-bezier(0.36, 0, 0.64, 1) forwards;
  animation: pendulum 10.03545s cubic-bezier(0.36, 0, 0.64, 1) forwards;
}

#pendulum_rod {
  width: 3px;
  height: 325px;
  background: #999;
  display: inline-block;
  border-radius: 2px;
  position: absolute;
  left: 36px;
}

#point_pendulum {
  width: 75px;
  height: 75px;
  display: inline-block;
  border-radius: 50%;
  background: radial-gradient(circle at 60% 40%, #bfbfff, #0000ff);
  position: absolute;
  top: 325px;
}

@-webkit-keyframes pendulum {
  0% {
    -webkit-transform: rotate(1.5708rad);
            transform: rotate(1.5708rad);
  }
  10% {
    -webkit-transform: rotate(-1.44982rad);
            transform: rotate(-1.44982rad);
  }
  20% {
    -webkit-transform: rotate(1.13998rad);
            transform: rotate(1.13998rad);
  }
  30% {
    -webkit-transform: rotate(-0.76361rad);
            transform: rotate(-0.76361rad);
  }
  40% {
    -webkit-transform: rotate(0.43574rad);
            transform: rotate(0.43574rad);
  }
  50% {
    -webkit-transform: rotate(-0.21183rad);
            transform: rotate(-0.21183rad);
  }
  60% {
    -webkit-transform: rotate(0.08772rad);
            transform: rotate(0.08772rad);
  }
  70% {
    -webkit-transform: rotate(-0.03095rad);
            transform: rotate(-0.03095rad);
  }
  80% {
    -webkit-transform: rotate(0.0093rad);
            transform: rotate(0.0093rad);
  }
  90% {
    -webkit-transform: rotate(-0.00238rad);
            transform: rotate(-0.00238rad);
  }
  100% {
    -webkit-transform: rotate(0.00052rad);
            transform: rotate(0.00052rad);
  }
}

@keyframes pendulum {
  0% {
    -webkit-transform: rotate(1.5708rad);
            transform: rotate(1.5708rad);
  }
  10% {
    -webkit-transform: rotate(-1.44982rad);
            transform: rotate(-1.44982rad);
  }
  20% {
    -webkit-transform: rotate(1.13998rad);
            transform: rotate(1.13998rad);
  }
  30% {
    -webkit-transform: rotate(-0.76361rad);
            transform: rotate(-0.76361rad);
  }
  40% {
    -webkit-transform: rotate(0.43574rad);
            transform: rotate(0.43574rad);
  }
  50% {
    -webkit-transform: rotate(-0.21183rad);
            transform: rotate(-0.21183rad);
  }
  60% {
    -webkit-transform: rotate(0.08772rad);
            transform: rotate(0.08772rad);
  }
  70% {
    -webkit-transform: rotate(-0.03095rad);
            transform: rotate(-0.03095rad);
  }
  80% {
    -webkit-transform: rotate(0.0093rad);
            transform: rotate(0.0093rad);
  }
  90% {
    -webkit-transform: rotate(-0.00238rad);
            transform: rotate(-0.00238rad);
  }
  100% {
    -webkit-transform: rotate(0.00052rad);
            transform: rotate(0.00052rad);
  }


	</style>
</head>
<body>
	<div tabindex="0" class="mathematics_pendulum" role="button" aria-label="Проиграть анимацию маятника" onclick="restartAnimation(this)" ontouchstart="restartAnimation(this)" onkeydown="restartAnimation(this)">
		<span id="still_point"></span>
		<span id="pendulum">
			<span id="pendulum_rod"></span>
			<span id="point_pendulum"></span>
		</span>
	</div>
	<script>
		
"use strict";

function restartAnimation(target) {
    var parentNode = target.parentNode;
    var comment = document.createComment("");

    parentNode.replaceChild(comment, target);
	
    setTimeout(function() {
        parentNode.replaceChild(target, comment);
    });
};

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



Транспилированный пример с Codepen
<button class="pendulum"></button>

<style>

.pendulum {
  width: 255px;
  background: #cfe6cf;
  border-radius: 15px / 12px;
  border: 1px solid #c0c0c0;
  padding: 0;
}
.pendulum::before {
  content: "";
  display: block;
  width: 0;
  margin: auto;
  border: 15px solid transparent;
  border-top-color: #000080;
  border-bottom-width: 0;
}
.pendulum::after {
  content: "";
  display: block;
  margin: auto;
  margin-bottom: 8px;
  width: 25px;
  height: 100px;
  background: radial-gradient(closest-side circle at 50% 87.5%, #0000ff 90%, rgba(0, 0, 0, 0)), linear-gradient(to right, rgba(0, 0, 0, 0) 47%, #999999, rgba(0, 0, 0, 0) 53%);
  -webkit-mask: radial-gradient(closest-side circle at 45% 84.5%, rgba(0, 0, 0, 0.3), #000000 136%);
  mask: radial-gradient(closest-side circle at 45% 84.5%, rgba(0, 0, 0, 0.3), #000000 136%);
  transform-origin: 50% 0;
  animation: pendulum 10.03545s cubic-bezier(0.36, 0, 0.64, 1) forwards;
}

@keyframes pendulum {
  0% {
    transform: rotate(1.5708rad);
  }
  10% {
    transform: rotate(-1.44982rad);
  }
  20% {
    transform: rotate(1.13998rad);
  }
  30% {
    transform: rotate(-0.76361rad);
  }
  40% {
    transform: rotate(0.43574rad);
  }
  50% {
    transform: rotate(-0.21183rad);
  }
  60% {
    transform: rotate(0.08772rad);
  }
  70% {
    transform: rotate(-0.03095rad);
  }
  80% {
    transform: rotate(0.0093rad);
  }
  90% {
    transform: rotate(-0.00238rad);
  }
  100% {
    transform: rotate(0.00052rad);
  }
}

</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.matches"></script>
<script>

addEventListener("click", function(event) {
	const target = event.target;
	
	if(target.matches(".pendulum")) {
		const parentNode = target.parentNode;
		const comment = document.createComment("");

		parentNode.replaceChild(comment, target);
		
		setTimeout(function() {
			parentNode.replaceChild(target, comment);
		});
	}
});

</script>


Сложный вы путь выбрали, теперь транспилированный код вы будете редактировать как исходный...

Вопросы:
  • Почему среди возможных решений вы выбираете самое сложное и многословное?
  • В каком учебнике вы прочитали про ошибочное и проблемное учение «нажать на <div>», которое вы активно пытаетесь продвинуть?

Блондинка 20.03.2019 13:05

Цитата:

Сообщение от Malleys
Вопросы:
Почему среди возможных решений вы выбираете самое сложное и многословное?
В каком учебнике вы прочитали про ошибочное и проблемное учение «нажать на <div>», которое вы активно пытаетесь продвинуть?

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

Блондинка 20.03.2019 13:09

чет не работает у меня скрипт запуск анимации по клику, но зато сам маятник работает как надо.

Malleys 20.03.2019 13:59

Цитата:

Сообщение от Блондинка
чет не работает у меня скрипт запуск анимации по клику, но зато сам маятник работает как надо.

Обновил пост №24, работает?

Что за браузер у вас?

Цитата:

Сообщение от Блондинка
просто не нравится мне присутствие кнопки если можно обойтись кликом по див'у а почему не знаю.

: 🌚 Социальный троллинг?

UPD А, нет, просто среди возможных решений вы обычно выбираете самое сложное и многословное...

Цитата:

Сообщение от Блондинка
У каждого художника свои любимые фломастеры...

Так это подмена понятии, у вас нет любимой кнопки, не так ли?

Блондинка 20.03.2019 14:44

Обычно пользуюсь Habit Browser , есть яндекс, восемь опер, хром, юсвеб, и стандарный что был в телефоне,
чёт опять не работает обновление анимации

рони 20.03.2019 15:26

Цитата:

Сообщение от Malleys
UPD А, нет, просто среди возможных решений вы обычно выбираете самое сложное и многословное...

возможно разные возможности есть у вас, а блондинка (и я в том числе) о них и не подозревает.
и вопрос каким путём придти к решению, что на див нельзя кликать? почему?

Malleys 20.03.2019 16:52

Цитата:

Сообщение от Блондинка
чёт опять не работает обновление анимации

сам скачал Habit Browser и проверил... теперь работает пост №24 в Habit Browser!

рони, Да, <div onclick> работает с мышью и в телефоне в новых браузерах, но оно не работает с клавиатуры, оно не работает на телефоне в некоторых браузерах (в том числе в Habit Browser, которым пользуется Блондинка), оно не работает на Android TV, оно не воспринимается скинридерами как кнопка ...

Вон, она ведь пишет...
Цитата:

Сообщение от Блондинка
чёт опять не работает обновление анимации

хотя там и стоит желанный <div onclick>, короче поменял обратно на <button>

рони 20.03.2019 16:53

Malleys,
:thanks:

Блондинка 20.03.2019 17:32

я не знаю в чем дело, но стало работать, правда как то странно, словно проблемы с сенсором, создается впечатление что сделано два касания, но один-два раза из десяти срабатывает нормально

Блондинка 20.03.2019 17:50

вот стр на всякий случай

Блондинка 20.03.2019 22:28

разобралась, оба примера из поста №24, работают, на днях как будет свободное время попробую сделать пример логотипа


Часовой пояс GMT +3, время: 21:32.