Framer.js makes product prototypes more realistic

Source: Internet
Author: User

If you put Framer Studio Export framer Framework code into your own Framer framework can be achieved, after all, Framer is open source framework, can do arbitrary hack. If you don't understand, you can go to the following code that I modified before you connect to check:

Once you've tried it, you'll find it framer.generated.js the file.

For DeviceType you can pass in a variable:

Window. Framer.Defaults.DeviceView = {"Devicescale":-1, "orientation": 0, "Contentscale": 1, "DeviceType": G_device | | "Iphone-5s-silver"};

Here's how high fidelity the 24PI prototype the framer.js generates.

Framer.js support Coffeescript and JavaScript, do not think that the need to write code inefficient, in fact, if you are proficient in JS, then the above interactive prototype in < 10 minutes can be completed.

This prototype needs three background pictures.

Layerindex = new Layer ({width:650, height:1100, Image: "./images/24piindex.png"}) Layerinnera = new Layer ({width:650, height:1100, Image: "./images/24piinnera.png"}) Layerinnerb = new Layer ({width:650, height:1100, Image: "./images/ 24piinnerb.png "})

In order to start highlighting the first background picture, the back two straight Toback

Layerinnera.sendtoback () Layerinnerb.sendtoback ()

The first time you need to click on the middle of the sphere to enter the level two page, so the sphere to add a mask.

Layertouch = new Layer ({x:0, y:0, width:300, height:300, opacity:0}) Layertouch.center ()

Here the opacity is set to 0, so that it hides on the sphere.

Layertouch.on events.click-> layerindex.animate properties:opacity:0 layerinnera.animate properties:opacity:1 Curve: "Liner" Layerturna.bringtofront () Layerturnb.bringtofront ()

This is the trigger mask layer code, click on the home page to hide, the two-level interface Tofront.

A little strategy is needed for a two-level interface to cycle through. Look at the left button (the right side is the same).

Turna = TrueTime = 0.25layerturna.on Events.click,-> if Turna is true # ... Turna = False Else # ... Turna = True

The above code is an approximate toggle frame, with the ellipsis part being the logical code.

Turna this variable to cycle through level two pages.

Don't look so wordy, in fact, compared to axure and other prototyping software more efficient. Of course, the last thing to say: Do not use tools for tools, should be based on efficiency and goal as the criteria for selecting tools.

To sum up: Framer.js is close to 100% in the product prototype reduction degree.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.