00:00
好,下面呢,我们来看下一个叫添加聊天页面的动画效果,是一个什么样效果呢?来给大家演示一下。啊,当前呢。这是我们最终版的一个项目的运行效果啊,当前是一个大神一的登录的一个用户啊,显示的呢,就是老版的一个列表,刚才看到啊,当我们切换过来的时候,就已经有了一个动画效果,诶其实老板列表的这个界面就有效果了,是吧?那看一下我们的聊天界面走。我们的这个聊天信息是逐渐啊显示出来的,而且左边和右边的显示效果呢,不是完全一样的。啊,那这样的动画效果如何来做呢?啊,这里面不是完全我们手写的,而是用到一个库啊。那我先把这个库呢去下载一下,再跟大家库说一下这个库从哪来的啊。来首先呢,我们要去在我们的项目里面。
01:02
去将这一个迷云底下下载这一个库来说一下。回到我们,我们的UI组件库用的是d mobile,对吧,打开它的官网。滑动到最底部。啊,On mobile其实还提供了另外一个库,叫设计动效的一个库,叫on motion,好把它打开。而这个motion里面呢,就其实它提供了很多一些动画效果啊,我们来找一下点击这一个动画啊动组件。点击它啊,它提供了好几种,12345种,我们用的是哪一个呢?叫进出场动画。这里面呢,接着下面会告诉你如何去使用它一个简单例子,这里面有一个简单的一个呃,一个代码。其实就是去大家看的啊,通过这个基本代码你应该能知道,诶是不是引入就是我们刚才下载的这一个包啊,得到这样一个组件。
02:06
那下面呢,就去写这个组件标签,并且去给他指定一些属性。那这一个动画效果呢,就可以有了,其实还是很爽的,对吧。来下面呢,有一些基本的一个演示的情况啊,大家都可以去看一下。那我们在用的时候能指定哪一些标签属性呢?其实它有相应的API,那我们可以去选择API。找到进出场动画,那在这里面呢,就告诉我们如何用,首先第一步去下载,我们已经下载下面我们要用。来用一下。我们可以在两个地方用一下,首先是我们的目标,我们要在聊天界面找到我们的聊天组件。好,我们聊天组件里面呢,是有一个列表显示的,我们来看一下啊,这里面啊是会去通过map方法啊,去返回多个item。
03:08
那我们根据它的这一个显示,我们来看一下,实际上就是要去用这样一个组件标签将。每一个列表上,或者说所有列表上都包含起来,那这些列表上显示的时候就会有一些动画效果。好,那下面呢,我们就准备来去写一写是吧,那首先第一步呢,还是去下载以后需要去在我的组件里面进行一个引入。来引入一下。来,因为它是一个第三方的,所以呢,我就引入了这啊不是我自定义的是吧,好引入以后下面就多了一个组件标签,可以去写写在哪了,看到。啊,写在这里。
04:01
其实用起来还是比较简单的。好写上它以后呢,把我们这个所有的。都嵌入到这一个q animation这样一个组件标签里面去啊,它里面呢,有一些样式可以去指定啊,有一些应该说有一些属性标签,属性可以指定,比如说它这里面有个非常重要的叫。啊,这个type的值呢,不是随便可以写的,而是有这么一些值,那不同的值对应的效果是不太一样,至于哪个值对应什么效果,其实这一个大家应该是可以自己去啊,通过测试的方式去一个一个测,看它们哪一个效果是你觉得更好的,或者说是公司需要的一个效果。啊,其实还有一些别的一些属性啊。比如说这个地类,这个地类呢,这里面有说明啊,就整个动画延迟多长时间才开始,比如说啊,我们指定一个时间啊,因为它是个number类型来指定一个100,那也就是说它并不会立即开始那个动画的效果,而是延迟0.1秒以后才开始啊。
05:19
知道一下这个意思啊,关键是这个好,那也就是说我们现在动画效果的编码已经实现了,下面我们来看一下我们的效果行不行。来先登录一下一个账号大神一一啊123走你。好展示啊,我们的这一个啊,老板列表的这个界面是没有还没有动画效果了,主要是进去以后看一下走你。哎,是不是有啊啊,好像从上往下一次出来的,那如果你想你觉得这个效果不太好是吧,你可以换一个来换一个。
06:00
啊,换成left,我们来看一下是一个什么样的情况。嗯。就这一看大家应该能看到啊,如果你在线看一遍没关系,我们可以点过去看一下,还是有一些区别的。好,其他的一些呢,我就不再一个一个的去给大家去测试了,大家有兴趣的话可以测一下,那除了这一个界面我们可以去用的话,还有。啊,比如说我们前面的这个用户列表的这界面啊,用户列表也是我们的老板或者是大神啊的列表,他在哪呢?在我们的components啊,User在这里。那我们要用它呢,其实也很简单,跟刚才是一样的,首先的第一步是去引入这个组件。啊,把这个组件呢,给它引入进来,那下面呢,就去写这个组件标签啊,这个组件标签呢,去包含我的列表项,包含我的列表象,那我的列表象是通过它来产生的,所以我们在这里面写一个这个是吧。
07:11
来把这整个里面。这个部分给它放入到我们的这个组件标签里面。好,可以给我的这个组件标签呢,指定一个type值啊,具体这个type值啊写什么得看你需要一个什么样的效果啊,对吧,譬如说一个缩放啊,名字应该缩放类似的效果啊,好那个一类我就不指定了,那也就是说我们现在应该。退出去会有一个。动画效果了。我们来看一下走。可以了是吧。我们进来是有这样一个效果的,对吧?诶回退也有一个效果,也就是说我们从别的界面啊切换过来也是有这个效果。
08:01
大家是不是觉得很简单对吧,那就是这么简单,组建看开发啊,组件化开发就是能让我们的编码变得轻松啊,变得简单。好,其实呢,他这里面也提供了一些其他的一些动画效果啊,如果后面大家去公司工作以后啊,需要一些其他的一些效果,大家都可以啊去看一看,看看哪一个你可以可能用到。行,那这个呢,大家先来把这个。很快的念一下啊,因为这个比较简单啊,但是呢,效果还是比较不错的。
我来说两句