技术转型产品学习工具收集与整理——第十天
来源:互联网 发布:电信宽带加端口要多久 编辑:程序博客网 时间:2024/05/20 19:17
昨天制作了一个登录的原型 今天打算做一个手机画的效果于是在人人都是产品经理找到一个教程
首先准备需要的元件:1个矩形,1个文本,1个动态面板(里面包含2个矩形,一个作为面板,一个作为登录按钮)
把动态面板添加一个状态,准备工作就结束了。
注意:每个主要元件记得加上标签啊!
第一种:动态面板滑入滑出方式
1、 设置文本面板“登录”的onclick事件,为点击时动态面板滑动到绝对位置(x,y)(如图1),x和y代表滑动到指定位置时的x轴与y轴的坐标值(如图2、图3),坐标值可以通过拖动动态面板到指定位置取得。最后,设置动画效果为缓慢进入。
图1
图2
图3
2、 设置动态面板状态1里面的矩形登录按钮的onclick事件,为点击时动态面板滑动到绝对位置(x,y)(如图4),这时的x和y代表滑动到初始位置时的x轴与y轴的坐标值,设置动画效果为缓慢退出。
图4
3、 点击右键设置顺序为置于底层,并将动态面板拖到初始位置。
4、 第一种方式完成,可以生成原型看效果了。
第二种:动态面板状态切换方式
在开始的时候我们给动态面板增加了一个状态,在第二种方式里它才会起到作用,怎么做呢?我们继续:
1、 把动态面板拖到最终显示的位置,将动态面板状态2上移到第一位(如图5右侧指示);
2、 设置文本面板“登录”的onclick事件,为点击时设置动态面板的状态为状态1,并设置进行动画为向下滑动(如图5);
图5
3、 设置动态面板状态1里面的矩形登录按钮的onclick事件,为点击时设置动态面板的状态为状态2,并设置退出动画为向上滑动。
4、 第二种方式完成,生成原型就能看到想要的效果了。
原文:http://www.woshipm.com/ucd/59328.html
- 技术转型产品学习工具收集与整理——第十天
- 技术转型产品学习工具收集与整理——第十一天
- 技术转型产品学习工具收集与整理——第八天
- 技术转型产品学习工具收集与整理——第九天
- 技术转型产品学习笔记——第二天
- 技术转型产品学习笔记与理解[MRD]简述——第四天
- 技术转型产品学习笔记与理解【总结】——第六天
- 技术转型产品学习笔记与理解[BRD]简述——第三天
- 技术转型产品学习笔记与理解[PRD]简述——第五天
- 技术转型产品学习笔记与理解——第七天
- 技术转型产品学习(交互设计)——第十二天
- 技术转型产品第一天
- Android漏洞挖掘工具收集与整理
- Android漏洞挖掘工具收集与整理
- 技术问题收集整理汇总——持续更新中...
- Box2dの学习资料整理与收集
- Zookeeper学习资料收集与整理
- 术语收集整理工具
- 4.28 JEE实习日记
- Python 迭代器
- 霍金GMIC演讲:AI或终结人类文明
- 我的sql效率提升经验+取经
- 图论之Dijkstra
- 技术转型产品学习工具收集与整理——第十天
- [LeetCode]123. Best Time to Buy and Sell Stock III
- Linux:使用libgen.h:basename,dirname
- MXNet
- 编程杂感两篇
- centos 7安装glusterfs 3.10
- oracle 找不到监听 lister 有问题??进来看看吧
- linux服务器下配置Jdk和Tomcat
- update 4.28