当前位置: 海之晶网站设计> 建站知识> 网站建设>原型和代码:创建一个自定义的拉来刷新手势动画

原型和代码:创建一个自定义的拉来刷新手势动画

文章出处:网站建设-海之晶网络 | 网站编辑:网站设计 | 发表时间:2020/11/27 15:23:05
分享:

这是一个简单的动画改变了游戏-拉动刷新,一个绝对的创新时间。难怪Twitter毫不犹豫地收购了Tweetie并雇佣了lorenbrichter。明智的选择!随着时间的推移,越来越多的开发人员将这种方式融入到他们的应用程序中,最后,苹果公司自己也为其系统应用程序邮件带来了“拉动刷新”(pull-to-refresh)功能,让那些重视可用性的人感到高兴。

我们将要创建的刷新手势。(查看大版本)今天,大多数客户希望在他们的应用程序中看到这种姿态,大多数设计师希望创建一个集成了拉-刷新动画的原型,最好是自定义的。本教程解释了如何在Flinto中构建一个原型,Flinto是一个使滑动手势动画成为可能的工具,而且很明显,如果没有pull,你就不能创建一个pull-to-refresh动画。不过,公平地说,Flinto并不是唯一一个给我们刷卡手势的工具——Facebook折纸和POP值得一提。在我们创建了一个原型之后,我们将把它编码到我们的Android设计中申请。这个本教程将帮助您掌握Flinto,理解创建此类原型的逻辑,并学习在应用程序中编写这些原型的过程。按照这些步骤,你需要macOS,Sketch for Mac,Flinto for Mac来创建原型,Android Studio和jdk7 编写代码。进一步阅读SmashingMag:应用内手势和移动应用程序用户体验功能动画如何帮助改进UX拇指区:为移动用户设计在Flinto的PhotoshopPrototype中制作高级动画对于原型,我使用的是聊天板的屏幕,一个由Erminesoft开发的Android聊天应用程序。用户聊天室的列表将是一个完美的地方来集成刷新动画来检查新消息。我们开始吧!第1步我们将把所有的设计都画成草图。第一步,我们需要创建一个屏幕,其中包含用户可以刷新的任何项目列表。现在我们需要将屏幕导出到Flinto。我们有两个选择此处:导出为分离PNG文件。使用插件发送到弗林托。迈步2Let将改用Flinto for Mac,你可以花99美元购买,也可以在网站上下载免费试用版。为了简单地刷新动画,我们需要五个屏幕。此时,我们可以添加一个自定义图像或使用标准的Flinto形式(矩形或圆形)来创建动画元素。对于这个项目,我使用了三个标准圆。停在那里:不要搜索圆形。使用矩形®;,将其做成正方形,然后设置最大拐角半径。给你-你有一个圆圈!步骤3第一个动画帧需要一个单独的层和内容列表。在它后面,我们将把动画元素放在起始位置;在我们的例子中,将有三个圆放置在相同的X和Y坐标上。这是屏幕1。

在屏幕2上,我们需要将内容沿Y轴向下移动,显示隐藏在内容列表后面的动画元素。

(查看大版本)此外,在此步骤(以及所有后续步骤)中,应打开转换计时器(“计时器链接”)并将其设置为0毫秒,以消除过渡中的任何延迟到下一个动画屏幕。只需单击一个艺术板标题,就可以看到计时器转换设置

关键字:
南京市汉中路1号国际金融中心9楼
建站热线:13815417591
免责声明: 本站部分内容来源于互联网,如果本站部分内容侵犯您的权益,请您告知,站长会立即处理。