Перейти к содержимому

Giffy canvas figma как пользоваться

  • автор:

Вопросы с меткой [gif]

Данную метку использовать во всех вопросах связанных с GIF (Graphics Interchange Format) — популярным растровым форматом графических изображений. Способен хранить сжатые данные без потери качества в формате не более 256 цветов.

70 вопросов
Конкурсные
Неотвеченные

  • Конкурсные 0
  • Неотвеченные
  • Цитируемые
  • Рейтинг
  • Неотвеченные (мои метки)

при установки darling выдаёт этот текст

я так понял нужны GIF_LIBRARY GIF_INCLUDE_DIR я некоторые библиотеки связанные с gif скачал, но не помогло. $GIF_DIR — тоже пустая переменная. XRandR установлен и работает, проверил. Подскажите .

98 показов

Тормозит анимация gif смайлов в TextView

Приложение: аналог форума. В списке отображаются посты участников (html), текст с изображениями, в том числе и gif. В обычном адаптере для recyclerview, через HtmlCompat.fromHtml загружаю html с .

Почему изображение вылезает из окна matplotlib при задаче параметров размера окна?

Пишу 2D-игру на python. Мой код выводит GIF анимацию на экран с помощью Matplotlib. Я хочу настроить положение и размер окна с анимацией, используя plt.get_current_fig_manager().window.wm_geometry(‘.

39 показов

Как избавиться от ошибки в коде для склейки видео по запросу пользователя? moviepy

Я совсем новичок, решил поэкспериментировать, поэтому заранее извиняюсь) В общем, была задача такая: -в папке лежат 33 gif с анимацией каждой буквы алфавита -пользователь вводит слово, например, «.

46 показов

Почему lottie выдает ошибку ImportError: cannot import name ‘PngRenderer’ from ‘lottie.exporters.cairo’?

Пытаюсь конвертировать .tgs стикер в gif, используй lottie: from lottie.exporters.gif import export_gif from lottie.parsers.tgs import parse_tgs import logging def convert_tgs_to_gif(tgs_file, .

25 показов

как с помощью питона, юзер-бота, отправить гиф сообщение?

как с помощью питона, юзер-бота, отправить гиф сообщение, с файлов ПК? есть код для отправки фото, думал фартанёт и он сможет тем же принцепом отправить гиф, но отправляет только фото первого кадра из .

86 показов

Анимация gif изображения на C#

В программировании я новичок. Пытаюсь разобраться в работе класса ImageAnimator.Нужно не используя pictureBox вывести на форму анимированное изображение из готовой gif картинки (или из ее отдельных .

25 показов

Отображение файлов с форматом .gif из базы mysql

Файлы с форматом .gif сохраняются также, как и обычные статичные картинки? Обычные картинки отображаются на сайте с помощью ссылки из базы данных mysql, например: ‘background: url(«http://.

113 показов

Проблемы с наложением gif анимации на изображение с помощью pillow

Мне нужно наложить готовую gif анимацию на картинку неважно какого формата(jpeg, png, gif и т.д) на определённые координаты. Я подумал что можно сделать так: from PIL import Image img = Image.open(.

2k показов

Как добавить .gif на label PyQt5

я хочу добавить gif.gif анимацию на label. Если ставить её как pixmap, то ничего не получается. Как добавить gif.gif в обычный label без изменения его размера? from PyQt5 import QtCore, QtGui, .

180 показов

Задний фон приложения

Делаю приложение на PyQt5 и хочу поставить на задний фон приложения ролик или .gif, но ни как не могу найти информацию на счет этого. Как это сделать? import sys from PyQt5 import QtCore, QtGui, .

696 показов

Python. Рисовка изображений поверх окон

Ранее я обращался с вопросом: Создание изображений на главном экране Однако я так и понял как именно я могу рисовать изображения (image.jpg / image.gif), а не формы, такие как квадрат или круг. В .

Почему в python не компилируются в .exe аудио и картинки .jpg?

Написал программу на Python, она идеально работает в консоли и в разрешении .pyw, но после того, как я скомпилировал её в .exe файл, в программе не сработала музыка, не отображались картинки, для .

98 показов

Ошибка tkinter, при использовании gif анимации в python. («after» script)

from tkinter import * import time import os root = Tk() frameCnt0 = 12 frames = [PhotoImage(file=’C:\\Python\\1.gif’,format = ‘gif -index %i’ %(i)) for i in range(frameCnt0)] def update(ind): .

Как разместить гифку на Canvas

Я создаю игру, и в моей игре, когда HERO стоит рядом с MONSTER, будет отображаться гифка, чтобы напугать игрока. Но я не знаю, как это сделать. Пытался поставить PHP или HTML код, но не работает . .

15 30 50 на странице

    Важное на Мете

Связанные метки

Подписаться на ленту

Лента последних активных вопросов с меткой [gif]

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Вопросы с меткой [gif]

Данную метку использовать во всех вопросах связанных с GIF (Graphics Interchange Format) — популярным растровым форматом графических изображений. Способен хранить сжатые данные без потери качества в формате не более 256 цветов.

70 вопросов
Конкурсные
Неотвеченные

  • Конкурсные 0
  • Неотвеченные
  • Цитируемые
  • Рейтинг
  • Неотвеченные (мои метки)

2k показов

Управление анимацией GIF посредством JavaScript

Есть ли способы управлять анимацией анимированного GIF посредством JavaScript? Если есть способы, то как это можно сделать? Нужно четыре действия: Отобразить анимированный GIF при загрузке страницы .

задан 6 ноя 2018 в 15:54

Как склеить текст (стилизованный css) и картинку средствами JS (пример в приложении)

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

задан 7 мар 2018 в 11:54
472 показа

Как анимировать стрелочки на картинке?

Появилась идея сделать анимированные потоки воздуха(стрелки) на сайте с исчезновением в конце. Только не знаю как лучше реализовать. Как вариант думаю нарисовать в Figma стрелку и искажая её сделать .

задан 24 мар 2021 в 22:37
1k показов

Отображение анимированного gif изображения загруженного из сети на Android

Дано: Ссылка на *.gif файл. Задача: Отобразить его в анимированном виде. Да ещё и кэшировать. Попытки решения: Нашёл вот тут два класса. Первый отвечает за декодирование gif файла, второй — .

задан 4 янв 2016 в 15:35

Как разместить гифку на Canvas

Я создаю игру, и в моей игре, когда HERO стоит рядом с MONSTER, будет отображаться гифка, чтобы напугать игрока. Но я не знаю, как это сделать. Пытался поставить PHP или HTML код, но не работает . .

задан 18 дек 2021 в 16:53
2k показов

Как добавить .gif на label PyQt5

я хочу добавить gif.gif анимацию на label. Если ставить её как pixmap, то ничего не получается. Как добавить gif.gif в обычный label без изменения его размера? from PyQt5 import QtCore, QtGui, .

задан 21 мар 2020 в 12:00
180 показов

Задний фон приложения

Делаю приложение на PyQt5 и хочу поставить на задний фон приложения ролик или .gif, но ни как не могу найти информацию на счет этого. Как это сделать? import sys from PyQt5 import QtCore, QtGui, .

задан 8 фев 2022 в 17:48
107 показов

Как программно определить статичный gif или анимированный на PHP?

Необходимо программно различать анимированные gif от статичных, для разного их отображения, может кто подскажет ?

задан 15 сен 2017 в 7:40
249 показов

Слияние: png + gif + gif +png

Задача: требуется объединить (т.е. наложить друг на друга две анимированных gif, одну png с прозрачным фоном и фоновую png). Пытаюсь реализовать это на Python через PIL. Пока получилось добавить фон к .

задан 7 ноя 2021 в 11:22
2k показов

Как сделать фон сайта из разных gif

Пытаюсь сделать фон из нескольких gif-картинок. Хотелось бы чтобы и справа была гифка и слева, и соответственно так же вверху и внизу. Делаю так на странице, пока получилось по центру одну влепить. .

задан 12 июн 2019 в 6:59
1k показов

Почему подвисает прелоадер?

Использую на сайте gif-прелоадер. Пока прелоадер крутится — на страницу динамически ajax-запросами загружается контент. Проблема в том что мой gif-прелоадер крутится только когда хочет. В основном он .

задан 14 дек 2016 в 11:36
1k показов

Создание видео из картинок на сервер (PHP)

Здравствуйте. Была задача, создать Gif’ку на сервере из обычных картинок (jpg). Задача была решена с помощью php библиотеки GD, но после этого с толкнулся с проблемой отображения gifok на .

задан 27 июл 2016 в 13:27
359 показов

Создание gif-анимации демонстрирующей работу приложения

Дано: Приложение, выложенное на github. Задача: В README поместить gif-анимацию работы приложения. Возможное решение: В AndroidStudio видел кнопку «сделать видео работы приложения» (там же где .

задан 19 сен 2015 в 19:57
195 показов

Поток bmp преобразовывать в video c++

Есть поток bmp, которые поступают с камеры. Я хочу эти bmp преобразовывать в какой-нибудь видеоформат. Какой кодек лучше всего подключить? Смотрел на magick++ и ffmpeg, на первый взгляд, не .

задан 17 ноя 2014 в 10:45
2k показов

Конвертирование gif в webm и mp4 с помощью ffmpeg

Стоит задача конвертировать gif в 2 видео формата. С webm проблем нет, применяю $ ffmpeg -f gif -i in.gif out.webm Всё прекрасно обрабатывается и работает в браузерах. Применяю аналогичное для mp4 .

задан 3 апр 2015 в 7:23
15 30 50 на странице

    Важное на Мете

Связанные метки

Подписаться на ленту

Лента вопросов с наивысшим рейтингом по меткам [gif]

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Анимации в Xcode без кода

Статья написана в декабре 2013 года, сегодня нашлась и я решил ее опубликовать. Надеюсь кому-то будет полезна. После написания руководства по использованию Xcode 5 для дизайнеров, я сразу почувствовал необходимость в продолжении, чтобы как можно больше дизайнеров избавились от страха анимировать свои творения самостоятельно. Читайте также: Обучение Swift и Xcode для дизайнера. Создание своего приложения на Swift

Canvas

http://canvaspod.io — так как кодинг макета может вызывать трудности в Xcode, мы постарались сделать Canvas максимально легковесным и мощным в работе. Наша цель — ускорить iOS-разработки в разы, используя готовую библиотеку, решающую большую часть задач по макету, чтобы вы могли сфокусироваться на других вопросах. Примеры таких задач — анимации, кастомные шрифты, звуки, фоновые размытия, диалоги и т.д. — все это недоступно в Xcode. Да, мы создали приложение для iOS 7, чтобы показать всю мощь Canvas, и оно open-source. Скачайте его себе!

Работа с Xcode Storyboard

Недавно @jamztang, наш iOS-инженер, показал, как создавать функции, которые будут напрямую подключаться к Storyboard используя атрибуты времени выполнения (Runtime Attributes) инспектора Identity. Это означает, что вам не нужно ничего кодить руками, чтобы запускать функции. С помощью простой библиотеки Animations вы можете вызывать анимации, регулируя разные параметры, такие как задержка и длительность. Точь-в-точь как Animate.css, но для iOS-разработок. Использование анимации fadeIn (затухания) из Canvas, которая длится 0.5sec и начинается после 0.5sec задержки.

Установите CocoaPods

CocoaPods — менеджер библиотек для iOS — очень похоже на Bower (веб) или NPM (узел). Если вы не установили CocoaPods, сначала запустите эту команду. Для подробностей перейдите на http://beta.cocoapods.org Перейдите на свой проект Xcode, используя терминал, и создайте Pod-файл. Затем, просто добавьте 2 строки кода, чтобы указать библиотеку, которую хотите установить Когда закончите, сделайте “pod install”. Теперь открывайте .xcworkspace, и ваш основной Xcode-проект будет обращаться ко всем файлам через поды.

Встраивание во View

Выделите любой элемент или группу элементов и встройте ее в вид, чтобы можно было вызвать анимацию. Xcode требует определенности с объектом, который вы вызываете. В целях простоты, анимация будет работать только если все обернуто в представление (View). Укажите CSAnimationView и настройте задержку, длительность и тип

Использование с кодом

Простите, что? Кодинг опционален на данном этапе, но если вы хотите продвинуться, например, начать анимацию по нажатию кнопки, придется немного поработать вручную. Каждый экран подключен к ViewController.h /.m. Вот там вы и можете писать код под свой UI. Думайте, что это ваш CSS или Javascript, где можно кастомизировать все, что нельзя кастомизировать через Storyboard. Давайте создадим представление IBOutlet View и IBAction. Мы назвали этот IBOutlet “listView”, параметры которого заданы в Storyboard. Затем, в ViewController.m, импортируйте CSAnimationView.h и сделайте startCanvasAnimation. Вуаля! Кодить не так и плохо, да? 🙂

Компоненты

Наши амбиции насчет Canvas гораздо больше, чем просто анимации. Мы хотим позволить дизайнерам делать все, о чем они мечтали, с минимумом кода. Для этих целей прилагаем несколько недостающих фрагментов из Xcode.

Кастомные шрифты

В каждом проекте есть info.plist. Тут можно указать кастомные параметры приложения. В данном случае мы настроим только что добавленные шрифты. Теперь просто добавьте Property Fonts для приложения. Включайте свои шрифты, используя имена файлов. В Storyboard, Runtime Attributes, задайте fontName для мени PostScript. Название шрифта, которое распознает Xcode — это название PostScript из Font Book. Вот, теперь у вас есть красивый кастомный шрифт 🙂

Размытый фон

Размытые фоны не так-то просто реализовать в iOS7. К счастью, есть метод достичь того же эффекта, который включен в эту библиотеку. Включите класс CSBlurView Class, задайте параметру barStyle значение 1 для Black translucence или 0 для White. Убедитесь, что Object, к которому применяются настройки, — это View.

Светлая строка статуса

В iOS 7 сложновато переключаться с черной статусной строки на светлую. Вдобавок, тема экрана загрузки отдельна от основной темы приложения. Перейдите на info.plist и добавьте параметр Status Bar style в значении Light

Скачайте Ripple-demo 1.1

Я обновил проект, добавив эти крутые анимации, CocoaPod-ы и кастомизации, так что вперед, играйтесь! К сожалению, не могу поделиться файлами шрифтов, так что придется вам использовать свои. Скачать Ripple 1.1

Чего ждать?

К библиотеке планируется добавить больше анимаций. Также, больше атрибутов для анимаций, таких как Ease-In/Out, Enter/Exit, Distance и т.д. В качестве компонентов мы также планируем добавить параллакс, заголовки-липучки, онбординг, размытый фон и целый ряд кастомизаций, недоступных в Xcode, и через Storyboard,и через код.

Разработчикам нужна ваша помощь

В этот проект было вложено много часов: мы разработали iOS-приложение, CanvasPod.io, демо Ripple и библиотеку CocoaPod, а также уроки. Если вам нравятся эти работы, делитесь ими с окружающими. Чем больше фидбека мы получим, тем лучше ! 🙂 Следите за проектом: @canvaspod Или его создателями: @mengto, @jamztang Перевод статьи Meng To

Руководство по созданию бодреньких прототипов с GIF-анимацией в Figma

Анастасия Свеженцева Продуктовый дизайнер (UX/UI), веб-дизайнер и бренд-дизайнер. Опыт проектов в международных компаниях Omega-R (агентство), iSpring Solutions (продуктовая) и со стартапами по всему миру. Делюсь опытом в дизайне на офлайн- и онлайн-платформах с 2017 года: Институт программных систем, godesign.school, онлайн-платформа breezzly.ru и пишу микролекции о дизайне на Яндекс.Кью (226 ответов). Июн 15, 2022 · 3 мин читать

Figma наконец-то поддерживает GIF-анимации в прототипах! Теперь можно просто закинуть GIF в макет и все готово, прототип в режиме “Present” теперь в разы реальнее.

На данный момент GIF-ки в Figma – самый быстрый способ придать динамику вашим мобильным приложениям, User Flow и презентациям.

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? ��
Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook

С ними макеты выглядят в разы живее и нагляднее. GIF-ки можно применять для разных целей: для видео, микро взаимодействий, в общем для передачи любого движения в интерфейсах. Вот как работают GIF-файлы в прототипах Figma:

  • Добавьте GIF в ваш файл Figma. GIF можно собрать в ScreenFlow, LICEcap, Principle и After Effects.
  • Нажмите кнопку «Present» и поглядите, как ваш прототип ожил;

Обратите внимание, что GIF-файлы анимируются только в режиме “Present”, а на артборде они будут отображаться как статическое изображение. Чтобы помочь вам различать несколько похожих GIF-файлов, вы можете выбрать задать им разные обложки в редакторе через панель свойств.

А еще, если вы создаете прототип мобильного приложения Figma, вы заметите скролл близкий к нативному iOS и обновленный тач-курсов, вот такие мелочи в связке с поддержкой GIF призваны сделать ваши прототипы еще на шаг ближе к живым системам.Кстати, вы можете пофильтровать наш канал @FigmaDesign по тегам #GIFma и поглядеть еще кучу бодреньких примеров.

А вот подборка из самых интересных на наш взгляд

1. Заставка с анимацией Uber

Первое впечатление – это важно, и заставка, безусловно, работает на это. Поглядите как заставка Uber приветствует пассажиров.

2. Загрузчик в Slack

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

3. Индикаторы прогресса Material Design

Порой самое простое и есть самое лучшее. В Material Design представлены линейные и круговые индикаторы прогресса, каждый из которых для определенных нужд.

4. Иллюстрированный онбординг от Headspace

Полезные анимации в связке с советами «Getting Started» повышают вовлеченность пользователей. Вот и ребята в Headspace решили запилить анимации в интерфейсе, которые погружают в ассортимент мест, где приложение будет кстати.

5. Онбординг с видео от Hyperlapse

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

6. Сайт Mapbox:

GIF-файлы классно работают и на веб-сайтах. Поглядите на главную Mapbox с зацикленным видео в шапке сайта.

7. Иллюстрации на сайте Mailchimp

GIF при умелом применении – это конечно фантастика. На сайте Mailchimp вы найдете анимации от которых сами по себе живенькие иллюстрации обретают особенный вкус.

А вот и файлик с Figma starter, там можно найти мобильные приложения с применение GIF-файлов. Попробуйте запустить и поглядеть, как это все происходит вживую. По мне дак огонь!

Напомню также, что если вам нужно больше практики по Фигма, то заглядывайте в свежий обзор курсов по Figma.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *