4. Анимация линии посредством изменения её прозрачности.
Основная идея этого примера анимации заключается в том, что на фоне будут появляться линии одна за другой за счёт увеличения яркости. То есть уменьшения прозрачности линии – attributeName=”stroke-opacity” from=”0″ to=”1″
30-35 строка – отрисовка кнопки “Start”
40-46 Отрисовка 4-х линий, которые будут появляться
50-58 анимация первой линии
60-65 анимация второй линии
67-72 анимация третьей линии
74-80 анимация четвертой линии
83-90 изменение цвета прямоугольника
– для копирования файла целиком нажать на иконку в шапке листинга ⇩ |
30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
<!-- start button animation --> <g id="startButton"> <rect x="157" y="178" rx="3" ry="3" width="40" height="20" fill="olivedrab" stroke="dodgerblue" /> <text x="159" y="193" font-size="16" font-weight="bold" font-family="Arial" fill="white" >Start</text> </g> <text x="2" y="193" font-size="16" font-family="Arial" fill="olivedrab" >click on the button</text> <!--object animation four lines --> <g style="stroke: lime; stroke-width: 12px; stroke-opacity:0;"> <line id="L1" x1="50" y1="170" x2="50" y2="30" /> <line id="L2" x1="50" y1="30" x2="150" y2="30" /> <line id="L3" x1="150" y1="30" x2="150" y2="170" /> <line id="L4" x1="150" y1="170" x2="50" y2="170" /> </g> <g> <!-- block all-animation --> <g id="ga1"> <!-- four consecutive animation --> <animate id="A1" attributeType="xml" attributeName="stroke-opacity" xlink:href="#L1" from="0" to="1" begin="startButton.click" dur="0.75s" repeatCount="1" fill="freeze" restart="whenNotActive" /> <animate id="A2" attributeType="xml" attributeName="stroke-opacity" xlink:href="#L2" from="0" to="1" begin="A1.end+0.5s" dur="0.75s" repeatCount="1" fill="freeze" /> <animate id="A3" attributeType="xml" attributeName="stroke-opacity" xlink:href="#L3" from="0" to="1" begin="A2.end+0.5s" dur="0.75s" repeatCount="1" fill="freeze" /> <animate id="A4" attributeType="xml" attributeName="stroke-opacity" xlink:href="#L4" from="0" to="1" begin="A3.end+0.5s" dur="0.75s" repeatCount="1" fill="freeze" /> </g> <!--end block four consecutive animation --> <!-- animation color change from dodgerblue to yellow --> <rect x="50" y="30" width="100" height="140" fill="none" fill-opacity="0.75" > <animate id="A5" attributeType="xml" attributeName="fill" from="dodgerblue" to="yellow" begin="A4.end+0.5s" dur="2s" repeatCount="1" fill="freeze" restart="whenNotActive" /> </rect> </g> <!-- end block all-animation --> |
Более подробно об алгоритме последовательных анимаций – здесь.
⇚ Анимация линии часть 2 Анимация маркера⇛