More Related Content Similar to Framerで動くモックアップを簡単作成
Similar to Framerで動くモックアップを簡単作成 (20) More from masaaki komori (20) Framerで動くモックアップを簡単作成19. JavaScriptだけど、難しくない
imageLayer = new Layer({x:0, y:0, width:128, height:128, image:"images/
icon.png"})
imageLayer.center()
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},
})
imageLayer.states.animationOptions = {
curve: "spring(500,12,0)"
}
imageLayer.on(Events.Click, function() {
imageLayer.states.next()
})
20. レイヤーのインスタンスを作る
imageLayer = new Layer({x:0, y:0, width:128, height:128, image:"images/
icon.png"})
imageLayer.center()
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},
})
imageLayer.states.animationOptions = {
curve: "spring(500,12,0)"
}
imageLayer.on(Events.Click, function() {
imageLayer.states.next()
})
21. レイヤーを指定して、どうしたいかを記述
imageLayer = new Layer({x:0, y:0, width:128, height:128, image:"images/
icon.png"})
imageLayer.center()
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},
})
imageLayer.states.animationOptions = {
curve: "spring(500,12,0)"
}
imageLayer.on(Events.Click, function() {
imageLayer.states.next()
})
22. アニメーションには、オプション指定も可
imageLayer = new Layer({x:0, y:0, width:128, height:128, image:"images/
icon.png"})
imageLayer.center()
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},
})
imageLayer.states.animationOptions = {
curve: "spring(500,12,0)"
}
imageLayer.on(Events.Click, function() {
imageLayer.states.next()
})
23. クリックやドラッグのイベントで発火させる
imageLayer = new Layer({x:0, y:0, width:128, height:128, image:"images/
icon.png"})
imageLayer.center()
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},
})
imageLayer.states.animationOptions = {
curve: "spring(500,12,0)"
}
imageLayer.on(Events.Click, function() {
imageLayer.states.next()
})
27. app.jsに書いてみよう
demoLayer = new Layer({
x: 0,
y: 0,
width: 640,
height: 1136,
backgroundColor: "red"
})
demoLayer.draggable = true;
demoLayer.draggable.speedX = 0;
28. もう少し追加してみる
childLayer = new Layer({width:128, height:128,
image:"images/Icon.png"})
demoLayer.addSubLayer(childLayer)
childLayer.center()
childLayer.animate({
properties: {
rotationZ: 180
},
curve: "spring(1500,12,10)",
delay: 2
})
29. Framer Generator
Framer Generatorは、OS X専用アプリ。
Photoshopを開きながらの作業が可能
書き出すパーツは、レイヤーグループに
公式サイトに記述はないが、
最新β版でSketchファイルにも対応済
Sketchプラグイン単体はコンパイルが必要: https://github.com/bomberstudios/sketch-framer-3
33. Framerのリソース
• Framer Examples http://examples.framerjs.com/
• Prototyping with Framer http://framer.camp/
• Framer-templates https://github.com/tisho/framer-templates
• Shortcuts for Framer 3 https://github.com/facebook/shortcuts-for-framer
• Cactus for Mac http://cactusformac.com/
• Browser-Sync http://browsersync.io/
• Clear Browser http://www.aliceturtle.com/clear-browser/