У меня есть картинка, на которой изображено движение поезда по рельсам.
Для создания анимации движения хочу использовать SVG При всём этом у паровоза из дымовой трубы выходит дым. Как сделать подобную анимацию, используя SVG?
Ответ
Поэтапно сделаем каждую деталь поезда. В основном будут использованы такие основные команды: path, rect, circle, line
Изначально создадим паровоз:
.st0 {
fill: #A82F2F;
stroke: #9F9F9F;
}
.st1 {
opacity: 0.5;
fill: #5B5B5B;
stroke: #842323;
}
.st2 {
fill: #D34040;
stroke: #9F9F9F;
stroke-width: 0.5;
}
.st3 {
fill: #932727;
}
.st4 {
fill: #D34040;
}
.st5 {
fill: #5B4343;
}
.first-tr-str0 {
fill: #DDCCCC;
stroke: #EAE5E5;
}
Создаём оставшиеся прицепы поезда:
Сделаем рельсы от начала до конца ViewBox
Теперь мы должны сделать анимацию дыма, выходящего из трубы паровоза:
Будем использовать filter & animateTransform
.st0 {
fill: #A82F2F;
stroke: #9F9F9F;
}
.st1 {
opacity: 0.5;
fill: #5B5B5B;
stroke: #842323;
}
.st2 {
fill: #D34040;
stroke: #9F9F9F;
stroke-width: 0.5;
}
.st3 {
fill: #932727;
}
.st4 {
fill: #D34040;
}
.st5 {
fill: #5B4343;
}
.first-tr-str0 {
fill: #DDCCCC;
stroke: #EAE5E5;
}
Почти готово, осталось соединить всё в одну конструкцию и сделать анимацию движения поезда по заданной траектории, используя path
* {
margin: 0;
padding: 0;
}
svg {
background-color: #ddd;
}
.st0 {
fill: #A82F2F;
stroke: #9F9F9F;
}
.st1 {
opacity: 0.5;
fill: #5B5B5B;
stroke: #842323;
}
.st2 {
fill: #D34040;
stroke: #9F9F9F;
stroke-width: 0.5;
}
.st3 {
fill: #932727;
}
.st4 {
fill: #D34040;
}
.st5 {
fill: #5B4343;
}
.first-tr-str0 {
fill: #DDCCCC;
stroke: #EAE5E5;
}
Update:
Использовал
Комментариев нет:
Отправить комментарий