50 прототипов за 50 дней с использованием Framer (большой размер GIF)
Home
Публикации
50 прототипов за 50 дней с использованием Framer (большой размер GIF)
Я делюсь простыми идеями дизайна взаимодействия, которые помогут вам начать путешествие во Framer. Загрузите 14-дневную бесплатную пробную версию Framer , чтобы начать работу.
Используемые элементы обрамления
Фоновый слой Слой Центрирование слоя Служебные функции (маркировка слоя) Обработчик события клика Функция анимации
Используемые элементы обрамления
Состояния слоя Служебные функции (маркировка слоя) Обработчики событий кликов Методы массива JavaScript
Используемые элементы обрамления
Состояния слоя Обработчики событий кликов Супер слои Мин. / Макс. Размещение по осям X / Y Пружинные кривые
Используемые элементы обрамления
Слой теней Обработчики событий кликов Супер слои Параметры анимации состояния Пружинные кривые
Используемые элементы обрамления
Объект анимации, методы и функции Стилизация слоя с помощью свойства style. Слой текста через свойство «html»
Используемые элементы обрамления
Функции анимации События MouseOver и MouseOut Слой теней
Используемые элементы обрамления
Свойства перетаскиваемого слоя: включено, ограничения События перетаскивания: начало, перемещение, конец Событие мыши
Используемые элементы обрамления
CoffeeScript «for… in» цикл Изменения состояния: switch и next () События мыши
Используемые элементы обрамления
Супер слои Объект анимации Обработчики событий: нажмите, onAnimationEnd, isAnimating. Условная логика
Используемые элементы обрамления
Методы перетаскивания слоя: перетаскиваемые .enabled .constraints Методы объекта анимации: старт, стоп Обработчики событий: DragEnd, onAnimationEnd, MouseUp, MouseDown Условная логика
Используемые элементы обрамления
Массив JavaScript и цикл for Свойство слоя: изображение Обработчики событий: onMouseOver, onMouseOut, onAnimationEnd, MouseUp, MouseDown
Используемые элементы обрамления
Используемые элементы обрамления
Свойство слоя: originY Обработчики событий: onMouseOver, onMouseOut Состояния слоя: добавить, animationOptions, next Утилиты: labelLayer
Используемые элементы обрамления
Свойства слоя: originY, style, html, minY, maxY Состояния слоя и параметры анимации Объект анимации Обработчики событий: onAnimationEnd, onClick
Используемые элементы обрамления
Свойства слоя: клип Использование суперслоя в качестве оси для вращения подслоя
Используемые элементы обрамления
Перетаскиваемые методы: включенный, overDrag, импульс, ограничения, вертикальный Пружинные кривые Состояния слоя Обработчики событий: MouseDown, Drag, MouseUp
Используемые элементы обрамления
Методы перетаскивания: enabled, overDrag, constraints, vertical Состояния слоя Обработчики событий: onMove Условная логика
Используемые элементы обрамления
Перетаскиваемые методы: включены, ограничения, вертикальные Состояния слоя Обработчики событий: onDragMove Условная логика For… in loop
Используемые элементы обрамления
ScrollComponent Свойство прокрутки: scrollHorizontal, content Обработчики событий: onMove Условная логика For… in loop
Используемые элементы обрамления
Свойства слоя: тени, стиль, изображение, originY, scaleY Свойство объекта Framer ‘Align’ Объекты анимации Обработчики событий: onMouseDown, onStateDidSwitch
Используемые элементы обрамления
For-in loop Align.center со значениями смещения Объект анимации Пружинные кривые
Используемые элементы обрамления
Супер слои Объекты анимации Свойства слоя как вычисления для других свойств Align.center со значениями смещения Массивы Javascript Обработчик событий: onClick
Используемые элементы обрамления
Объекты анимации Свойства слоя как вычисления для других свойств Выровнять объект: по центру, снизу Flexbox в свойстве стиля слоя Свойство Layer html Обработчик событий: Click, onAnimationEnd, изменить: scaleY
Используемые элементы обрамления
Объекты анимации Свойства слоя как вычисления для других свойств Выровнять объект: по центру, сверху, снизу Flexbox в свойстве стиля слоя Свойства слоя: scaleY, originY Состояния слоя: animationOptions, add, switch, switchInstant, next, current Свойство Layer html Обработчик событий: Click, change: scaleY
Используемые элементы обрамления
Обработчики событий: Click, DoubleClick, MouseOut Состояния слоя Flexbox в свойстве стиля слоя
Используемые элементы обрамления
Flexbox в свойстве стиля слоя for… в цикле Обработчики событий: onMouseDown, onMouseUp Array.slice () метод
Используемые элементы обрамления
Массив, содержащий несколько объектов ScrollComponent и его свойства: contentInset, content Состояния слоя и методы состояния Методы выравнивания объекта: по центру, сверху, справа Дети слоя for… в цикле Utils.randomColor Flexbox в свойстве стиля слоя Обработчики событий: onMouseOver, onMouseOut, onClick
Используемые элементы обрамления
Framer Defaults свойство Компонент прокрутки: scrollToPoint, контент for… в цикле Состояния слоя: layer.states.current Условные утверждения Обработчики событий: MouseOver, MouseOut, Move, Click
Используемые элементы обрамления
Расположение слоев: sendToBack Условные операторы с операторами сравнения Javascript toFixed метод Состояния слоя: layer.states.current Обработчики событий: MouseOver, MouseOut
Используемые элементы обрамления
Петли Условные утверждения состояния События Расположение слоев Свойства слоя: originX, scaleX
Используемые элементы обрамления
HTML и CSS в свойствах слоя состояния События Оператор JavaScript "switch" Манипуляция объектами Framer
Используемые элементы обрамления
состояния Объекты анимации События: изменить: scaleX, onAnimationEnd, MouseDown, MouseUp, Click HTML и CSS в свойствах слоя Условные утверждения Свойства слоя: originX, scaleX Утилиты: задержка
Используемые элементы обрамления
Компонент и методы страницы: addPage Утилиты: задержка События: change: currentPage
Используемые элементы обрамления
Утилиты: randomColor, labelLayer, modulate Свойства перетаскиваемого слоя События: Move
Используемые элементы обрамления
Компонент и свойства страницы: addPage, snapToPage Петля Интенсивное использование стилей CSS Utils.modulate
Используемые элементы обрамления
Фрагмент кода Framer: Layer Grid Петли Задержка анимации События: MouseOver, MouseOut
Используемые элементы обрамления
Массив объектов Компонент страницы: horizontalPageIndex, currentPage, snapToNextPage () Петля Обработчик событий: Click, onChange
Используемые элементы обрамления
Компонент страницы: horizontalPageIndex, currentPage, snapToNextPage () Петля Поток управления Обработчик событий: Click, onChange, change: currentPage Утилиты: задержка
Используемые элементы обрамления
Массив объектов Петли Поток управления Функции JavaScript: sort, Math.max, применить ScrollComponent Стили Flexbox Utils.modulate Обработчики событий: Move
Используемые элементы обрамления
Состояния слоя Утилиты: labelLayer Обработчик событий: нажмите
Используемые элементы обрамления
Состояния слоя Вложенные циклы Ссылка на дочерние слои Поток управления Обработчики событий: MouseOver, MouseOut, Click, change: width, StateDidSwitch
Используемые элементы обрамления
Состояния слоя Вложенные циклы Ссылка на дочерние слои Поток управления Обработчики событий: Click, MouseUp Utils.modulate Фрагмент Framer Grid
Используемые элементы обрамления
Пользовательская функция Перетаскиваемый слой и свойства Петля Обработчики событий: MouseOver, Drag
Используемые элементы обрамления
Пользовательская функция Перетаскиваемый слой и свойства Петля Утилиты: Modulate События: изменить: x, DragEnd Поток управления Родитель / дети, братья и сестры
Используемые элементы обрамления
SliderComponent и свойства: заливка, значение События: изменение: значение Утилиты: Modulate
Используемые элементы обрамления
Компонент прокрутки События: ScrollEnd Пользовательская функция Утилиты: задержка
Используемые элементы обрамления
Петля Перетащите компонент Слой братьев и сестер События: Move
Используемые элементы обрамления
Петля Компонент страницы События: change: currentPage
Используемые элементы обрамления
Петли Состояния слоя Событие: Нажмите
Используемые элементы обрамления
Свойства слоя Состояния слоя Ярлык события: onTap