【PersimmonUI柿饼学习营】+ A Byte of China + 平板界面

发布于 2018-09-09 03:13:44
    本帖最后由 ianhom 于 2018-9-11 13:39 编辑


第三周作业:制作平板效果

开发环境
RTT + PerimmonUI + 野火RT1052Mini + 5寸800*480触屏
wx_camera_1535343243074.jpg

开发过程
本周进一步学习了PersimmonUI柿饼的控件功能,配合丰富的API,JavaScript可以方便灵活实现酷炫的效果。作业的重点:滑动解锁,应用集成,使用新应用尝试新的API、下拉动画效果

滑动解锁:使用slider控件,范围拉的足够大,隐藏图片即可,滑屏成功后将数字键盘显示出来,输入密码(6666),若不正确可重新输入,若正确在进入主页面。
TIM截图20180909025752.png
TIM截图20180909025852.png
TIM截图20180909025955.png
TIM截图20180909030035.png

应用集成:在前两周的学习中,已经完成了RT-Thread广告,计算器和2048,这里需要将这些应用集成到主页中。主页中需要增加ListCtrl作为一个大容器,实现滑动选择。然后在ListCtrl中增加若干个Panel作为小容器,在Panel中存放button和label即可,我们可以通过button来切换不同的page(即应用)。还要在每个应用中增加一个back键以便回到主页面。
TIM截图20180909030230.png
TIM截图20180909030344.png

新API:最关键的是时间API,在这次作业中新增了一个小游戏,如果选择了No,则这个No的button会跑到一个随机位置,就是傲娇地不让点,如果点击的是YES,等5秒后可以退回到主页面,这个page中没有设置back键,只能等时间到后退出。
TIM截图20180909030555.png
详情请参考源码
var t = 5;
var page = {
data : {timer1 : 0, timer2 : 0},

onYes : function(e)
{
var thiz = this;

this.setData({label2 : {position : {x:268,y:79},refresh:true}})
this.setData({page3: {refresh:true}})

this.data.timer1 = setTimeout(function()
{
console.log('timer1 timeout');
clearInterval(thiz.data.timer2);
clearTimeout(thiz.data.timer1);
pm.navigateBack();
}, 1000 * 5);

this.data.timer2 = setInterval(function()
{
console.log(t)
t -= 1;
}, 1000);
},
onNo : function(e)
{
var xx = Math.floor(Math.random()*600+10)
var yy = Math.floor(Math.random()*360+100)
console.log(xx,yy)
this.setData({button2 : {position : {x:xx,y:yy},refresh:true}})
this.setData({page3: {refresh:true}})
}
};

Page(page);


下拉动画效果:这里我们尝试使用timer
的API和setData position
的方式来组合一个下拉通知栏,定时快速修改通知栏的页面位置,实现下拉的动画效果。
TIM截图20180909141751.png

var p = -470;
var q = 0;
var page = {
data : {timer1 : 0, timer2 : 0},
onbutton: function(e)
{
var thiz = this;

switch(e.target.id){
case "button1":
pm.navigateBack();
break;
case "button2":
pm.navigateTo({url: "page4/page4"});
break;
case "button3":
pm.navigateTo({url: "page5/page5"});
break;
case "button4":
pm.navigateTo({url: "page3/page3"});
break;
case "button5":
pm.navigateTo({url: "page6/page6"});
break;
case "button6":
case "button7":
case "button8":
case "button9":
case "button10":
case "button11":
pm.navigateTo({url: "page7/page7"});
break;
case "button12":
this.data.timer1 = setTimeout(function()
{
console.log('timer1 timeout');
clearInterval(thiz.data.timer2);
clearTimeout(thiz.data.timer1);
p = -470
}, 300 * 1);

this.data.timer2 = setInterval(function()
{
thiz.setData({listctrl2 : {position : {x:19,y:p}}})
thiz.setData({listctrl2 : {refresh:true}})
//thiz.setData({page2: {refresh:true}})
p += 16;
}, 10);

this.setData({label2 : {position : {x:268,y:79},refresh:true}})
this.setData({page3: {refresh:true}})

break;
case "button13":
this.data.timer1 = setTimeout(function()
{
console.log('timer1 timeout');
clearInterval(thiz.data.timer2);
clearTimeout(thiz.data.timer1);
q = 0
thiz.setData({page2: {refresh:true}})

}, 300 * 1);

this.data.timer2 = setInterval(function()
{
thiz.setData({listctrl2 : {position : {x:19,y:q}}})
thiz.setData({listctrl2 : {refresh:true}})
//thiz.setData({page2: {refresh:true}})
q -= 16;
}, 10);

this.setData({label2 : {position : {x:268,y:79},refresh:true}})
this.setData({page3: {refresh:true}})

break;
}
}
};

Page(page);


附件是柿饼工程,这里抛砖引玉,期待大家更完善、更有趣的版本。

效果展示
滑屏解锁,输入密码,进入应用,退出,锁屏hw3.gif

增加了一个小游戏
hw3-1.gif

模拟下拉通知栏
GIF.gif

总结
时间匆忙,还有好多控件没有试验,不过相信后面的学习中肯定会使用到。
在设计时,要考虑清楚控件之间的堆叠关系
程序中应该还有不完善的地方,期待大佬们多多指导。

柿饼工程
下载附件[hw3-1-10.rar]









查看更多

关注者
0
被浏览
2.5k
9 个回答
小住住
小住住 认证专家 2018-09-14
这玩意这么好用,牛逼。
ianhom
ianhom 2018-09-14
小住住 发表于 2018-9-14 15:43
这玩意这么好用,牛逼。


恩,确实挺方便的
ianhom
ianhom 2018-09-14
werrysuzhen 发表于 2018-9-10 10:02
膜拜


是柿饼做的好,我是个搬运工
flyboy
flyboy 2018-12-19
yuexiaoban 发表于 2018-12-17 12:44
入门教程在哪里


官网入门教程里就有

撰写答案

请登录后再发布答案,点击登录

发布
问题

分享
好友