Проблема анимации raphael.js: анимировать только определенные точки пути

я создал схематичный генератор облаков здесь. Каждая дуга облака генерируется случайным образом, кроме фиксированной первой и последней.

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

Проблема в том, что при интерполяции между старым и новым путем иногда смещается и последняя точка, хотя не должна.

Что я могу сделать, чтобы убедиться, что первая и последняя точка не двигаются?


person Bakaburg    schedule 19.06.2011    source источник


Ответы (1)


Вау, ваша облачная анимация выглядит очень хорошо. Я не совсем уверен, как работает функция анимации Рафаэля, но я подозреваю, что проблема возникает из-за того, как Рафаэль перемещается между двумя путями с разным количеством координат.

Вы можете обойти проблему, переместив последнюю букву z (замкнув фигуру) и вручную нарисовав линию между этими точками (убедитесь, что эта линия не является частью анимации). Другая возможность - убедиться, что в пути есть такое же количество координат, если вы хотите.

person Peter Collingridge    schedule 19.06.2011
comment
Спасибо! Проблема может заключаться в том, что если я разобью путь на две части, то заполнение формы сломается! если не сложно, не могли бы вы выложить пример? (PS: не стесняйтесь использовать облако!) - person Bakaburg; 20.06.2011
comment
Это немного хак, и углы не совсем правильные, но я думаю, что это работает нормально: dl.dropbox.com/u/169269/cloud.html - person Peter Collingridge; 20.06.2011
comment
Большое спасибо, это работает! Так что это определенно ошибка анимации SVG с закрытыми углами или ошибка raphael! - person Bakaburg; 20.06.2011