Необходимость задать подобный вопрос возникла в связи с появлением таких мнений:
Цитата из поста с предложениями @eanmos
В качестве решения предлагаю такой вариант: нужно разбить все вопросы про анимацию на отдельные, конкретные составные вопросы и написать для них отдельные, конкретные ответы†. Каждый такой вопрос/ответ будут решать отдельную, конкретную проблему. Отдельную и конкретную.
@andreymal комментарий к этому же посту
«нужно разбить все вопросы про анимацию на отдельные, конкретные составные вопросы» — а я про это ещё полгода назад говорил, да.
Мне хотелось бы услышать мнение сообщества и разобрать предложение на конкретном примере.
Вот один из проведенных конкурсов по анимации иконки Stackoverflow.
Сценарий анимации предложенный в вопросе:
- Рисование контура корзины
- Заполнение цветом контура
- Последовательное появление 5-ти цветных полосок
- Исчезновение полосок в обратном порядке.
- Зацикливание появления, исчезновения цветных полосок.
Итоговая анимация по этому сценарию:
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 12 120 120" style="border:1px solid;">
<style>
.st0{fill:white; stroke:#BCBBBB; stroke-width:2;}
.st1{fill:#f48023;opacity:0;}
</style>
<path class="st0" d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z" stroke-dasharray="0,123.5 0,123.5" stroke-dashoffset="150">
<!--1. Анимация рисования контура корзины -->
<animate id="bask" attributename="stroke-dasharray" dur="4s" begin="svg1.click" values="0,123.5 0,123.5;0,0,247,0" fill="freeze" />
<!-- 2. Заполнение цветом корзины -->
<animate id="bask_fill" attributename="fill" dur="1s" begin="bask.end" values="white;#BCBBBB" fill="freeze" />
</path>
<path class="st1" d="M38 86H76.6V78.3H38V86Z">
<!-- 3. Анимация появления первой цветной полоски -->
<!-- 5. Зацикливание появления, исчезновения полосок `begin="bask_fill.end;Back5.end+1.5s` -->
<animate id="an1" attributeName="opacity" to="1" dur="0.001s" begin="bask_fill.end;Back5.end+1.5s" fill="freeze" />
<!-- 4. Анимация исчезновения первой цветной полоски -->
<animate id="Back1" attributeName="opacity" to="0" dur="0.001s" begin="Back2.end+0.125s" fill="freeze" />
</path>
<path class="st1" d="M38.8 68.4L76.6 76.3 78.2 68.7 40.4 60.8 38.8 68.4Z" >
<!-- 3. Анимация появления второй цветной полоски -->
<animate id="an2" attributeName="opacity" to="1" dur="0.001s" begin="an1.end+0.125s" fill="freeze" /> <!-- 4. Анимация исчезновения второй цветной полоски -->
<animate id="Back2" attributeName="opacity" to="0" dur="0.001s" begin="Back3.end+0.125s" fill="freeze" />
</path>
<path class="st1" d="M43.8 50.4L78.8 66.7 82 59.7 47 43.3 43.8 50.4Z" >
<animate id="an3" attributeName="opacity" to="1" dur="0.001s" begin="an2.end+0.125s" fill="freeze" />
<animate id="Back3" attributeName="opacity" to="0" dur="0.001s" begin="Back4.end+0.125s" fill="freeze" />
</path>
<path class="st1" d="M53.5 33.2L83.2 57.9 88.1 52 58.4 27.3 53.5 33.2Z" >
<animate id="an4" attributeName="opacity" to="1" dur="0.001s" begin="an3.end+0.125s" fill="freeze" />
<animate id="Back4" attributeName="opacity" to="0" dur="0.001s" begin="Back5.end+0.125s" fill="freeze" />
</path>
<path class="st1" d="M72.7 14.9L66.5 19.5 89.5 50.5 95.7 45.9 72.7 14.9Z" >
<animate id="an5" attributeName="opacity" dur="0.001s" to="1" begin="an4.end+0.125s" fill="freeze" />
<animate id="Back5" attributeName="opacity" dur="0.001s" to="0" begin="an5.end+1s" fill="freeze" />
</path>
<text x="32" y="115" font-size="14px" fill="#BCBBBB" >Click me</text>
</svg>
Предлагается разбить анимацию на отдельные простые анимации
Вопрос: Есть ли в этом смысл, когда речь идёт о самостоятельных, отдельных объектах frontend, как-то: анимация иконок, модальных окон, веб страниц, отдельных анимационных персонажей, предметов веб страниц и т.д при условии, что задан исчерпывающий сценарий в вопросе?
Эту анимацию иконки разбивать скорее всего не требуется
- вот что и требовалось доказать -скорее всего
. 2.по разным конкретным сценариям
Ну так вам же дан ответ ниже. Неужели неубедительно?псевдоконкурсе
. В конкурсе - стоит это уже запомнить.Не люблю рамки
- вот ключевые слова. И чтобы мы там с вами не писали в тексте вопроса, каждый сделает по-своему. И я с @StrangerintheQ полностью согласен.