OpenEdv-开源电子网

 找回密码
 立即注册
正点原子全套STM32/Linux/FPGA开发资料,上千讲STM32视频教程免费下载...
查看: 4929|回复: 6

带你进入绚丽多彩的柿饼UI之动画、效果(三)

[复制链接]

55

主题

134

帖子

0

精华

中级会员

Rank: 3Rank: 3

积分
388
金钱
388
注册时间
2018-8-7
在线时间
55 小时
发表于 2018-10-22 18:24:50 | 显示全部楼层 |阅读模式
页面的动画效果
当要在设计器中携带一些动画效果时,本身还是会比较简单。例如,当从一个页面切换到另外一个页面时,新页面以一定动画方式出现或退出。
例如创建出一个页面 page2 ,这个页面进入时以从右到左的方式进入;当这个页面退出时,则从上到下退出。
这个时候可以在page2的属性栏中设定进入和退出动画效果,如下图所示:
1.png
进入动画效果中设置移动:向左;退出动画效果中设置移动:向下。为了在画面移动的过程中,和上一个页面有色彩上的对比度,我们把page2的背景色设置为另外一个颜色,并把按钮的透明度设为0,即完全透明。
点击运行,并在第一个页面点击 ->page2 按钮,就可以看到动画效果了,如下面的动画所示
2.gif
未来,设计器还会加入更多动画效果,让动画方式的UI变得简单(最终会不会就像制作一个PPT一样简单?也许呢,未来谁说得清呢)
列表
用户交互界面肯定不止简单的页面切换这么简单了,还会需要很多的其他元素,例如列表。这些我们总是可以在手机上看到这样的列表信息,最明显的不过Android手机里的设置界面,或者说文件夹下的文件列表。
列表控件的动画大家都体验过,当触摸滑动时,可以控制列表中显示出来的内容。当滑动到底或者到头时,还能继续滑动一段,一旦放手,整体列表“弹回去”。
接下来,我们就可以在设计器中尝试下这样的效果。
普通列表
在设计器中,从控件列表中拖动一个listctrl到页面上,并把大小拉到一定范围,例如宽度是200。listctrl也是一个容器型控件,可以在这个里加入其它的控件,例如Label,Button,ImageBox等。我们这里以最简单的Label为例子,在列表中添加一系列的Label文本。然后在这个列表中添加对应的Label,可以随意拖动,多拖动几个Label到列表中,并对其中的文本进行改名,或者调整背景为透明色或对齐方式等。我们可以先把列表拉得长些,可以塞进更多的Label,然后再缩小到正常的大小。
3.png
实际效果
4.gif
带图标的列表
上一小节中,我们设计了一个简单的列表,列表中添加了一些文本。但实际使用时,我们可能大多数时候不是简单的添加一些文本,而是一些携带复杂信息、指示的控件项。
例如我们想添加这样类型的列表:
5.png
ListCtrl的每一行只能放一个控件,那怎么才能在每一行中显示多种不同内容呢?其实很简单,只要在ListCtrl中放容器控件,再对这个容器控件进行布局就可以了嘛!
首先我们从设计器的控件列表中拖动一个listctrl到页面上,设置宽度200,背景设置为白色。
6.png
接着我们需要创建一个自定义面板,点击菜单栏的 文件 -> 新建 -> 自定义面板,然后会弹出一个小窗口其中的名称设置为"item.ui"点击确定即可。再然后我们从设计器的控件列表中分别拖一个 "ImageBox" 和 "Label" 控件到自定义面板中。
最后对custompanel、ImageBox和Label的相关属性设置如下图所示:
6.png
最终我们的Custompanel的效果如下图所示:
7.png
最后需要编写代码将自定义面板加入到列表中,示例代码如下: 8.png
this.setData({    listctrl1 : //listctrl1 为列表控件的名称    {        page : this,             xml : 'Panels/item',     //`item` 为自定义面板的名称        items :[{imagebox1 : "1.png", label1 : "1.png"},                {imagebox1 : "2.png", label1 : "2.png"},                {imagebox1 : "3.png", label1 : "3.png"},                {imagebox1 : "4.png", label1 : "4.png"},                {imagebox1 : "5.png", label1 : "5.png"},                {imagebox1 : "6.png", label1 : "6.png"},                {imagebox1 : "7.png", label1 : "7.png"},                {imagebox1 : "8.png", label1 : "8.png"},                {imagebox1 : "9.png", label1 : "9.png"}]
        //imagebox1` 和 `label1` 分别为加入到自定义面板中的对应控件的名称。    }})实际效果
9.png
轮播卡片
轮播卡片,是属于在一个控件中放置几张图片,可以通过脚本实现按时间循环播放,或者用手滑动进行切换图片。
在PersimM中提供了 Card 控件,它是一种容器控件,能够存放多个控件,但每个控件是独立显示的,可以通过左右或上下翻动Card控件显示Card中不同的页面,也可选择是否循环。
所以要实现轮播卡片,只需要在Card控件中添加多个ImageBox控件,再往其中添加图片即可。
首先我们把页面背景设置为白色,然后从设计器的控件列表中拖动一个 Card 到页面上,设置高度200、宽度300。接着往 Card 中添加图片 ImageBox ,再往 ImageBox 中设置不同的图片。
10.png
示例代码:
    var thiz = this;    setInterval(function()  //设置定时器,每2秒将Card控件中显示的图片切换到下一张    {        console.log('timeout');        thiz.setData({card1 : {next : true}})    }, 2000);实际效果 11.gif
欢迎加群讨论:
论坛二维码.jpg



正点原子逻辑分析仪DL16劲爆上市
回复

使用道具 举报

109

主题

5562

帖子

0

精华

资深版主

Rank: 8Rank: 8

积分
10528
金钱
10528
注册时间
2017-2-18
在线时间
1906 小时
发表于 2018-10-22 22:14:35 | 显示全部楼层
回复 支持 反对

使用道具 举报

55

主题

134

帖子

0

精华

中级会员

Rank: 3Rank: 3

积分
388
金钱
388
注册时间
2018-8-7
在线时间
55 小时
 楼主| 发表于 2018-10-23 14:20:37 | 显示全部楼层
回复 支持 反对

使用道具 举报

0

主题

9

帖子

0

精华

新手上路

积分
42
金钱
42
注册时间
2017-11-26
在线时间
8 小时
发表于 2018-10-25 18:15:26 | 显示全部楼层
这个文章文本格式太乱了
回复 支持 反对

使用道具 举报

0

主题

1

帖子

0

精华

新手入门

积分
11
金钱
11
注册时间
2018-11-12
在线时间
2 小时
发表于 2018-11-12 17:59:07 | 显示全部楼层
楼主可以再发一遍那个交流群吗?
回复 支持 反对

使用道具 举报

55

主题

134

帖子

0

精华

中级会员

Rank: 3Rank: 3

积分
388
金钱
388
注册时间
2018-8-7
在线时间
55 小时
 楼主| 发表于 2018-11-14 16:35:32 | 显示全部楼层
NightWatcher 发表于 2018-11-12 17:59
楼主可以再发一遍那个交流群吗?

论坛1114.jpg

回复 支持 反对

使用道具 举报

4

主题

17

帖子

0

精华

初级会员

Rank: 2

积分
81
金钱
81
注册时间
2017-10-7
在线时间
20 小时
发表于 2018-11-19 17:35:55 | 显示全部楼层
看了一下示例代码,有一点不明白,gui怎么和硬件交互呢?比如说我按个按钮,想让一个gpio输出高电平,怎么办
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



关闭

原子哥极力推荐上一条 /2 下一条

正点原子公众号

QQ|手机版|OpenEdv-开源电子网 ( 粤ICP备12000418号-1 )

GMT+8, 2024-11-1 10:30

Powered by OpenEdv-开源电子网

© 2001-2030 OpenEdv-开源电子网

快速回复 返回顶部 返回列表