Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
| @@ -1,96 +1,86 @@ | ||
| ## Framer Prototyping | ||
|
|
||
| For a complete overview, downloads and docs please visit [framerjs.com](http://www.framerjs.com). Find the latest builds at [builds.framerjs.com](http://builds.framerjs.com) | ||
|
|
||
| #### Building | ||
|
|
||
| # Framer.js | ||
|
|
||
| **Framer.js** is an open source JavaScript framework for rapid prototyping. | ||
| Framer.js allows you to define animations and interactions, complete with filters, spring physics, 3D effects and more. It's bundled with **Framer Generator**, an application that allows you to import layers directly out of Photoshop and Sketch. | ||
|
|
||
| [Framer Studio](http://framerjs.com) is a prototyping app for Mac, based on Framer.js. Framer Studio includes an editor based on CoffeeScript, instant visual feedback and much more. | ||
|
|
||
| ## Get Started | ||
|
|
||
| - [Download] (http://framerjs.com/static/downloads/Framer.zip) (Framer.js & Framer Generator) | ||
| - Open **index.html** in a WebKit browser and you'll see an image animate on click | ||
| - Edit the **app.js** to add interactions and animations (see example code below) | ||
|
|
||
|  | ||
|
|
||
| ## Example | ||
| ###### Define a layer and center it | ||
| ``` | ||
| imageLayer = new Layer({width:128, height:128, image:"images/icon.png"}) | ||
| imageLayer.center() | ||
| ``` | ||
| ###### Add states | ||
| ``` | ||
| imageLayer.states.add({ | ||
| second: {y:100, scale:0.6, rotationZ:100}, | ||
| third: {y:300, scale:1.3}, | ||
| fourth: {y:200, scale:0.9, rotationZ:200}, | ||
| }) | ||
| ``` | ||
| ###### Set default animation options | ||
| ``` | ||
| imageLayer.states.animationOptions = { | ||
| curve: "spring(500,12,0)" | ||
| } | ||
| ``` | ||
| ###### Toggle states on click | ||
| ``` | ||
| imageLayer.on(Events.Click, function() { | ||
| imageLayer.states.next() | ||
| }) | ||
| ``` | ||
| #### Features | ||
| - Spring Physics, Easing Functions and Bezier Curves | ||
| - Hardware Accelerated (3D) Animations with 60FPS | ||
| - Events: Click, Touch, Drag, Scroll and more | ||
| - State Machine to define and animate between sets of properties | ||
| - Import from Sketch & Photoshop with Generator.app | ||
| - Based on WebKit: works on desktop, mobile and tablets | ||
| - Debugging with Web Inspector and JavaScript console | ||
|
|
||
|
|
||
| ## Framer Generator | ||
| With a Sketch or Photoshop file open, open Framer Generator and click **Import**. Only layer groups are imported; single layers are ignored. The hierarchy of your layer groups is respected. | ||
|
|
||
| You can safely move things around in Sketch or Photoshop and re-import. Generator will update the images and any changes in hierarchy, but leave your code intact. | ||
|
|
||
| - Access any layer by its group name | ||
| - Groups within groups will become subLayers | ||
| - Groups with vector masks will become clipped layers | ||
| - Group names should be unique (Otherwise, they'll be renamed) | ||
|
|
||
|
|
||
| ## Contribute | ||
|
|
||
| ##### Building | ||
| - Download or clone the code | ||
| - Run `npm install` to get the dependencies | ||
| - Run `make build` to build the latest version | ||
|
|
||
| #### Testing | ||
| ##### Testing | ||
|
|
||
| - Run `make test` to run the unit tests in phantomjs | ||
| - Run `make safari` to run the tests in Safari | ||
| - Download Cactus and open extras/CactusFramer, then go to /test.html for a list of visual tests. | ||
|
|
||
| #### Reporting Issues | ||
| ##### Reporting Issues | ||
|
|
||
| - Please use the issue tracker and tag them with Framer3 | ||
| - Try to include an example and clearly describe expected behaviour | ||
|
|
||
| [](https://app.wercker.com/project/bykey/8e5d02248bfd387acebdf177fba5f6b1) | ||
|
|
||
| ## Framer 3 Changes | ||
|
|
||
| Framer 3 is close to a rewrite. Or maybe more a huge refactor. The new code base is simpler and very well tested, so I hope others can start contributing more easily. | ||
|
|
||
| #### New Features | ||
|
|
||
| - State machine | ||
| - A proper way to organize animations | ||
| - Define a set of states with myLayer.states.add "name", {properties...} | ||
| - Transform to a specific state with myLayer.states.switch "name" or myLayer.states.next() | ||
| - Optionally override layer.states.animationOptions, or pass them in | ||
| - Animation backend | ||
| - Based on requestAnimationFrame | ||
| - Allows for more precise animation handling and better control | ||
| - Allows to change animations in-flight, which is required for real physics | ||
| - Animations now take a new argument curveOptions that can contain named inputs (like spring, tension, velocity) rather than the old curve "spring(x,y,z)" argument. | ||
| - Animators | ||
| - Added damping harmonic oscillator spring physics (curve: "spring-dho") | ||
| - Very simple infrastructure to add your own animators: | ||
| - Emit a number on a tick | ||
| - Check if the animation has reached its end | ||
| - Support for future advanced animators like real physics and path animators | ||
|
|
||
| #### Big Changes | ||
|
|
||
| - Views are now called Layers (superLayer, subLayers, etc) | ||
| - Layers get a default background color and width, height on default so you can see them | ||
| - You can override the defaults yourself like Framer.Defaults.Layer.width = 100 | ||
| - Layer events (myLayer.on) have a modified scope where this is the layer it's being called on | ||
| - There is no ScrollLayer, it's just a Layer. You can enable scrolling with scroll, scrollX, scrollY (and animate them). | ||
| - There is no ImageLayer, it's just a Layer. Set the image with myLayer.image = "url" | ||
|
|
||
| #### Smaller Changes | ||
|
|
||
| - More sane error checking all around, throwing sensible errors if you do something wrong | ||
| - Transform origin are now full properties: Layer.originX, Layer.originY | ||
| - Most objects have a nice .toString() method for debugging | ||
| - Added delay and repeat keywords to animation | ||
| - Animation events now also get emitted on the layer (start, stop, end) | ||
| - Replaces the Underscore library with Lodash and added Underscore.String | ||
| - Some css properties are now directly exposed on the layer (without having to go through .style) like backgroundColor | ||
| - Added Utils.mapRange to map from one number range to another. So 0.5 as input from 0-1 to 0-50 becomes 25. | ||
|
|
||
| #### Big bugs fixed | ||
|
|
||
| - A lot of stuff around animations | ||
| - Reliable event handling (start, stop, end) | ||
| - Multiple animations for one layer | ||
| - Rotation issues beyond 360 degrees | ||
| - Rewritten the Photoshop importer with tests | ||
|
|
||
| #### Backwards Compatibility | ||
|
|
||
| - View, ScrollView and ImageView should work, but they give a warning. | ||
| - Animation spring initial velocity behaves a bit different | ||
|
|
||
| #### Known Issues | ||
|
|
||
| - Rotation issues with a low z-index cause drawing issues. | ||
| - Animation perf in some versions of Chrome seems less good than Framer 2 (maybe fixed) | ||
| - The blur (and likely other filter properties) are kind of broken on Chrome | ||
|
|
||
| #### Plans | ||
|
|
||
| - Add back in the css keyframe animation backend and allow to switch between them on a per animation basis. | ||
| - Add more animatable properties. You can set layer.style as an animation target and animate its numeric css properties. - We'll have to put some converters in to tween between colors, gradients, shadows, etc. | ||
| - Add back in the box2d physics engine and come up with a testable api | ||
| - Research FF/IE support | ||
|
|
||
| #### Framer 3 Release Todo | ||
|
|
||
| - Add a Framer.Future namespace to try new stuff | ||
| ## More | ||
| - [Framer Studio](http://framerjs.com) Prototyping application for OS X, built on Framer. | ||
| - [Latest Builds](http://builds.framerjs.com) | ||
|
|
||
| [](https://app.wercker.com/project/bykey/8e5d02248bfd387acebdf177fba5f6b1) |