2015年11月16日 星期一

Framer.js ( $ 99 USD) 內有photoshop sketch 之類的 軟體的架構(分層、 畫筆、圖層運算),還有時間軸與事件的功能,算是一種“引擎”的概念 javascript

https://en.wikipedia.org/wiki/Comparison_of_software_prototyping_tools
Comparison of software prototyping tools

The following tools focus on animation, often for mobile, and often by importing previously made static assets.


  • Adobe Animate
  • Briefs
  • Composite
  • Concept.ly
  • Flinto
  • Framer JS
  • Form
  • Avocado
  • Pixate
  • Origami
  • proto.io
  • Protosketch
  • Realizer App
  • Solidify
  • Standin
  • Tumult Hype
很特別的是他是個javascript,還帶有自己的開發工具

Framer.js ( $ 99 USD)
“框兒~~”
http://framerjs.com
http://framerjs.com/resources/

簡單來說就是一個 內有photoshop sketch 之類的 軟體的架構(分層、 畫筆、圖層運算),還有時間軸與事件的功能,算是一種“引擎”的概念




也有移動裝置,手機 的支援, 觸控或是改變解析度與 視窗大小


Framer.js是一款Javascript框架,用於事件觸發類動效的製作,方便製作原型。功能眾多——內置生成器,可以直接從PSD(以及.Sketch)文件中獲取元素信息,方便可交互原型製作。FramerJS框架——因此跟其他工具不一樣,需要懂HTMLCSSJS的知識。但是好處就很明顯了,輸出很方便,可以在大部分設備上查看交互原型效果。



利用它可以創造出和 CarouselGoogle Now 這些 app 一樣的複雜交互。另外它還提供了一個 The Framer Generator,可以方便的讓設計師把 Photoshop Sketch 里的設計圖導入到 Framer.js 裡面,而這次 Framer Studio 的發佈,讓這一創作過程更加簡便了,極大了方便了設計師,並且之前內測時也得到了包括 FacebookDropbox 等公司的頂級設計師們的一致好評。

Import Graphics

Import graphics directly from Sketch or Photoshop. Need to edit something? Just re-import. No extra software to install. It just works.

Preview Anywhere

Preview your prototypes on any device with a web browser using the Mirror button. Or install Framer’s Android and iOS apps, for even quicker access.

Share in Seconds

Let clients and non-technical folks see your prototypes without tedious setup or apps to install. Just send them a URL. Hassle-free user testing.

Layer Control

Locate layers imported from Sketch/Photoshop at a glance in the Layer Panel. Then, make them do anything you want, independently.

Code Faster

Writing code shouldn’t require memorizing hundreds of terms. Framer’s autocomplete helps you find the right methods and properties faster.

Zero Constraints


Create animations and transitions—or something completely new. Build functioning interfaces with real data or interactions that adapt to context.