Блог

Главная - Вопросы по программированию - CSS — улучшает производительность анимации непрозрачности в коническом градиенте

CSS — улучшает производительность анимации непрозрачности в коническом градиенте

#css #performance #animation #gradient #opacity

#css #Производительность #Анимация #градиент #непрозрачность

Вопрос:

У меня есть анимация CSS, которая имеет ужасную производительность, если ее размер большой, около 800 пикселей X 800 пикселей или более, анимацию можно запускать только в новейших версиях Chrome или Edge.

Смотрите пример кода. Если пример недостаточно медленный, добавьте больше кругов или увеличьте размер примера.

Реальная анимация очень похожа на эту, это просто упрощенный пример.

Я хотел бы знать, есть ли способ улучшить производительность этой анимации.

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

 @property --opacity {
  syntax: '<percentage>';
  initial-value: 100%;
  inherits: false;
}

.test {
    display: inline-block;
    position: absolute;
    border-radius: 100%;
    background-image: conic-gradient(
        red var(--opacity),
        red 10%,
        rgba(255, 0, 0, var(--opacity)),
        transparent,
        transparent
    );
    will-change: transform, background-image;
    width: 800px;
    height: 800px;
    mask:radial-gradient(circle, transparent 47%, white calc(47%   1px));
    -webkit-mask:radial-gradient(circle, transparent 47%, white calc(47%   1px));

    animation:
        conic-gradient
            4.5s
            ease-out
            0s
            infinite
            none
            running;
}

.a {
    position: absolute;
    right: -10%;
    top: 20%;
}

.b {
    position: absolute;
    right: -10%;
    top: 40%;
}

@keyframes conic-gradient {
    50% {
        --opacity: 0%;
    }

    85% {
        --opacity: 100%;
    }
} 
 <div class="test"></div>
<div class="test a"></div>
<div class="test b"></div>

Есть ли способ улучшить производительность?

Комментарии:

1. Я был бы рад оставить только один вопрос об одном и том же, чтобы иметь точные ответы. На самом деле вы подняли 4 вопроса об одном и том же, что не очень полезно

2. @TemaniAfif Это другой вопрос! На самом деле я сейчас отвечу на свой собственный другой вопрос, потому что я нашел ответ и использовал его в этом новом вопросе.

3. Я знаю, что это другое, но цель та же. Если вы придерживаетесь одной и той же цели в одном вопросе, было бы более полезно получить точные ответы

4. Мне пришлось добавить довольно много кругов, чтобы увидеть проблему, но на довольно мощном ноутбуке анимация занимала от 5% до 14% процессора. даже в не прерывистом состоянии. Я предполагаю, что система должна проходить через все, когда изменяется переменная CSS, и, возможно, она не может вызвать помощь графического процессора, потому что не понимает, что это непрозрачность, которая изменилась в анимации? (просто догадываюсь здесь).

5. @AHaworth У меня есть AMD Ryzen Pro 4750U, это довольно современный процессор, и я могу заметить снижение производительности. Не только увеличение количества кругов, но и уменьшение разрешения (размера) анимации сильно снижает производительность.