Motion UI Design

Motion UI Design Awesome

什么是运动设计? 这是一个神奇的界面,让用户对UI变化感到满意. 它是与动作UI设计,UI动画和过渡相关的资源,软件,库,视频和文章的精选集合. 随意地 add something interesting (todo里面)拉请求!

Resources for inspiration

Sites

Pinterest boards

Processing and other weird, but funny stuff

Articles

Software

通过使用技术和结果格式(视频,原型,代码等)分离可以生成UI动画的所有可能软件的列表,其中包含必看教程和插件的链接.

Video, gif, presentation

Visual programming

  • Quartz Composer - 具有基于节点的可视化编程语言的MacOS应用程序,用于MacOS / iOS应用程序的原型设计:
  • The 4 Minute Guide to Quartz Composer (:movie_camera:视频).
  • Introducing Origami for QC.
  • Origami - 通过Facebook创建现代UI的工具.
  • Avocado - 交互设计师的工具箱.
  • Form - 使用基于节点的可视化编程语言的应用程序,用于Google的原型设计应用程序.
  • Principle For Mac - 用于创建动画和交互式用户界面设计的MacOS应用程序.
  • Floid - 适用于任何平台和设备(Web,iOS,Android)的MacOS交互设计工具.

HTML, CSS and JavaScript

显而易见你的秘密武器 - 笔和纸!

Helpers

Libraries

CSS

JavaScript

  • GreenSock - 适用于现代网络的超高性能专业级动画.
  • Velocity.js - 加速JavaScript动画.
  • Impulse - 移动网络的高性能互动.
  • AniJS - 声明的数据属性的动画.
  • Snabbt.js - JavaScript中的简约动画库.
  • Famo.us - 用于动画和界面的高性能JavaScript库.
  • Processing.js - 用于处理可视化编程语言的JavaScript库.
  • Framer.js - 用于设计UI,交互和动画的原型工具.
  • Dynamics.js - 用于创建基于物理的动画的JavaScript库.
  • Mo.js - 用于网络的运动图形工具带.
  • AnimateTransition - 用于块和弹出窗口转换的库.
  • Animate Plus - 适用于现代浏览器的CSS和SVG动画库,高性能和轻量级(3KB gzip),使其特别适合移动设备.
  • Gravitas.js - JavaScript的超快速物理模拟​​.
  • Popmotion - JavaScript动作引擎,可以快速,简单地创建引人入胜的用户交互.
  • anime.js - 轻量级JavaScript动画库.

SVG

Web animation performance

Speeches, presentations, videos

Newsletters, podcasts, screencasts

  • The UI Animation Newsletter - 有关资源的新闻通讯以及有关如何让网络动画为您每月直接进入收件箱的有用建议@valhead.
  • Web Animation Weekly - 时事通讯,包括文章,视频,书评和其他有关Rachel Nabors网页动画和动画设计精彩世界的好东西.
  • Motion and meaning - @valhead和Cennydd Bowles关于数字设计师动作的播客.
  • All The Right Moves - @valhead的动画评论.
  • UI Movement - 本周最佳UI动画时事通讯.

Guidelines

Books

How to Share ⭐️⭐️⭐️⭐️⭐️

License

CC0

收集:心脏:由Artur Kornakov和 these awesome guys