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

原创

__Shirley 2021-08-10 16:20:48 ©著作权

文章标签 控件动画效果自定义二维码容器控件 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者__Shirley的原创作品，请联系作者获取转载授权，否则将追究法律责任

在开始今天的正文之前，先来看一段柿饼学习营学员完成的作业视频：

页面的动画效果

当要在设计器中携带一些动画效果时，本身还是会比较简单。例如，当从一个页面切换到另外一个页面时，新页面以一定动画方式出现或退出。

例如创建出一个页面 page2 ，这个页面进入时以从右到左的方式进入；当这个页面退出时，则从上到下退出。

这个时候可以在page2的属性栏中设定进入和退出动画效果，如下图所示：

带你进入绚丽多彩的柿饼UI之动画、效果（三）_容器控件

进入动画效果中设置移动:向左；退出动画效果中设置移动:向下。为了在画面移动的过程中，和上一个页面有色彩上的对比度，我们把page2的背景色设置为另外一个颜色,并把按钮的透明度设为0，即完全透明。

点击运行，并在第一个页面点击 ->page2 按钮，就可以看到动画效果了，如下面的动画所示

带你进入绚丽多彩的柿饼UI之动画、效果（三）_容器控件_02

未来，设计器还会加入更多动画效果，让动画方式的UI变得简单（最终会不会就像制作一个PPT一样简单？也许呢，未来谁说得清呢）

列表

用户交互界面肯定不止简单的页面切换这么简单了，还会需要很多的其他元素，例如列表。这些我们总是可以在手机上看到这样的列表信息，最明显的不过Android手机里的设置界面，或者说文件夹下的文件列表。

列表控件的动画大家都体验过，当触摸滑动时，可以控制列表中显示出来的内容。当滑动到底或者到头时，还能继续滑动一段，一旦放手，整体列表“弹回去”。

接下来，我们就可以在设计器中尝试下这样的效果。

普通列表

在设计器中，从控件列表中拖动一个listctrl到页面上，并把大小拉到一定范围，例如宽度是200。listctrl也是一个容器型控件，可以在这个里加入其它的控件，例如Label，Button，ImageBox等。我们这里以最简单的Label为例子，在列表中添加一系列的Label文本。然后在这个列表中添加对应的Label，可以随意拖动，多拖动几个Label到列表中，并对其中的文本进行改名，或者调整背景为透明色或对齐方式等。我们可以先把列表拉得长些，可以塞进更多的Label，然后再缩小到正常的大小。

带你进入绚丽多彩的柿饼UI之动画、效果（三）_容器控件_03

实际效果

带你进入绚丽多彩的柿饼UI之动画、效果（三）_控件_04

带图标的列表

上一小节中，我们设计了一个简单的列表，列表中添加了一些文本。但实际使用时，我们可能大多数时候不是简单的添加一些文本，而是一些携带复杂信息、指示的控件项。

例如我们想添加这样类型的列表：

带你进入绚丽多彩的柿饼UI之动画、效果（三）_二维码_05

ListCtrl的每一行只能放一个控件，那怎么才能在每一行中显示多种不同内容呢？其实很简单，只要在ListCtrl中放容器控件，再对这个容器控件进行布局就可以了嘛！

首先我们从设计器的控件列表中拖动一个listctrl到页面上，设置宽度200，背景设置为白色。

带你进入绚丽多彩的柿饼UI之动画、效果（三）_动画效果_06

接着我们需要创建一个自定义面板，点击菜单栏的 文件 -> 新建 -> 自定义面板，然后会弹出一个小窗口其中的名称设置为"item.ui"点击确定即可。再然后我们从设计器的控件列表中分别拖一个 "ImageBox" 和 "Label" 控件到自定义面板中。

最后对custompanel、ImageBox和Label的相关属性设置如下图所示：

带你进入绚丽多彩的柿饼UI之动画、效果（三）_容器控件_07

最终我们的Custompanel的效果如下图所示：

带你进入绚丽多彩的柿饼UI之动画、效果（三）_动画效果_08

最后需要编写代码将自定义面板加入到列表中，示例代码如下：

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` 分别为加入到自定义面板中的对应控件的名称。
    }
})

实际效果

带你进入绚丽多彩的柿饼UI之动画、效果（三）_二维码_09

轮播卡片

轮播卡片，是属于在一个控件中放置几张图片，可以通过脚本实现按时间循环播放，或者用手滑动进行切换图片。

在PersimM中提供了 Card 控件，它是一种容器控件，能够存放多个控件,但每个控件是独立显示的，可以通过左右或上下翻动Card控件显示Card中不同的页面，也可选择是否循环。

所以要实现轮播卡片，只需要在Card控件中添加多个ImageBox控件，再往其中添加图片即可。

首先我们把页面背景设置为白色，然后从设计器的控件列表中拖动一个 Card 到页面上，设置高度200、宽度300。接着往 Card 中添加图片 ImageBox ，再往 ImageBox 中设置不同的图片。

带你进入绚丽多彩的柿饼UI之动画、效果（三）_自定义_10

示例代码：

    var thiz = this;

    setInterval(function()  //设置定时器，每2秒将Card控件中显示的图片切换到下一张
    {
        console.log('timeout');
        thiz.setData({card1 : {next : true}})
    }, 2000);