В данном уроке используется среда программирования Microsoft Visual studio 2012. Алгоритм работы аналогичен и для других сред программирования.
Перед тем, как приступить к данному уроку, следует ознакомиться с предыдущим уроком : Как начать работать с графикой в Microsoft C#
Сначала создаем свой проект, в котором и будем работать. Разместим на форме (Form1) объекты : PictureBox, Timer и Button следующим образом:
Теперь попробуем создать какую-нибудь примитивную анимацию, при помощи PictureBox и Timer, которая запустится после нажатия на кнопку (Button).
Следовательно для этого будем обрабатывать событие нажатия на кнопку и событие «срабатывания» таймера. Также заведем все нужные для рисования объекты и переменные.
Далее приведен код программы и скриншоты, которые содержат все необходимое пояснение реализации анимации.
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; namespace Lesson_Animation { public partial class Form1 : Form { Graphics gr; //объявляем объект — графику, на которой будем рисовать Pen p; //объявляем объект — карандаш, которым будем рисовать контур SolidBrush fon; //объявляем объект — заливки, для заливки соответственно фона SolidBrush fig; //и внутренности рисуемой фигуры int rad; // переменная для хранения радиуса рисуемых кругов Random rand; // объект, для получения случайных чисел public Form1() { InitializeComponent(); } //опишем функцию, которая будет рисовать круг по координатам его центра void DrawCircle(int x, int y) { int xc, yc; xc = x — rad; yc = y — rad; gr.FillEllipse(fig, xc, yc, rad, rad); gr.
DrawEllipse(p, xc, yc, rad, rad); } // для перехода к данной функции сделайте двойной щелчок по кнопке (Button) // добавленной на форму. См. на фото, после кода private void button1_Click(object sender, EventArgs e) { gr = pictureBox1.
Продвинутая анимация в PowerPoint | Секреты профессионала в дизайне презентаций
CreateGraphics(); //инициализируем объект типа графики // привязав к PictureBox p = new Pen(Color.Lime); // задали цвет для карандаша fon = new SolidBrush(Color.
Black); // и для заливки fig = new SolidBrush(Color.Purple); rad = 40; //задали радиус для круга rand = new Random(); //инициализируем объект для рандомных числе gr.
FillRectangle(fon, 0, 0, pictureBox1.Width, pictureBox1.
Height); // закрасим черным // нашу область рисования // вызываем написанную нами функцию, для прорисовки круга // случайным образом выбрав перед этим координаты центра int x, y; for (int i = 0; i 15; i++) { x = rand.Next(pictureBox1.
Width); y = rand.Next(pictureBox1.Height); DrawCircle(x, y); } timer1.
Enabled = true; //включим в работу наш таймер, // то есть теперь будет происходить событие Tick и его будет обрабатывать функция On_Tick (по умолчанию) } // для получения данной функции перейдите к конструктору формы // и сделайте двойной щелчок по таймеру, добавленному на форму. См. на фото после кода private void timer1_Tick(object sender, EventArgs e) { //сначала будем очищать область рисования цветом фона gr.
FillRectangle(fon, 0, 0, pictureBox1.Width, pictureBox1.
Height); // затем опять случайным образом выбираем координаты центров кругов // и рисуем их при помощи описанной нами функции int x, y; for (int i = 0; i 15; i++) { x = rand.Next(pictureBox1.Width); y = rand.Next(pictureBox1.Height); DrawCircle(x, y); } } } }
После этого, можно запустить программу и после нажатия на кнопку увидите простую анимацию – случайное перемещение кругов по черному фону, как показано ниже:
Для того, чтобы анимация соответствовала требованиям иногда необходимо менять так называемый тик таймера, т.е. промежуток выполнения очередного шага анимации. Это выполняется в Инспекторе объектов. Нужно выбрать элемент Timer, нажать на кнопку Свойства и там выбрать и изменить параметр Interval (выражается в миллисекундах) В данном примере Interval равен 150 мс.
Ниже прикреплен архив данного проекта.
| Skopinskiy_LessonAnimation.zip | 54.79 кб |
Источник: grafika.me
13 способов для создания Gif-анимации
Отношение к Gif -анимации как к еще одному способу подачи контента неоднозначное. Кто-то считает, что движущиеся картинки элементарно раздражают читателей, в каких-то редакциях и вовсе смысла в них не видят.
И все же это не так. Gif-фотографии, к примеру, в отличие от видеоюжетов, пользователям ваших сайтов не надо грузить.
Основные же моменты на них показать можно. Особенно, если моменты эти требуют нескольких просмотров, посекундной перемотки кадров.
Смотрите, как это сделали theatlanticwire.com. В общем, применять или нет, вопрос отдельный, но вот уметь создавать живые фотографии все же стоит.
Picasion.com – очень простой сервис для создания анимированных фотографий. Все, что нужно сделать, – загрузить несколько фоток
небольшого размера (чем меньше объем, тем процесс обработки быстрее). Результатом можно поделиться в твиттере и фейсбуке, картинку сохранить на в компьютере, а ссылку вставить на сайт.
Gickr.com работает по тому же принципу. Этот же сервис предлагает создать живую картинку с помощью фотографий в вашем Flickr-аккаунте.
Еще несколько похожих сайтов – superfotko.ru и htmlweb.ru.
Важный момент – имейте в виду, что действительно интересный Gif-результат получится только в том случае, если вы загружаете снимки, сделанные в последовательном порядке, через очень небольшой интервал времени. Потому анимированные фотографии лучше получаются из видео.
Gifninja.com сделает для вас анимированную картинку из видео, поможет распространить ее в твиттере и фейсбуке, сгенерирует код для вставки на сайт и предложит прямую ссылку.
Video2gif.net – еще один инструмент для создания подвижных фотографий из видео.
Gifsoup.com предназначен для создания Gif с помощью видео на YouTube. Чтобы начать работу, нужно зарегистрироваться. Но после это процесс очень прост – указываете ссылку на ролик, выбираете отрезок, из которого хотите сделать анимированную фотографию (которая бесплатно может быть длиной в 15 секунд. Платные версии – 5 долларов в месяц, 15 за полгода, 25 в год), выбираете категорию, указываете название и ставите теги.
Gifyo.com – сервис для тех, кто анимированную фотографию хочет сделать с помощью веб-камеры. Вход через аккаунты аккаунтов в твитере или фейбуке. Делаете несколько снимков, из которых сервис создает GIF-картинку, после чего итог можно распространить в социальных сетях.
А в этом видео доступно объясняется, как сделать Gif-анимацию с помощью Photoshop. Это уже другой уровень, и ваша картинка будет смотреться более профессионально. Если у вас есть время и желание приобрести новые навыки – попробуйте именно этот варинт.
Gif-animator.com – более профессиональная программа для создания анимированных изображений, платная, но не дорогая. За 29 долларов вы получите возможность редактировать создавать и редактировать GIF-файлы с помощью специальных эффектов.
Бесплатно можно скачать Total Video Converter, этот инструмент вам пригодиться не только для превращения видео в Gif-картинки, но и для конвертации разных форматов.
«Мобильно» «живые» фотографии можно создать при помощи cinemagr.am, бесплатного сервиса для IPhone, а для Android есть специальная программа GifBoom.
Если вам интересно увидеть действительно профессиональные GIF-работы, зайдите на tumblr.com и в рубрике «Поиск по тегам» наберите «GIF». Есть однозначно стоящие вещи.
Источник: newreporter.org
Эффект синемаграфии в слайд-шоу
4.0 Оценок: 2 (Ваша: )
Хотите удивить близких и друзей? Сделайте слайд-шоу с элементами синемаграфии! В программе «ФотоШОУ PRO» вы найдете все необходимые инструменты для создания подобного проекта. Прочитайте статью и узнайте обо всех нюансах разработки слайдов с «живыми» фотографиями. А если у вас ещё не установлено «ФотоШОУ PRO», исправьте это прямо сейчас: скачайте программу для создания слайд-шоу с нашего сайта.
Что такое синемаграфика
Для начала давайте разберемся, что собой представляет данный эффект. Синемаграфикой (Cinemagraphs) называются картинки, на которых находится в движении один или сразу несколько элементов. Вся остальная часть изображения при этом всегда остается статичной. На пейзажном снимке может двигаться вода, облака, бабочки и другие детали, а на фото с изображением людей у моделей могут развеваться волосы или колыхаться одежда.
Синемаграфия выгодно отличается от обычного видео тем, что такое изображение весит значительно меньше и не перегружает интернет-сайт. При этом эффект производит по-настоящему впечатляющий.
Примеры синемаграфии
Синемаграфия смотрится по-настоящему привлекательно, завораживает. Это её свойство активно используют в рекламных целях. Хотя приём известен давно, он не стал «заезженным» и продолжает производить впечатление на зрителя. Товар захотят купить, услугой – воспользоваться.
Посмотрите, какие оригинальные идеи синемаграфии уже воплотили в жизнь Кевин Бург и Джейми Бек, люди, придумавшие эффект движения на фото:
Рекламное изображение для автомобильной компании Lincoln. Романтику ретро подчёркивают развевающиеся волосы девушки-хиппи и летящие лепестки.
Синемаграфия по заказу от Amazon. Если смотреть долго, то помимо вращающихся вентиляторов и колыхания платья можно заметить, что модель моргает.
Стильная реклама для бренда Armani. Особенно эффектно выглядит то, что падающие осенние листья выглядят чёткими за линзами очков и размытыми –
на остальной части «живой» картинки.
Рекламное изображение для Chanel. Помимо «живых» бенгальских огней на названии бренда можно заметить, что изредка девушка опускает веки.
Синемаграфия для швейцарского производителя часов и ювелирных украшений премиум класса Chopard. Здесь достаточно много подвижных элементов, а статичными остаётся ветровое стекло и часы на запястье мужчины, создавая ощущение уверенности и стабильности.
Как самостоятельно сделать живые фотографии
Сделать движущиеся фото можно самостоятельно в домашних условиях. Для этого не понадобится сложная техника, а достаточно будет специального программного обеспечения. Итак, где можно подготовить свои «живые картинки»:
- Adobe Photoshop. Эффект синемаграфии в программе делается через импорт видео в слои и работу с отдельными кадрами.
- Adobe Premiere Pro. Здесь можно покадрово работать с видео и анимировать объекты по ключевым кадрам.
- Мобильное приложение Cinemagraph (есть версии для iPhone и для Android). Синемаграфия создаётся из коротких видео, снятых прямо на камеру телефона.
Однако первые две программы для создания живых фото являются профессиональными, а потому дорогостоящими и достаточно сложными в освоении. Мобильное приложение тоже удобно не для всех случаев и не способно добавить эффект синемаграфии на снимки, только создать GIF из видео.
Если ищете быстрый и простой способ, как сделать движущуюся фотографию без фотошопа, изучите приведённый ниже урок:
Для начала вам понадобится фоторедактор «Домашняя Фотостудия».
- Шаг 1. Загрузите выбранную фотографию в программу. В меню «Эффекты» выберите опцию «Замена фона».
- Шаг 2. Выделите область, которую хотите анимировать. Размойте границы фрагмента, передвинув бегунок на одноименной шкале вправо.
- Шаг 3. Сохраните элемент. Установите переключатель на пункт «Без фона» и кликните «Сохранить в файл…». Выберите PNG, дайте изображению имя и поместите его в нужную вам папку.
Теперь разберём, как сделать живые фото Cinemagraph. Для этого нам потребуется программа «ФотоШОУ PRO». Запустите её и добавьте оригинал изображения на монтажный стол. Попробуем сделать живое фото. Синемаграфия в программе создается в редакторе слайда.
Сразу же растяните фотографию на весь экран. Этот нехитрый прием поможет избавиться от черных полос по бокам слайда.
Добавьте на слайд фрагмент изображения, извлеченный в фоторедакторе. Настройте его местоположение и размер при помощи мыши.
Если обрезка получилась слишком «грубой» и у фрагмента выделяется одна из сторон, то примените к слою маску.
Теперь перейдем к оживлению изображения. Добавьте второй ключевой кадр и задайте настройки для слоя в конце показа. В нашем примере для создания эффекта движущейся реки нужно сдвинуть слой вправо и увеличить его. Это можно сделать вручную или во вкладке «Анимация».
Если движению не хватает плавности, то увеличьте длительность слайда.
Синемаграфия готова! При желании вы можете продолжить работу над слайдом. Кадр станет еще интереснее, если вы воспользуетесь функцией «3D-камера». С ее помощью вы сможете сделать эффект приближения слайда. Добавьте ключевой кадр в конец таймлайна и потяните бегунок на шкале «Приближение» вправо.
Бушующее море и таинственный туман:
идеи для синемаграфии
С «ФотоШОУ PRO» вы быстро почувствуете себя настоящим волшебником! Добавляя движение в одну из частей снимка, вы сможете добиться поистине фантастического результата за короткие сроки. Но и это далеко не всё! Вы можете не только сделать синемаграфию, но также узнать, как дополнить фото эффектом реалистичного тумана.
Просто наложите на исходную картинку фрагмент соответствующей текстуры и настройте ее. Добавьте второй ключевой кадр и сделайте слой с туманом меньше.
Для исходной фотографии тоже добавим ещё одну ключевую точку. Здесь слой будет медленно и плавно увеличиваться.
Такие настройки помогут зрителю полностью окунуться в атмосферу происходящего на экране. Не забывайте, что вы можете добавлять сразу несколько дополнительных слоев. Например, на таком снимке можно одновременно «оживить» море, тучи и солнце:
Чтобы сделать движущуюся картинку, в фоторедакторе сначала вырежьте часть изображения с небом и сохраните ее в отдельный файл. Затем аналогично отделите море и сохраните в той же папке. Когда подготовка завершится, наложите оба получившихся фрагмента на исходное изображение в «ФотоШОУ PRO».
Дальше перейдем к настройке анимации для слайда. Слой с водой во второй ключевой точке будет постепенно плавно сдвигаться вниз и увеличиваться.
Для слоя с тучками и солнечными лучами зададим плавное движение вправо, остальные параметры оставим без изменений и тут же оцените результат в плеере.
Хотите узнать, как сделать данную синемаграфику ещё более зрелищной? Воспользуйтесь инструментом 3D-камера: поэкспериментируйте с приближением, добавьте движение влево, вправо, вверх или вниз.
Сохраняйте готовую анимацию в удобном вам виде! Экспортируйте проект в любом видеоформате вместе с другими слайдами. Также программа для анимации фото позволяет сохранить созданный слайд отдельно и позже преобразовать его в GIF. Загружайте работы в сеть и делитесь ими с людьми со всех уголков планеты!
Понравилась статья? Расскажите друзьям!
ВАМ ЭТО ПОНРАВИТСЯ:
Как сделать титры в видео
Программа для создания презентаций
Как в картинку вставить видео
Как сделать фильм из фотографий
Начните создавать свои уникальные слайд-шоу сейчас!
Скачать сейчас Купить со скидкой Отлично работает на Windows 11, 10, 8, 7 и XP
Источник: fotoshow-pro.ru