Моя цель — сделать так, чтобы сегменты волны двигались от нижней части экрана к верхней, одновременно анимируя волну. Код, который я использую для создания волны, взят с сайта paperjs.org:
http://paperjs.org/tutorials/animation/creating-animations/#animating-path-segments
В идеале я хотел бы закрыть путь точками, которые остаются привязанными к нижнему левому и правому краю окна просмотра. Так я могу заполнить волну сплошным цветом.
Просто добавьте точки к вашему пути до и после цикла for, который генерирует ваши равномерно распределенные сегменты:
path.add(new Point(0, 1) * view.size);
// Add 5 segment points to the path spread out
// over the width of the view:
for (var i = 0; i <= amount; i++) {
path.add(new Point(i / amount, 1) * view.size);
}
path.add(new Point(1, 1) * view.size);
Это даст вам точки, привязанные к нижней части вашего представления. Чтобы учесть новые сегменты, измените цикл for в функции onFrame следующим образом:
for (var i = 1; i <= amount+1; i++) {
segment.point.y = sinus * height + 200;. Я пытаюсь постепенно перемещать эти сегменты из нижней части страницы в верхнюю, чтобы они постепенно полностью покрывали страницу. У меня возникли проблемы с изменением этой строки кода, чтобы сместить позицию y этих сегментов вверх по странице.
- person cssboy; 27.08.2013
point.y, также должна постепенно перемещаться к верхней части страницы, одновременно выполняя существующую волновую анимацию. Объединение этих двух анимаций — это то, на чем я зациклился.
- person cssboy; 27.08.2013
segment.point.y = sinus * height + view.size.height - event.count;
- person Alex Blackwood; 27.08.2013
