| Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате |
| Форум программистов > JavaScript: Общие вопросы > Окончание шнура извивается |
| Автор: FightInGlory 29.6.2010, 16:42 |
| Подскажите, как можно реализовать подобную вещь. При уменьшении/увеличении экрана окончание шнура (красного цвета), извивалось за шнуром. |
| Автор: ksnk 29.6.2010, 17:34 |
|
| Автор: IDVsbruck 29.6.2010, 17:37 |
| а) какое отношение гифка имеет к этому разделу? - в смысле, что хочется сделать на js как показано на картинке? б) это задание как раз для подраздела "JavaScript: для новичков", но явно не профи-вопрос ... Если как тут, то это делается для определенного количества положений, для которых и определяется "наконечник". На практике так: нижний слой - весь шнур, следующий слой - магнитофон в 3-4-5-6 положениях (сколько надо) и верхний слой - наконечник соответственно в 3-4-5-6 положениях. 3 картинки, которые при будто бы "анимации" смещаются и перерисовываются. Наконечник во всех положениях, естественно, в одной картинке, и перерисовка через изменение положения картинки в контейнере (CSS-sprites), а то мелькания достанут. А вообще-то, это баннерно-анимационная штука и заниматься подобным должны специальные инструменты - та же гифка (тьфу, не люблю и не использую) или флешка, где можно прорисовать действительно анимационную штуку, а не этот "фильмоскоп". |
| Автор: FightInGlory 29.6.2010, 20:02 |
| 2 IDVsbruck, данное изображение было в качестве примера. Оно показывает, что при изменении размера окна браузера шнур должен увеличиваться (если размер окна увеличивается), а наконечник перемещаться по вертикали за ним. Пример про слайды лично я не понял. Ну сделаю я 10 положения, но не добьюсь идеального плавного движения. И поверь данный пример далеко не каждый опытный сделает, не то что новичек. 2 ksnk, большое спасибо за ответ. Тоже не могу сообразить как быть со штекером, но надо именно так. |
| Автор: IDVsbruck 30.6.2010, 00:14 |
| Я не знаю кто такой новичЕк, с ним не знаком, но, в принципе, задача не так уж и сложна. Самый сложный вопрос, как ни странно, заключается в том, как быстро (и удобно) поворачивать картинку со штекером. Но вроде библиотеки есть - найти не составит труда. Главная "фича" в том, что шнур не берем с фоток, а рисуем сами - в фотошопе (уроков - море, абсолютно реалистичные получаются), но рисуем не просто линию, а, скажем, нарисованную где-то в Матлабе или Маткаде - можно чистую синусоиду, можно слегка затухающую или с переменным множителем угла (каждая "волна" шире или уже), выписываем и импортируем в графический редактор. Одним словом, суть в том, чтобы точно знать формулу шнура от вилочки до места "входа" в гаджет. Дальше - дело техники и аккуратного математического программирования. Нижний слой - шириной до гаджета - шнур, выше слой оставляем под штекер, и верний - гаджет. Так как у тебя есть точные координаты и функция кривой, значит, всегда можно вычислить вертикаль и угол касательной (первая производная, кажись - для тригонометрических функций там и вовсе просто). Остается только перемещать штекер по горизонтали вслед за гаджетом, по вертикали - ордината функции, а угол - касательная в месте соприкосновения шнура и гаджета. Для чистой синусоиды задача и вовсе простецкая, только не так фотореалистично будет. |
| Автор: mxt 7.7.2010, 00:46 |
| Если отвечать прямо на вопрос, как на картинке то делается просто (извеняюсь, если тут об этом написали, и я просмотрел) 1. Рисуется шнур (к примеру как на картинке) 2. Берется этот же шнур, перекрашивается и немного увеличивает его толщина (хотя необязательно) 3. Нижним слоем идет шнур. верхним та перекрашенная картинка с шириной 5px и с отступами слева в элементе и в фоне. 4. Затем при изменении размера, выставлять нужный отступ в обоих параметрах это если прям как на картинке. |
| Автор: SelenIT 9.7.2010, 03:16 | ||
По-моему, слегка модифицировав подход mxt, можно обойтись и без JS (если не учитывать IE6)...
|
