С днём рождения, Мак. Как добиться анимации логотипа на холсте, подобной этой?

введите описание изображения здесь

Как создавалась эта анимация? Может ли кто-нибудь привести пример, как создать подобную анимацию? Можно ли добиться такой анимации, используя холст и логотип в формате .svg? Это какой-то маскирующий эффект на холсте или что...?

Предварительный просмотр анимации логотипа на официальном сайте Apple.

Привет и добро пожаловать в ГД. Анимация просто сделана с помощью холста. Поиск по запросу «анимация холста» должен дать вам большое количество руководств и примеров.
@boblet Спасибо! Я искал в Google, прежде чем задать этот вопрос здесь, но не смог найти конкретного примера такой сложной анимации с использованием холста.

Ответы (2)

Анимация, кажется, связана с элементом холста .

<canvas height="496" width="688" style="width: 317.4284274193549px;"></canvas>

Но я не могу найти код Javascript на apple.com

Вот ссылка на код на странице, который, я думаю, управляет им. images.apple.com/v/home/ap/scripts/home.js Все это свернуто, поэтому трудно сказать, где именно, но поиск в этом коде выдает многочисленные ссылки на «холст».
@ckpepper02 jsbeautifier или jspretty — хорошие инструменты для деминификации .jsфайлов.
@Gramps, это было круто! Работал как шарм
некоторые из ссылок в приведенных выше ссылках выглядят так, как будто они взяты из проекта замены actionscript 3 с открытым исходным кодом «nanosome» ( assembla.com/code/nanosome/subversion/nodes/278/trunk/as3/flow/… ). В качестве альтернативы ссылки относятся к самому Adobe ActionScript. В любом случае, это, вероятно, какая-то разновидность Flash-анимации.
Привет, ребята, спасибо за попытку ответить на этот вопрос, а также спасибо @horatio за указание, что это может быть какая-то флеш-анимация. Я даже забыл о флеше в наши дни, когда все вокруг html5 и холста. Итак, я сделал поиск для экспорта флэш-анимации в холст html5, и я перехожу к этим ссылкам ниже. Возможно, они сделали анимацию с помощью флэш-памяти и экспортировали ее в анимацию холста. Посмотрите на это: ссылка1 и ссылка2

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

Трудно понять, сделаны ли маски из простых форм (таких как круг или прямоугольник) или немного сложнее, но мне кажется, что они не слишком особенные по форме.

Спасибо за ответ. Посмотрите на это видео, это почти тот же эффект маски: youtube.com/watch?v=fM_svH50fmM Итак, вы можете создать анимацию маски логотипа, подобную этой, используя Adobe Flash Pro CC или Adobe Flash Pro CS5 и выше, и экспортировать ее в html5. холст. При экспорте в html5 canvas создаются необходимые файлы html и javascript для обработки анимации.
Да, именно эту технику я и имел в виду. И спасибо за совет, я не знал, что Flash может преобразовать его в html5! :D
С днём рождения, Мак. Как добиться анимации логотипа на холсте, подобной этой?
СпросиСетьПолитика конфиденциальности1y, 0v