状态Part D（效果：长按删除聊天记录）

本节内容我们一起来制作，这样一种效果，在呃聊天，的页面我们长按某一个，聊天气泡那么它会显示这些，啊操作按钮，当我们点击，删除的时候删除的确认，弹框从下方向上弹出，当点击取消的时候当然就什么都不操作了，那么我们，继续重复刚刚的动作，当我们点击，删除，的时候，刚刚这个，气泡，消息就被删除掉，也就是，被隐藏，掉了，那么我们一起来制作这样一种效果，我们还是来分析一下啊，首先，这么复杂的交互效果肯定还是会应用到状态这个东西那么这个效果的状态可能就比较复杂，了，首先这样最原始的页面状态肯定是第一个状态默认状态，当长按这个聊天气泡的时候它会显示，这些操作按钮这是第二种状态，那么当点击删除的时候会有一个确认的弹框这是第三种状态，当点击，取消，的时候，这个，弹框就消失了，那么，其实，就恢复，的是默认，的第一种，状态这个，就就没有，新的状态，了当点击，删除，按钮，的时候，刚刚，的这个，聊天，的记录被删掉，那么这又是第四种，状态，那么，如果不算，全局，状态，的话，这个，我们，要有四种，不同，的状态，那么，这个，就比之前，的案例，要相对，啊稍微复杂，一些，但是，原理，都是一样的啊，o k那么，我们，一起来，制作，一下，那么，切换到聊天，页面，我们先把这个，长按这个聊天，气泡显示的这个三个，按钮给做出来啊，这个，呢在我们，切换到左侧，的第二个选项卡组合，里边它，磨刀默认给我们提供了这个弹出气泡的这个组件，但是这个弹出气泡的它这个箭头，是朝上的我们需要，做朝下的这么一种，气泡，那么，这个怎么做呢，我们，还是选中这个，组合那么，在右侧，的图层选项卡，下边，我们，可以，找到，对应的这个，小三角，我们打开，这个，弹出气泡然后呢我们可以，找到，对应，的这个，三角，那么我们，可以，给它旋转，一百八十度，那么接下来，我们，移动一下，它的位置，哎这样，就搞定，了，那么，我们，把这个，弹出气泡，给它放到上边，来，双击修改，里面，的文字，其实，真正，的q q里边，它这个，气泡，里边，按钮，很多啊我就随便，写几个，然后其中，有一个，是，其中，有一个，是删除，就可以，了，ok，那么，接下来，我们还是，要有这个，下边的删除确认弹框那么我们使用矩形来做一个，啊它里边的文字写的是，我们，看一下，啊，删除后将不会出现在，你的消息记录中，那么下边，这个，按钮呢是删除，并且删除它的颜色是红色，下边，还有一个，取消，这个取消呢就是正常的颜色就可以，ok我们再拖动，一个矩形进来，它这块是有一个，分界线的，我们设置一下它的填充颜色为浅灰色，它的描边为透明色，所有的描边我们，都给它设置，为透明色吧，然后在这之间，我们可以，加一个，线条，ok那么我们给这几个元件按住，control加j，给它编组，那么这呃这一个，效果，所涉及到的所有的页面上，的内容，我们，就做完了，那么，接下来，我们，开始，接下来，我们开始，添加，状态，默认，状态，呢是呃什么都没有，的，那么，状态，二应该，就是，显示操作气泡，那么状态，三就应该是，显示确认，弹框，状态四，应该，就是，删除后，ok那么我们首先进入到默认状态这些，东西是不是都应该是隐藏的呀，那么，状态二应该是操作，气泡是显示状态下边，的这个是隐藏状态，显示，确认，弹框那么，确认，弹框应该，就是，显示，状态，但是上边的这个，呃操作，的这个，气泡，应该，就是，隐藏，状态，那么删除后，这些应该，都是，隐藏状态，ok那么这四种，状态的这个里边，各种元件的显示隐藏，我们就做好，了，那么接下来，我们，开始添加，交互，首先我们，切换到默认状态，当我们，是对这个，气泡，进行，操作，之后，然后呢去显示，不同，的内容，那么，我们，选中，这个，气泡，然后链接到，状态，二，那么，在这个，链接设置，当中我们，选择长按这个手势，那么动效时长同样我们给它改短一点零点二秒我们试一下啊，我们先来，运行，预览一下，看一下，第一步，能不能，做到，长按，哎显示出来，了，ok，那么，显示，到状态，二的时候，当状态，二显示，这个，气泡，之后，我们选中，这个，删除，按钮，然后，链接到确认弹框，那么这个弹框呃它呃显示，确认弹框的这个呃手势呢其实就是单击，就可以了，那么就这回，就切换，到了状态，三，那么状态，三当中，如果说我直接点击，取消的话，那么其实，就是直接，恢复，到默认，状态，如果，是点击删除，的话，那么它会显示切换到删除后这个状态，ok那么我们，整体的来预览一下，长按显示气泡点击删除，出现弹框点击取消，确认弹框消失，那么另外一个流程长按删除，点击，删除，按钮，哎这些都没有了但是，还是，这个基础，的这个，流程我们，已经做完了，但是，呢一些，交互的细节上还是不太完美我们，接着，给他，修改，一下，默认状态显示，切换到这个操作气泡，这个状态这没什么，可说的当点击删除，的时候切换到确认，弹框那么这个动效，其实他不需要，这个，动效的，时长对不对，他他不需要进行这个呃，渐进的效果，ok那么，当显示确认弹框之后，无论是删除，还是取消它的动效，时长都是不需要的，我们都给它去掉，这个，时候，我们，再来，运行，一下，长按删除，点击，删除，没有了，同样删除取消也没有了，那么这个，确认弹框是不是，从下往上滑入这样的话，是不是，就更完美了呀，ok我们，再来修改，一下，当显示，这个，确认，弹框的时候，我们，选中，这个大的弹框组合，它的动向，呢我们，给它设置成，向上滑入，哦应该是，下滑入就是从下往上滑入，那么，它的时长呢，给它设置成最短的两百五十毫秒我们再来试一下，哎这样的话就会好很多，ok那么，这个，效果，我们就又实现，了，那么通过这几节课呢我们，制作了一个，简单的呃手机q q的一个基础，版的原型，那么，学习完这些，课程之后，大家应该就会对磨刀这款工具有一个呃比较，熟练的操作，了，大家可以，尝试着去做一些自己喜欢，的原型，那么后续几节课我还会为大家简单的介绍几种经典的交互案例，那么，呃最后，呢我们一起来看，一下啊我们通过，这几节课做的这么，多的页面，这么多的交互，涉及到的这些左侧，的原件，大部分也都能涉及到的但是，还有一些，我们并没有使用到，我还是，在这简单，的跟大家啰嗦，两句啊，那么我们啊新建，一个页面吧，首先，我们来看网页原件那么原件，当中呢我们是可以嵌入外部的啊网页链接的，那么方法呢就是把这个网页文件拖进来然后双击可以，修改它的u r l地址，那么它仅支持h t t p s协议的网站，我输入一个三w点q q点com o k我们运行一下，哎那么这一个区域里边它就显示的是q q的腾讯网当然这个显示的是电脑版的网页啊，ok，那么，这个是网页，地图，这个地图，原件，呢它仅仅，是一个，地图，的样式，在这儿，你在画圆形，的时候，可以，把这个，地图，摆在这儿，告诉，啊其他人，你的小伙伴，这块，是显示，一个，动态，的地图，那么，实际上，它是并没有，啊实在，的这个，效果，的啊我们，运行，一下，他就是他确实，可以，拖动，但是呢它它并不是，根据，你的这个，实时，的位置，去判断显示，真实的位置，它它并不是，这样的，ok，那么选择文件同样这个一般情况下都是在p c网站上去可能会应用到这些啊原件我们选择它，它可以去真实的去调用你本地选择文件，的这么一个，窗口，但是实际上，它也并没有真实的作用它只是，一个啊样式，的演示而已，那么，接下来，还有，这个，批注，那么，批注，呢它可以，啊，对你的原型进行，一些，说明那么，它同样，是可以修改，它的颜色的等等，那么，大家，可以，看到啊我在做的这个，联系人，的页面，在这个，聊天，页面里边，我就做了一个，简单，的说明，那么，在屏幕，上右滑可以返回，至上，一页，那么这个右边它还有一个小圆点，儿我们可以拖动，这个小圆点来去，呃指引，就是说你的这个便签它是针对于哪个原件针对于哪个区域来说明的，那么，其他的原件呢我们在制作原型，的时候基本上都用到过了啊大家，可以呃自己再去熟悉一下，ok那么这节课的内容就是这么多