FMXPixie - экспериментальные CSS Transition через DisplayLink
Добавил экспериментальную реализацию
CSS-переходов на базе
FMX DisplayLink.
Пока считаю эту реализацию экспериментальной. Нужны тестирование, проверка поведения при наведении и быстром обратном переходе, а также подтверждение, что изменения не повлияли на существующие возможности.
Что добавлено
1. Анимация opacity.
Плавное изменение прозрачности элемента при наведении и уходе курсора.
XML:
css
.card {
opacity: 0.4;
transition: opacity 180ms ease-out;
}
.card:hover {
opacity: 1;
}
2. Анимация background-color
Плавный переход между цветами фона.
XML:
css
.card {
background-color: #164e63;
transition: background-color 180ms linear;
}
.card:hover {
background-color: #0f766e;
}
3. Анимация transform
Интерполяция совместимых наборов операций
transform, в том числе
translate() и
scale().
XML:
css
.card {
transform: translate(0px, 0px) scale(1);
transition: transform 180ms ease-out;
}
.card:hover {
transform: translate(8px, -4px) scale(1.05);
}
Важно:
transform: scale() изменяет визуальный размер элемента, но не перестраивает
layout и не сдвигает соседние элементы. Это обычное поведение
CSS.
4. Анимация
width и
height с перерасчётом
layout
Добавлена отдельная реализация анимации размеров, при которой промежуточные значения передаются в движок компоновки. Это позволяет соседним элементам плавно менять положение вслед за изменением ширины или высоты.
XML:
css
.panel {
width: 240px;
height: 80px;
transition: width 240ms ease-out, height 240ms ease-out;
}
.panel:hover {
width: 340px;
height: 140px;
}
В отличие от
transform: scale(), здесь изменяются реальные размеры блока. Следующие элементы должны перемещаться по мере перерасчёта
layout.
На первом этапе плавно интерполируются явные абсолютные размеры, представленные в пикселях. Значения
auto, проценты и
calc(),
min(),
max(),
clamp() пока не поддерживаются как плавно интерполируемые размеры.
Параметры переходов
Используются существующие CSS-механизмы настройки переходов:
-
transition - сокращённая запись.
-
transition-property - выбор анимируемых свойств.
-
transition-duration - продолжительность.
-
transition-timing-function - функция скорости.
-
transition-delay - задержка перед началом.
-
transition: all - применение к поддерживаемым свойствам.
- Несколько свойств с разными продолжительностью, функцией скорости и задержкой.
Поддерживаются распознаваемые движком функции
linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end, steps() и
cubic-bezier().
Быстрый обратный переход: при повторном наведении или уходе курсора до завершения анимации используется текущее промежуточное значение. Предполагаемое поведение - продолжение с текущего состояния, а не скачок к предыдущему или конечному значению. Это также необходимо проверить в тестах.
Все примеры находятся в каталоге
Examples
FMXPixie - CSS Transition DisplayLink Test.iss
FMXPixie - CSS Size Layout Transition Test.iss
