LOFTER for ipad —— 让兴趣,更有趣

点击下载 关闭

framer

793浏览    30参与
zwsub

如何用Framer.js进行UI原型设计

作者:zwsub
Pluralsight教程 中文字幕

原型设计是现代数字产品设计和开发工具包的一流成员

Framer是一款原型开发工具,可让您将静态模型转化为交互式原型,并通过动态的本地感知动画和交互快速进行实验

它与设计工具无缝集成,可平滑地输出到移动设备,并且采用现代网络JavaScript的语言

Haiyang
捷库工作2 的活动面板,用Fr...

捷库工作2 的活动面板,用Framer设计。喜欢请赏赞👍

Featured & Campaign Panel, Gikoo Job 2 made with Framer. 

捷库工作2 的活动面板,用Framer设计。喜欢请赏赞👍

Featured & Campaign Panel, Gikoo Job 2 made with Framer. 

Haiyang

在Framer里写了一个可以半自动生成各种尺寸Banner的小脚本 🤓

Banni ver 0.1.1

在Framer里写了一个可以半自动生成各种尺寸Banner的小脚本 🤓

Banni ver 0.1.1

小强Joey
#MOTION9#Framer...

#MOTION9#Framer stateCycle


Framer 第一课。捣鼓了三个小时,语法和操作这个软件感觉都不是很难。难点在于如何熟练使用代码语法实现想要的效果。它不像 AE 那种 Keyframe 之间的转化,需要自己用代码设置各个节点的转化,需要计算时间和设置触发器,这是一个难点。AE是制作动画,Framer是只做交互动画。


经验:

1.流程 - 元素属性,位置。元素各个状态。元素如何在各个状态间转化。元素状态变化的触发器 

2.Sketch - 编组的会自动成为 Framer 的一个层.Same name, position...

#MOTION9#Framer stateCycle


Framer 第一课。捣鼓了三个小时,语法和操作这个软件感觉都不是很难。难点在于如何熟练使用代码语法实现想要的效果。它不像 AE 那种 Keyframe 之间的转化,需要自己用代码设置各个节点的转化,需要计算时间和设置触发器,这是一个难点。AE是制作动画,Framer是只做交互动画。


经验:

1.流程 - 元素属性,位置。元素各个状态。元素如何在各个状态间转化。元素状态变化的触发器 

2.Sketch - 编组的会自动成为 Framer 的一个层.Same name, position, and size

3. 所有 Sketch 的元素都必须在 Framer 的层上 

 

弄清楚 State 和 Animation 之间的关系(概念模糊),以及如何制作 Staggering Animation

MONK DESIGN

Facebook live 表情可交互点击效果实现

表情可交互点击效果(framer)

效果为framer官方主页提供效果简化版本


可交互的展示效果:http://share.framerjs.com/rplyw2v0sl8z/


Facebook live 表情可交互点击效果实现

表情可交互点击效果(framer)

效果为framer官方主页提供效果简化版本


可交互的展示效果:http://share.framerjs.com/rplyw2v0sl8z/


Learn Framer
21: getSeconds...

21:  getSeconds / Minutes / Hours / Utils.interval

http://share.framerjs.com/tq59o8taezo4/

21:  getSeconds / Minutes / Hours / Utils.interval

http://share.framerjs.com/tq59o8taezo4/

Learn Framer
20: for in / if...

20: for in / if / layer.y / array

http://share.framerjs.com/0h8ppskwqdw2/

20: for in / if / layer.y / array

http://share.framerjs.com/0h8ppskwqdw2/

Learn Framer
19: clientX、Y /...

19: clientX、Y / modulate / Z

http://share.framerjs.com/vvnnfe6yohmj/

19: clientX、Y / modulate / Z

http://share.framerjs.com/vvnnfe6yohmj/

Learn Framer
18: circle mask...

18: circle mask

http://share.framerjs.com/myfc6hr8dzgm/

18: circle mask

http://share.framerjs.com/myfc6hr8dzgm/

Learn Framer
17: gooey / mix...

17: gooey / mixBlendMode / contrast / blur

http://share.framerjs.com/hs89o2c2qwa5/

17: gooey / mixBlendMode / contrast / blur

http://share.framerjs.com/hs89o2c2qwa5/

Learn Framer
16: reverse() /...

16: reverse() / rotationX Y / saturate / brightness:

http://share.framerjs.com/vzdk1hg2bnr3/

16: reverse() / rotationX Y / saturate / brightness:

http://share.framerjs.com/vzdk1hg2bnr3/

Learn Framer
15: mask / widt...

15: mask / width / heigth

http://share.framerjs.com/k04tfo8nkdtp/

15: mask / width / heigth

http://share.framerjs.com/k04tfo8nkdtp/

Learn Framer
14: mask / mixB...

14: mask / mixBlendMode / states.next( )

http://share.framerjs.com/lh1xtlhy2hz7/

14: mask / mixBlendMode / states.next( )

http://share.framerjs.com/lh1xtlhy2hz7/

Learn Framer
13: layer.style...

13: layer.style / indicator / snapToNextPag

https://share.framerjs.com/itpnyu9baa3g/

13: layer.style / indicator / snapToNextPag

https://share.framerjs.com/itpnyu9baa3g/

Learn Framer
12: array / if...

12: array / if else / for in

http://share.framerjs.com/x3gy4cgep1u4/

12: array / if else / for in

http://share.framerjs.com/x3gy4cgep1u4/

Learn Framer
11: start( ) /...

11: start( ) / stop( ) / isAnimating

http://share.framerjs.com/0m6uy3fs2xkw/

11: start( ) / stop( ) / isAnimating

http://share.framerjs.com/0m6uy3fs2xkw/

Learn Framer
10 : Drag / Lon...

10 : Drag / LongPress / randomColor

http://share.framerjs.com/zlopsmmbsbpu/

10 : Drag / LongPress / randomColor

http://share.framerjs.com/zlopsmmbsbpu/

Learn Framer
9: ignoreEvents...

9: ignoreEvents / visible / (event,layer)

http://share.framerjs.com/zqrq5gbar9ro/

9: ignoreEvents / visible / (event,layer)

http://share.framerjs.com/zqrq5gbar9ro/

LOFTER

让兴趣,更有趣

简单随性的记录
丰富多彩的内容
让生活更加充实

下载移动端
关注最新消息