Я делюсь простыми идеями дизайна взаимодействия, которые помогут вам начать путешествие во Framer. Загрузите 14-дневную бесплатную пробную версию Framer, чтобы начать работу.

День 1: Карусель угловых ящиков

Используемые элементы обрамления

  • Фоновый слой
  • Слой
  • Центрирование слоя
  • Служебные функции (маркировка слоя)
  • Обработчик события клика
  • Функция анимации

День 2: Фальшивая кнопка« Предыдущее состояние »

Используемые элементы обрамления

  • Состояния слоя
  • Служебные функции (маркировка слоя)
  • Обработчики событий кликов
  • Методы массива JavaScript

День 3: Расширение модального окна

Используемые элементы обрамления

  • Состояния слоя
  • Обработчики событий кликов
  • Супер слои
  • Мин. / Макс. Размещение по осям X / Y
  • Пружинные кривые

День 4: Переключатель настроек iPhone

Используемые элементы обрамления

  • Слой теней
  • Обработчики событий кликов
  • Супер слои
  • Параметры анимации состояния
  • Пружинные кривые

День 5: Строка поиска мобильного браузера

Используемые элементы обрамления

  • Объект анимации, методы и функции
  • Стилизация слоя с помощью свойства style.
  • Слой текста через свойство «html»

День 6: Ярлык папки док-станции Mac OSX

Используемые элементы обрамления

  • Функции анимации
  • События MouseOver и MouseOut
  • Слой теней

День 7: Выдвижной ящик с зоной приема.

Используемые элементы обрамления

  • Свойства перетаскиваемого слоя: включено, ограничения
  • События перетаскивания: начало, перемещение, конец
  • Событие мыши

День 8: Три марионетки с ружьями.

Используемые элементы обрамления

  • CoffeeScript «for… in» цикл
  • Изменения состояния: switch и next ()
  • События мыши

День 9: Видеоплеер с паузой, остановкой, повтором

Используемые элементы обрамления

  • Супер слои
  • Объект анимации
  • Обработчики событий: нажмите, onAnimationEnd, isAnimating.
  • Условная логика

День 10: Размещение значка на главном экране iOS

Используемые элементы обрамления

  • Методы перетаскивания слоя: перетаскиваемые .enabled .constraints
  • Методы объекта анимации: старт, стоп
  • Обработчики событий: DragEnd, onAnimationEnd, MouseUp, MouseDown
  • Условная логика

День 11: Глобальная навигация Smashing Magazine

Используемые элементы обрамления

  • Массив JavaScript и цикл for
  • Свойство слоя: изображение
  • Обработчики событий: onMouseOver, onMouseOut, onAnimationEnd, MouseUp, MouseDown

День 12: Эффект глянцевого наведения на кнопку.

Используемые элементы обрамления

  • Свойство слоя: skewX

День 13: Модальное окно подтверждения Flappy

Используемые элементы обрамления

  • Свойство слоя: originY
  • Обработчики событий: onMouseOver, onMouseOut
  • Состояния слоя: добавить, animationOptions, next
  • Утилиты: labelLayer

День 14: Форма №1 материального дизайна

Используемые элементы обрамления

  • Свойства слоя: originY, style, html, minY, maxY
  • Состояния слоя и параметры анимации
  • Объект анимации
  • Обработчики событий: onAnimationEnd, onClick

День 15: Форма № 2 материального дизайна

Используемые элементы обрамления

  • Свойства слоя: клип
  • Использование суперслоя в качестве оси для вращения подслоя

День 16: Ползунковый тумблер с подпрыгивающим счетчиком

Используемые элементы обрамления

  • Перетаскиваемые методы: включенный, overDrag, импульс, ограничения, вертикальный
  • Пружинные кривые
  • Состояния слоя
  • Обработчики событий: MouseDown, Drag, MouseUp

День 17: Ползунок управления ползунком диапазона

Используемые элементы обрамления

  • Методы перетаскивания: enabled, overDrag, constraints, vertical
  • Состояния слоя
  • Обработчики событий: onMove
  • Условная логика

День 18: Любопытное лицо осматривается вокруг.

Используемые элементы обрамления

  • Перетаскиваемые методы: включены, ограничения, вертикальные
  • Состояния слоя
  • Обработчики событий: onDragMove
  • Условная логика
  • For… in loop

День 19: Индикатор прогресса прокрутки страницы

Используемые элементы обрамления

  • ScrollComponent
  • Свойство прокрутки: scrollHorizontal, content
  • Обработчики событий: onMove
  • Условная логика
  • For… in loop

День 20: Анимация статуса отправки текстовых сообщений

Используемые элементы обрамления

  • Свойства слоя: тени, стиль, изображение, originY, scaleY
  • Свойство объекта Framer ‘Align’
  • Объекты анимации
  • Обработчики событий: onMouseDown, onStateDidSwitch

День 21: Морфинг-Сквер.

Используемые элементы обрамления

  • For-in loop
  • Align.center со значениями смещения
  • Объект анимации
  • Пружинные кривые

День 22: Значок приложения« Часы для iOS »

Используемые элементы обрамления

  • Супер слои
  • Объекты анимации
  • Свойства слоя как вычисления для других свойств
  • Align.center со значениями смещения
  • Массивы Javascript
  • Обработчик событий: onClick

День 23: Таймер обратного отсчета №1

Используемые элементы обрамления

  • Объекты анимации
  • Свойства слоя как вычисления для других свойств
  • Выровнять объект: по центру, снизу
  • Flexbox в свойстве стиля слоя
  • Свойство Layer html
  • Обработчик событий: Click, onAnimationEnd, изменить: scaleY

День 24: Таймер обратного отсчета №2

Используемые элементы обрамления

  • Объекты анимации
  • Свойства слоя как вычисления для других свойств
  • Выровнять объект: по центру, сверху, снизу
  • Flexbox в свойстве стиля слоя
  • Свойства слоя: scaleY, originY
  • Состояния слоя: animationOptions, add, switch, switchInstant, next, current
  • Свойство Layer html
  • Обработчик событий: Click, change: scaleY

День 25: Модуль подписки по электронной почте

Используемые элементы обрамления

  • Обработчики событий: Click, DoubleClick, MouseOut
  • Состояния слоя
  • Flexbox в свойстве стиля слоя

День 26: Клавиатура iOS

Используемые элементы обрамления

  • Flexbox в свойстве стиля слоя
  • for… в цикле
  • Обработчики событий: onMouseDown, onMouseUp
  • Array.slice () метод

День 27: Современные коробки завтрашнего дня.

Используемые элементы обрамления

  • Массив, содержащий несколько объектов
  • ScrollComponent и его свойства: contentInset, content
  • Состояния слоя и методы состояния
  • Методы выравнивания объекта: по центру, сверху, справа
  • Дети слоя
  • for… в цикле
  • Utils.randomColor
  • Flexbox в свойстве стиля слоя
  • Обработчики событий: onMouseOver, onMouseOut, onClick

День 28: Список новостей Google

Используемые элементы обрамления

  • Framer Defaults свойство
  • Компонент прокрутки: scrollToPoint, контент
  • for… в цикле
  • Состояния слоя: layer.states.current
  • Условные утверждения
  • Обработчики событий: MouseOver, MouseOut, Move, Click

День 29: Пункт выпадающего меню с подменю №1

Используемые элементы обрамления

  • Расположение слоев: sendToBack
  • Условные операторы с операторами сравнения
  • Javascript toFixed метод
  • Состояния слоя: layer.states.current
  • Обработчики событий: MouseOver, MouseOut

День 30: Пункт выпадающего меню с подменю №2

Используемые элементы обрамления

  • Петли
  • Условные утверждения
  • состояния
  • События
  • Расположение слоев
  • Свойства слоя: originX, scaleX

День 31: Слайдер полностраничного контента

Используемые элементы обрамления

  • HTML и CSS в свойствах слоя
  • состояния
  • События
  • Оператор JavaScript "switch"
  • Манипуляция объектами Framer

День 32: Super Street Fighter

Используемые элементы обрамления

  • состояния
  • Объекты анимации
  • События: изменить: scaleX, onAnimationEnd, MouseDown, MouseUp, Click
  • HTML и CSS в свойствах слоя
  • Условные утверждения
  • Свойства слоя: originX, scaleX
  • Утилиты: задержка

День 33: Компоненты и состояние страницы

Используемые элементы обрамления

  • Компонент и методы страницы: addPage
  • Утилиты: задержка
  • События: change: currentPage

День 34: Вращающийся 3D-бокс с настраиваемыми ползунками

Используемые элементы обрамления

  • Утилиты: randomColor, labelLayer, modulate
  • Свойства перетаскиваемого слоя
  • События: Move

День 35: Страничное аккордеонное меню.

Используемые элементы обрамления

  • Компонент и свойства страницы: addPage, snapToPage
  • Петля
  • Интенсивное использование стилей CSS
  • Utils.modulate

День 36: Экран популярных фильмов Netflix

Используемые элементы обрамления

  • Фрагмент кода Framer: Layer Grid
  • Петли
  • Задержка анимации
  • События: MouseOver, MouseOut

День 37: Простая карусель товаров

Используемые элементы обрамления

  • Массив объектов
  • Компонент страницы: horizontalPageIndex, currentPage, snapToNextPage ()
  • Петля
  • Обработчик событий: Click, onChange

День 38: Карусель изображений Material Design

Используемые элементы обрамления

  • Компонент страницы: horizontalPageIndex, currentPage, snapToNextPage ()
  • Петля
  • Поток управления
  • Обработчик событий: Click, onChange, change: currentPage
  • Утилиты: задержка

День 39: Прокручиваемая таблица лидеров.

Используемые элементы обрамления

  • Массив объектов
  • Петли
  • Поток управления
  • Функции JavaScript: sort, Math.max, применить
  • ScrollComponent
  • Стили Flexbox
  • Utils.modulate
  • Обработчики событий: Move

День 40: Переход между страницами по оси Z.

Используемые элементы обрамления

  • Состояния слоя
  • Утилиты: labelLayer
  • Обработчик событий: нажмите

День 41: Выдвижной навигационный ящик

Используемые элементы обрамления

  • Состояния слоя
  • Вложенные циклы
  • Ссылка на дочерние слои
  • Поток управления
  • Обработчики событий: MouseOver, MouseOut, Click, change: width,
    StateDidSwitch

День 42: Выбор видеопотока.

Используемые элементы обрамления

  • Состояния слоя
  • Вложенные циклы
  • Ссылка на дочерние слои
  • Поток управления
  • Обработчики событий: Click, MouseUp
  • Utils.modulate
  • Фрагмент Framer Grid

День 43: Фильтры изображений в приложении для фотографий

Используемые элементы обрамления

  • Пользовательская функция
  • Перетаскиваемый слой и свойства
  • Петля
  • Обработчики событий: MouseOver, Drag

День 44: Смахивание карты Tinder

Используемые элементы обрамления

  • Пользовательская функция
  • Перетаскиваемый слой и свойства
  • Петля
  • Утилиты: Modulate
  • События: изменить: x, DragEnd
  • Поток управления
  • Родитель / дети, братья и сестры

День 45: Развлечение с компонентами слайдера

Используемые элементы обрамления

  • SliderComponent и свойства: заливка, значение
  • События: изменение: значение
  • Утилиты: Modulate

День 46: Проведите по электронной почте в архив.

Используемые элементы обрамления

  • Компонент прокрутки
  • События: ScrollEnd
  • Пользовательская функция
  • Утилиты: задержка

День 47: Перекрывающиеся прозрачные перетаскиваемые круги.

Используемые элементы обрамления

  • Петля
  • Перетащите компонент
  • Слой братьев и сестер
  • События: Move

День 48: Меню выбора iOS

Используемые элементы обрамления

  • Петля
  • Компонент страницы
  • События: change: currentPage

День 49: Электронная почта

Используемые элементы обрамления

  • Петли
  • Состояния слоя
  • Событие: Нажмите

День 50: Форма входа в Material Design

Используемые элементы обрамления

  • Свойства слоя
  • Состояния слоя
  • Ярлык события: onTap