Содержание
Вопрос или проблема
Я только что закончил накладывать маску на контур левого века моего проекта, но у меня возникли проблемы с её выравниванием с веком (анимация с эффектом стирания). В настоящее время я использую scaleY, чтобы она бесконечно плавала вверх и вниз вместе с ним, но когда я использую translateY, это не работает. Вот код с scaleY:
function getRandomColor() {
const letters="0123456789ABCDEF";
let color="#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
document.addEventListener('keydown', (event) => {
if (event.key === 's' || event.key === 'S') {
const headColor = document.getElementById('head_color');
headColor.setAttribute('fill', getRandomColor());
// Необязательно: если веки должны совпадать с цветом головы, добавьте это:
const eyelids = document.getElementById('eyelids_color');
eyelids.setAttribute('fill', headColor.getAttribute('fill'));
}
});
document.addEventListener('DOMContentLoaded', function() {
const pupils = document.getElementById('pupils'); // Группа, содержащая оба зрачка
document.addEventListener('mousemove', function(event) {
const eyesSvg = document.getElementById('eyes_svg');
const eyesBox = eyesSvg.getBoundingClientRect();
// Приблизительный центр глаз (возможно, вам нужно будет настроить эти значения в зависимости от вашего дизайна)
const eyeCenterX = eyesBox.left + eyesBox.width / 2;
const eyeCenterY = eyesBox.top + eyesBox.height / 2;
const maxPupilMovement = 10; // Максимальное движение внутри глаза
// Вычислите положение мыши относительно центра глаз
const mouseX = event.clientX;
const mouseY = event.clientY;
// Вычислите угол и расстояние для движения зрачка
const angle = Math.atan2(mouseY - eyeCenterY, mouseX - eyeCenterX);
const distance = Math.min(maxPupilMovement, Math.hypot(mouseX - eyeCenterX, mouseY - eyeCenterY));
// Вычислите новые позиции зрачков
const pupilX = Math.cos(angle) * distance;
const pupilY = Math.sin(angle) * distance;
// Примените преобразование к группе зрачков (переместите вниз на основании вычисленных значений)
pupils.setAttribute('transform', `translate(${48.5 + pupilX}, ${29.0 + pupilY})`);
});
});.character {
position: relative;
}
.guide {
position: absolute;
}
.part {
position: absolute;
}
.eyes {
position: absolute;
z-index: 3;
left: 19px;
}
.eyesoutline {
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
}
.whole_head {
position: absolute;
animation: float 2s ease-in-out infinite;
}
.head {
position: absolute;
margin-top: 19px;
z-index: 2;
}
.headcolor {
z-index: 1;
margin-top: -500px;
position: relative;
}
.headoutline {
z-index: 2;
position: relative;
width: 100%;
height: 100%;
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
@keyframes wipe-in-out-eyelid {
0% {
clip-path: inset(0 0 100% 0); /* Полностью скрыто снизу */
}
5% {
clip-path: inset(0 0 0 0); /* Полностью видно (анимация стирания завершена) */
}
10% {
clip-path: inset(0 0 100% 0); /* Снова полностью скрыто (анимация стирания завершена) */
}
100% {
clip-path: inset(0 0 100% 0); /* Оставаться скрытым на остальную продолжительность */
}
}
@keyframes eyelids-outlines {
0% {
transform: scaleY(0.885);
}
5% {
transform: scaleY(0.35); /* Полная длина глаза. */
}
10% {
transform: scaleY(0.885);
}
100% {
transform: scaleY(0.885);
}
}
.eyelid {
fill: #ffcc66; /* Цвет века */
animation: wipe-in-out-eyelid 5s ease-out infinite; /* Анимация стирания */
transform-origin: center;
position: relative;
bottom: 0;
}
/* Анимация для линии, растущей вниз, сжимающейся и возвращающейся вверх */
.eyelid_outline {
animation: eyelids-outlines 5s ease-out infinite;
transform-origin: center;
position: absolute;
top:8px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Сборка персонажа</title>
<link rel="stylesheet" href="https://stackoverflow.com/questions/79135475/player.css">
</head>
<body>
<div class="guide">
<object data="/svgs/char/shapes/30.svg" type="image/svg+xml" class="part body"></object>
</div>
<div class="character">
<div class="guide">
<object data="/svgs/char/shapes/30.svg" type="image/svg+xml" class="part body"></object>
</div>
<div class="whole_head">
<div class="eyes">
<svg id="eyes_svg">
<g transform="matrix(1.0, 0.0, 0.0, 1.0, 57.3, 26.6)">
<path d="M26.55 -26.6 Q39.25 -26.6 48.25 -18.8 57.25 -11.0 57.25 0.0 57.25 11.0 48.25 18.8 39.25 26.6 26.55 26.6 13.85 26.6 4.85 18.8 -4.15 11.0 -4.15 0.0 -4.15 -11.0 4.85 -18.8 13.85 -26.6 26.55 -26.6 M-24.7 -12.75 Q-19.1 -6.35 -19.1 2.7 -19.1 11.75 -24.7 18.15 -30.3 24.55 -38.2 24.55 -46.1 24.55 -51.7 18.15 -57.3 11.75 -57.3 2.7 -57.3 -6.35 -51.7 -12.75 -46.1 -19.15 -38.2 -19.15 -30.3 -19.15 -24.7 -12.75" fill="#ffffff" fill-rule="evenodd" stroke="none"/>
</g>
<!-- Зрачки -->
<g id="pupils" transform="matrix(1.0, 0.0, 0.0, 1.0, 34.5, 7.0)">
<path d="M-24.25 4.75 Q-26.0 6.5 -28.5 6.5 -31.0 6.5 -32.75 4.75 -34.5 3.0 -34.5 0.5 -34.5 -2.0 -32.75 -3.75 -31.0 -5.5 -28.5 -5.5 -26.0 -5.5 -24.25 -3.75 -22.5 -2.0 -22.5 0.5 -22.5 3.0 -24.25 4.75" fill="#000000" fill-rule="evenodd" stroke="none"/>
<path d="M33.15 4.95 Q31.1 7.0 28.2 7.0 25.3 7.0 23.25 4.95 21.2 2.9 21.2 0.0 21.2 -2.9 23.25 -4.95 25.3 -7.0 28.2 -7.0 31.1 -7.0 33.15 -4.95 35.2 -2.9 35.2 0.0 35.2 2.9 33.15 4.95" fill="#000000" fill-rule="evenodd" stroke="none"/>
</g>
<clipPath id="cut-bottom">
<defs><clipPath clipPathUnits="userSpaceOnUse" id="a"><path d="M-57.3-26.6v53.2H3.839c-.02-.301-.042-.6-.06-.901-2.963-.245-5.933-.587-8.878-.643-.655-1.858-1.444-3.675-1.967-5.574-.263-.958-.582-3.19-.855-5.266-6.813-.163-3.393-1.313-.123-.97-.095-.755-.228-1.738-.274-2.133-.457-3.96-.765-7.936-1.072-11.91-.203-2.596-.417-5.192-.633-7.787-.846-10.18 3.516-15.993 8.582-17.073.037-.314.08-.628.118-.943zm52.1 40.836-.01.002.01.008v-.01z"/></clipPath></defs><path d="M26.55-26.6q12.7 0 21.7 7.8t9 18.8q0 11-9 18.8-9 7.8-21.7 7.8t-21.7-7.8q-9-7.8-9-18.8t9-18.8q9-7.8 21.7-7.8M-24.7-12.75q5.6 6.4 5.6 15.45 0 9.05-5.6 15.45-5.6 6.4-13.5 6.4t-13.5-6.4q-5.6-6.4-5.6-15.45 0-9.05 5.6-15.45 5.6-6.4 13.5-6.4t13.5 6.4" fill="#fff" fill-rule="evenodd" style="fill:blue" clip-path="url(#a)" transform="translate(57.3 26.6)"/>
</clipPath>
<!-- Веки (анимация мигания) -->
<g clip-path="url(#cut-bottom)">
<g class="eyelid_outline" transform="matrix(1.0, 0.0, 0.0, 1.0, 66.55, 1.35)">
<path d="M66.55 1.4 L-66.55 1.4 -66.55 -1.35 66.55 -1.35 66.55 1.4" fill="#000000" fill-opacity="0.49803922" fill-rule="evenodd" stroke="none"/>
</g>
</g>
<g class="eyelid" transform="matrix(1.0, 0.0, 0.0, 1.0, 57.3, 26.6)">
<path id="eyelids_color" d="M26.55 -26.6 Q39.25 -26.6 48.25 -18.8 57.25 -11.0 57.25 0.0 57.25 11.0 48.25 18.8 39.25 26.6 26.55 26.6 13.85 26.6 4.85 18.8 -4.15 11.0 -4.15 0.0 -4.15 -11.0 4.85 -18.8 13.85 -26.6 26.55 -26.6 M-24.7 -12.75 Q-19.1 -6.35 -19.1 2.7 -19.1 11.75 -24.7 18.15 -30.3 24.55 -38.2 24.55 -46.1 24.55 -51.7 18.15 -57.3 11.75 -57.3 2.7 -57.3 -6.35 -51.7 -12.75 -46.1 -19.15 -38.2 -19.15 -30.3 -19.15 -24.7 -12.75" fill="#ffcc66"/>
</g>
<g id="eyesoutline" transform="matrix(1.0, 0.0, 0.0, 1.0, 57.3, 26.6)">
<path d="M-50.2 -11.05 Q-55.2 -5.35 -55.2 2.7 -55.2 10.8 -50.2 16.5 -45.25 22.2 -38.15 22.2 -31.1 22.2 -26.1 16.5 -21.15 10.8 -21.1 2.7 -21.15 -5.35 -26.1 -11.05 -31.1 -16.8 -38.15 -16.8 -45.25 -16.8 -50.2 -11.05 M-57.3 2.7 Q-57.3 -6.35 -51.7 -12.75 -46.1 -19.15 -38.2 -19.15 -30.3 -19.15 -24.7 -12.75 -19.1 -6.35 -19.1 2.7 -19.1 11.75 -24.7 18.15 -30.3 24.55 -38.2 24.55 -46.1 24.55 -51.7 18.15 -57.3 11.75 -57.3 2.7" fill="#000000" fill-opacity="0.49803922" fill-rule="evenodd" stroke="none"/>
<path d="M26.55 -24.3 Q14.9 -24.3 6.7 -17.15 -1.55 -10.05 -1.55 0.05 -1.55 10.1 6.7 17.25 14.9 24.35 26.55 24.4 38.15 24.35 46.4 17.25 54.65 10.1 54.65 0.05 54.65 -10.05 46.4 -17.15 38.15 -24.3 26.55 -24.3 M26.55 -26.6 Q39.25 -26.6 48.25 -18.8 57.25 -11.0 57.25 0.0 57.25 11.0 48.25 18.8 39.25 26.6 26.55 26.6 13.85 26.6 4.85 18.8 -4.15 11.0 -4.15 0.0 -4.15 -11.0 4.85 -18.8 13.85 -26.6 26.55 -26.6" fill="#000000" fill-opacity="0.49803922" fill-rule="evenodd" stroke="none"/>
</g>
</svg>
</div>
<!-- Контур SVG -->
<div class="head">
<svg id="head_svg">
<svg id="head_shape" xmlns="http://www.w3.org/2000/svg" width="150" height="90">
<g transform="matrix(1.0, 0.0, 0.0, 1.0, 75.0, 45.0)">
<path id="head_color" d="M75.0 0.0 Q75.0 18.65 53.0 31.8 31.05 45.0 0.0 45.0 -31.05 45.0 -53.05 31.8 -75.0 18.65 -75.0 0.0 -75.0 -18.65 -53.05 -31.85 -31.05 -45.0 0.0 -45.0 31.05 -45.0 53.0 -31.85 75.0 -18.65 75.0 0.0" fill="#ffcc66" fill-rule="evenodd" stroke="none" />
</g>
<g id="headoutline" transform="matrix(1.0, 0.0, 0.0, 1.0, 75.0, 45.0)">
<path d="M53.0 -31.85 Q75.0 -18.65 75.0 0.0 75.0 18.65 53.0 31.8 31.05 45.0 0.0 45.0 -31.05 45.0 -53.05 31.8 -75.0 18.65 -75.0 0.0 -75.0 -18.65 -53.05 -31.85 -31.05 -45.0 0.0 -45.0 31.05 -45.0 53.0 -31.85 M51.05 -29.9 Q29.9 -42.25 0.0 -42.25 -29.9 -42.25 -51.05 -29.9 -72.2 -17.5 -72.2 0.0 -72.2 17.5 -51.05 29.85 -29.9 42.25 0.0 42.25 29.9 42.25 51.05 29.85 72.2 17.5 72.2 0.0 72.2 -17.5 51.05 -29.9" fill="#000000" fill-opacity="0.49803922" fill-rule="evenodd" stroke="none"/>
</g>
</svg>
</svg>
</div>
</div>
<!-- <object data="body.svg" type="image/svg+xml" class="part body"></object>
<object data="leftarms.svg" type="image/svg+xml" class="part arms"></object>
<object data="rightarms.svg" type="image/svg+xml" class="part arms"></object>
<object data="leftlegs.svg" type="image/svg+xml" class="part legs"></object>
<object data="rightlegs.svg" type="image/svg+xml" class="part legs"></object>-->
</div>
<script src="player.js"></script>
</body>
</html>А вот с использованием translateY:
function getRandomColor() {
const letters="0123456789ABCDEF";
let color="#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
document.addEventListener('keydown', (event) => {
if (event.key === 's' || event.key === 'S') {
const headColor = document.getElementById('head_color');
headColor.setAttribute('fill', getRandomColor());
// Необязательно: если веки должны совпадать с цветом головы, добавьте это:
const eyelids = document.getElementById('eyelids_color');
eyelids.setAttribute('fill', headColor.getAttribute('fill'));
}
});
document.addEventListener('DOMContentLoaded', function() {
const pupils = document.getElementById('pupils'); // Группа, содержащая оба зрачка
document.addEventListener('mousemove', function(event) {
const eyesSvg = document.getElementById('eyes_svg');
const eyesBox = eyesSvg.getBoundingClientRect();
// Приблизительный центр глаз (возможно, вам нужно будет настроить эти значения в зависимости от вашего дизайна)
const eyeCenterX = eyesBox.left + eyesBox.width / 2;
const eyeCenterY = eyesBox.top + eyesBox.height / 2;
const maxPupilMovement = 10; // Максимальное движение внутри глаза
// Вычислите положение мыши относительно центра глаз
const mouseX = event.clientX;
const mouseY = event.clientY;
// Вычислите угол и расстояние для движения зрачка
const angle = Math.atan2(mouseY - eyeCenterY, mouseX - eyeCenterX);
const distance = Math.min(maxPupilMovement, Math.hypot(mouseX - eyeCenterX, mouseY - eyeCenterY));
// Вычислите новые позиции зрачков
const pupilX = Math.cos(angle) * distance;
const pupilY = Math.sin(angle) * distance;
// Примените преобразование к группе зрачков (переместите вниз на основании вычисленных значений)
pupils.setAttribute('transform', `translate(${48.5 + pupilX}, ${29.0 + pupilY})`);
});
});.character {
position: relative;
}
.guide {
position: absolute;
}
.part {
position: absolute;
}
.eyes {
position: absolute;
z-index: 3;
left: 19px;
}
.eyesoutline {
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
}
.whole_head {
position: absolute;
animation: float 2s ease-in-out infinite;
}
.head {
position: absolute;
margin-top: 19px;
z-index: 2;
}
.headcolor {
z-index: 1;
margin-top: -500px;
position: relative;
}
.headoutline {
z-index: 2;
position: relative;
width: 100%;
height: 100%;
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
@keyframes wipe-in-out-eyelid {
0% {
clip-path: inset(0 0 100% 0); /* Полностью скрыто снизу */
}
5% {
clip-path: inset(0 0 0 0); /* Полностью видно (анимация стирания завершена) */
}
10% {
clip-path: inset(0 0 100% 0); /* Снова полностью скрыто (анимация стирания завершена) */
}
100% {
clip-path: inset(0 0 100% 0); /* Оставаться скрытым на остальную продолжительность */
}
}
@keyframes eyelids-outlines {
0% {
transform: translateY(0.885);
}
5% {
transform: translateY(0.35); /* Полная длина глаза. */
}
10% {
transform: translateY(0.885);
}
100% {
transform: translateY(0.885);
}
}
.eyelid {
fill: #ffcc66; /* Цвет века */
animation: wipe-in-out-eyelid 5s ease-out infinite; /* Анимация стирания */
transform-origin: center;
position: relative;
bottom: 0;
}
/* Анимация для линии, растущей вниз, сжимающейся и возвращающейся вверх */
.eyelid_outline {
animation: eyelids-outlines 5s ease-out infinite;
transform-origin: center;
position: absolute;
top:8px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Сборка персонажа</title>
<link rel="stylesheet" href="https://stackoverflow.com/questions/79135475/player.css">
</head>
<body>
<div class="guide">
<object data="/svgs/char/shapes/30.svg" type="image/svg+xml" class="part body"></object>
</div>
<div class="character">
<div class="guide">
<object data="/svgs/char/shapes/30.svg" type="image/svg+xml" class="part body"></object>
</div>
<div class="whole_head">
<div class="eyes">
<svg id="eyes_svg">
<g transform="matrix(1.0, 0.0, 0.0, 1.0, 57.3, 26.6)">
<path d="M26.55 -26.6 Q39.25 -26.6 48.25 -18.8 57.25 -11.0 57.25 0.0 57.25 11.0 48.25 18.8 39.25 26.6 26.55 26.6 13.85 26.6 4.85 18.8 -4.15 11.0 -4.15 0.0 -4.15 -11.0 4.85 -18.8 13.85 -26.6 26.55 -26.6 M-24.7 -12.75 Q-19.1 -6.35 -19.1 2.7 -19.1 11.75 -24.7 18.15 -30.3 24.55 -38.2 24.55 -46.1 24.55 -51.7 18.15 -57.3 11.75 -57.3 2.7 -57.3 -6.35 -51.7 -12.75 -46.1 -19.15 -38.2 -19.15 -30.3 -19.15 -24.7 -12.75" fill="#ffffff" fill-rule="evenodd" stroke="none"/>
</g>
<!-- Зрачки -->
<g id="pupils" transform="matrix(1.0, 0.0, 0.0, 1.0, 34.5, 7.0)">
<path d="M-24.25 4.75 Q-26.0 6.5 -28.5 6.5 -31.0 6.5 -32.75 4.75 -34.5 3.0 -34.5 0.5 -34.5 -2.0 -32.75 -3.75 -31.0 -5.5 -28.5 -5.5 -26.0 -5.5 -24.25 -3.75 -22.5 -2.0 -22.5 0.5 -22.5 3.0 -24.25 4.75" fill="#000000" fill-rule="evenodd" stroke="none"/>
<path d="M33.15 4.95 Q31.1 7.0 28.2 7.0 25.3 7.0 23.25 4.95 21.2 2.9 21.2 0.0 21.2 -2.9 23.25 -4.95 25.3 -7.0 28.2 -7.0 31.1 -7.0 33.15 -4.95 35.2 -2.9 35.2 0.0 35.2 2.9 33.15 4.95" fill="#000000" fill-rule="evenodd" stroke="none"/>
</g>
<clipPath id="cut-bottom">
<defs><clipPath clipPathUnits="userSpaceOnUse" id="a"><path d="M-57.3-26.6v53.2H3.839c-.02-.301-.042-.6-.06-.901-2.963-.245-5.933-.587-8.878-.643-.655-1.858-1.444-3.675-1.967-5.574-.263-.958-.582-3.19-.855-5.266-6.813-.163-3.393-1.313-.123-.97-.095-.755-.228-1.738-.274-2.133-.457-3.96-.765-7.936-1.072-11.91-.203-2.596-.417-5.192-.633-7.787-.846-10.18 3.516-15.993 8.582-17.073.037-.314.08-.628.118-.943zm52.1 40.836-.01.002.01.008v-.01z"/></clipPath></defs><path d="M26.55-26.6q12.7 0 21.7 7.8t9 18.8q0 11-9 18.8-9 7.8-21.7 7.8t-21.7-7.8q-9-7.8-9-18.8t9-18.8q9-7.8 21.7-7.8M-24.7-12.75q5.6 6.4 5.6 15.45 0 9.05-5.6 15.45-5.6 6.4-13.5 6.4t-13.5-6.4q-5.6-6.4-5.6-15.45 0-9.05 5.6-15.45 5.6-6.4 13.5-6.4t13.5 6.4" fill="#fff" fill-rule="evenodd" style="fill:blue" clip-path="url(#a)" transform="translate(57.3 26.6)"/>
</clipPath>
<!-- Веки (анимация мигания) -->
<g clip-path="url(#cut-bottom)">
<g class="eyelid_outline" transform="matrix(1.0, 0.0, 0.0, 1.0, 66.55, 1.35)">
<path d="M66.55 1.4 L-66.55 1.4 -66.55 -1.35 66.55 -1.35 66.55 1.4" fill="#000000" fill-opacity="0.49803922" fill-rule="evenodd" stroke="none"/>
</g>
</g>
<g class="eyelid" transform="matrix(1.0, 0.0, 0.0, 1.0, 57.3, 26.6)">
<path id="eyelids_color" d="M26.55 -26.6 Q39.25 -26.6 48.25 -18.8 57.25 -11.0 57.25 0.0 57.25 11.0 48.25 18.8 39.25 26.6 26.55 26.6 13.85 26.6 4.85 18.8 -4.15 11.0 -4.15 0.0 -4.15 -11.0 4.85 -18.8 13.85 -26.6 26.55 -26.6 M-24.7 -12.75 Q-19.1 -6.35 -19.1 2.7 -19.1 11.75 -24.7 18.15 -30.3 24.55 -38.2 24.55 -46.1 24.55 -51.7 18.15 -57.3 11.75 -57.3 2.7 -57.3 -6.35 -51.7 -12.75 -46.1 -19.15 -38.2 -19.15 -30.3 -19.15 -24.7 -12.75" fill="#ffcc66"/>
</g>
<g id="eyesoutline" transform="matrix(1.0, 0.0, 0.0, 1.0, 57.3, 26.6)">
<path d="M-50.2 -11.05 Q-55.2 -5.35 -55.2 2.7 -55.2 10.8 -50.2 16.5 -45.25 22.2 -38.15 22.2 -31.1 22.2 -26.1 16.5 -21.15 10.8 -21.1 2.7 -21.15 -5.35 -26.1 -11.05 -31.1 -16.8 -38.15 -16.8 -45.25 -16.8 -50.2 -11.05 M-57.3 2.7 Q-57.3 -6.35 -51.7 -12.75 -46.1 -19.15 -38.2 -19.15 -30.3 -19.15 -24.7 -12.75 -19.1 -6.35 -19.1 2.7 -19.1 11.75 -24.7 18.15 -30.3 24.55 -38.2 24.55 -46.1 24.55 -51.7 18.15 -57.3 11.75 -57.3 2.7" fill="#000000" fill-opacity="0.49803922" fill-rule="evenodd" stroke="none"/>
<path d="M26.55 -24.3 Q14.9 -24.3 6.7 -17.15 -1.55 -10.05 -1.55 0.05 -1.55 10.1 6.7 17.25 14.9 24.35 26.55 24.4 38.15 24.35 46.4 17.25 54.65 10.1 54.65 0.05 54.65 -10.05 46.4 -17.15 38.15 -24.3 26.55 -24.3 M26.55 -26.6 Q39.25 -26.6 48.25 -18.8 57.25 -11.0 57.25 0.0 57.25 11.0 48.25 18.8 39.25 26.6 26.55 26.6 13.85 26.6 4.85 18.8 -4.15 11.0 -4.15 0.0 -4.15 -11.0 4.85 -18.8 13.85 -26.6 26.55 -26.6" fill="#000000" fill-opacity="0.49803922" fill-rule="evenodd" stroke="none"/>
</g>
</svg>
</div>
<!-- Контур SVG -->
<div class="head">
<svg id="head_svg">
<svg id="head_shape" xmlns="http://www.w3.org/2000/svg" width="150" height="90">
<g transform="matrix(1.0, 0.0, 0.0, 1.0, 75.0, 45.0)">
<path id="head_color" d="M75.0 0.0 Q75.0 18.65 53.0 31.8 31.05 45.0 0.0 45.0 -31.05 45.0 -53.05 31.8 -75.0 18.65 -75.0 0.0 -75.0 -18.65 -53.05 -31.85 -31.05 -45.0 0.0 -45.0 31.05 -45.0 53.0 -31.85 75.0 -18.65 75.0 0.0" fill="#ffcc66" fill-rule="evenodd" stroke="none" />
</g>
<g id="headoutline" transform="matrix(1.0, 0.0, 0.0, 1.0, 75.0, 45.0)">
<path d="M53.0 -31.85 Q75.0 -18.65 75.0 0.0 75.0 18.65 53.0 31.8 31.05 45.0 0.0 45.0 -31.05 45.0 -53.05 31.8 -75.0 18.65 -75.0 0.0 -75.0 -18.65 -53.05 -31.85 -31.05 -45.0 0.0 -45.0 31.05 -45.0 53.0 -31.85 M51.05 -29.9 Q29.9 -42.25 0.0 -42.25 -29.9 -42.25 -51.05 -29.9 -72.2 -17.5 -72.2 0.0 -72.2 17.5 -51.05 29.85 -29.9 42.25 0.0 42.25 29.9 42.25 51.05 29.85 72.2 17.5 72.2 0.0 72.2 -17.5 51.05 -29.9" fill="#000000" fill-opacity="0.49803922" fill-rule="evenodd" stroke="none"/>
</g>
</svg>
</svg>
</div>
</div>
<!-- <object data="body.svg" type="image/svg+xml" class="part body"></object>
<object data="leftarms.svg" type="image/svg+xml" class="part arms"></object>
<object data="rightarms.svg" type="image/svg+xml" class="part arms"></object>
<object data="leftlegs.svg" type="image/svg+xml" class="part legs"></object>
<object data="rightlegs.svg" type="image/svg+xml" class="part legs"></object>-->
</div>
<script src="player.js"></script>
</body>
</html>Как мне заставить работать translateY?
Ответ или решение
Введение
Ваша проблема заключается в том, что анимация с использованием translateY не работает так, как вы ожидаете, в то время как scaleY работает нормально. Рассмотрим причины такого поведения и предложим возможные решения. В процессе мы детально проанализируем код и предложим рекомендации для устранения неполадок.
Основные различия между translateY и scaleY
-
Определение:
translateY: Этот метод изменяет положение элемента по оси Y. Визуально это перемещает элемент вверх или вниз относительно его первоначального положения.scaleY: Этот метод масштабирует элемент по оси Y, увеличивая или уменьшая его размеры без изменения его положения.
-
Поведение при изменении размера:
- При использовании
scaleYизменяется размер элемент, но его положение относительно других элементов остается фиксированным, если не меняетсяtransform-origin. - При использовании
translateYэлемент перемещается относительно своей текущей позиции и может влиять на расположение соседних элементов, особенно если они находятся в одной иерархии.
- При использовании
Почему translateY может не работать с ключевыми кадрами для век
-
Ключевые кадры и отсутствие зависимостей: Если вы используете
translateY, важно проверить, правильно ли заданы ключевые кадры и соответствуют ли они изменению позиции элемента. Возможно, элемент не перемещается, потому что его положение не обновляется во время исполнения анимации. -
Тип анимации: Если в вашем коде определены разные анимации, которые конфликтуют друг с другом, это может привести к некорректному отображению. Анимация
wipe-in-out-eyelid, например, может блокировать перемещение элемента сtranslateY. -
Каскадность стилей: В вашем CSS могут быть другие правила, которые переопределяют стили элемента, когда используется
translateY. Необходимо убедиться, что другие стили не мешают вашей анимации. -
Позиционирование элементов: Использование
position: absolute;в CSS может также влиять на поведениеtranslateY. Позиционирование элементов должно быть правильно настроено, чтобы избежать неожиданных эффектов.
Рекомендации
-
Проверьте ключевые кадры: Убедитесь, что ваша анимация
eyelids-outlinesправильно перемещает элемент. Ваши ключевые кадры должны иметь четкие значения дляtranslateY, чтобы осуществить переход.Пример:
@keyframes eyelids-outlines { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); /* Пример изменения на 10 пикселей */ } 100% { transform: translateY(0); } } -
Убедитесь в отсутствии конфликтующих стилей: Проверьте другие CSS-правила, которые могут переопределять ваши анимации.
-
Используйте отладку: Проверьте в инструментах разработчика, как ведет себя элемент в реальном времени. Посмотрите на положение элемента и убедитесь, что влияние
translateYприменяется так, как вы ожидаете. -
Сравните и протестируйте: Для начала попробуйте изменить только один аспект вашей текущей анимации. Например, используйте
translateYв анимацииfloatи посмотрите, будет ли оно работать.
Заключение
Проблема с translateY не должна быть сложной для разрешения. Наиболее важно проанализировать возможные конфликты в CSS и убедиться, что ключевые кадры для анимации корректно настроены. С применением шагов, описанных выше, вы сможете добиться ожидаемого поведения вашей анимации век.
Я надеюсь, что эта информация была полезной для вас в процессе исправления вашей анимации. Если у вас есть дополнительные вопросы, не стесняйтесь обращаться за помощью.