柿饼_PersimmonUI

【柿饼学习营】+werrysuzhen+脚本及事件学习

发布于 2018-08-31 12:11:56 浏览：2220 订阅该版

* 本帖最后由 werrysuzhen 于 2018-8-31 14:30 编辑 *

一.开发环境
1.开发板：野火I.MX1052 PRO
2.win7-64位 专业版
二.作业题目
1.学习本次的三个文档，主要是脚本、事件和数据绑定功能
2.设计出游戏“2048”

三.过程及结果
1.使用动画控件"AnimatedImage"动态显示多幅图画
1.1 在Page上放置AnimatedImage控件，将透明度设置为0；增加图片集；设置图片的播放间隔。
![0.png](/uploads/201808/31/114217hile2s25r45ri2il.png)  ![1.png](/uploads/201808/31/113546kvjbk5kkk555d5jk.png)
1.2 放置一个Button控件，用于启动动画控件的运行；将事件触发属性修改为"startrun"，增加Javascript代码设置AnimatedImage控件的属性为运行模式。
![2.png](/uploads/201808/31/114057qkxnkzj1xomj7rkv.png)![3.png](/uploads/201808/31/114131gppppfq2qsrqr2v2.png)

2.实现界面跳转功能
2.1在page1中增加一个button控件，修改事件触发属性为"onClick"，增加Javascript代码实现由Page1跳转到page2
![4.png](/uploads/201808/31/114606pld272kt279lt28a.png)
2.2新建一个Page2，添加一个button控件，修改事件触发属性为"onClick",增加Javascript代码实现由Page2返回到page1
![5.png](/uploads/201808/31/114611xgzosgrg3ajnsaas.png)

3.实现简易计算器功能
3.1界面上放置一个Panel控件，将手机上的计算器画面截图，作为画布控件的背景。
![6.png](/uploads/201808/31/114848p5pl1gelbgnnj1lz.png)
3.2根据文档分别放置对应按钮的button控件。将button控件的透明度设置为0，将“点击图片”和“显示图片”两个属性清空，设置事件触发属性为“onButton”
![7.png](/uploads/201808/31/115245x9slblycb1s1qybs.png)
3.3增加Label控件用于显示计算的中间过程及运算结果，将透明度设置为0，增加上一节课的字库，设置字体大小
3.4调试学习文档提供的JS事例例程

四.总结
1.此次课程比较有挑战，用到了更多的控件，界面整体的最终效果，在实际开发版上的运行效果和仿真差不多，附件是实际的运行效果
![8.png](/uploads/201808/31/120532v9ur9gbmqdkrdqqb.png)
2.本次的学习因为用到了Javacript语言，完全是零基础，通过同学的帮助和自学，基本上把例程代码整明白了。
3.熊大安排的2048游戏，目前正在设计界面，JS是硬伤，边学边弄吧

下载附件 [011d27c36d113a5246de50f6f9df012d.mp4](https://oss-club.rt-thread.org/uploads/201808/31/120722alyh1qldzcldazlm.attach)