Floid实践教程之Paging效果的进阶应用

uidec他(她)的空间>>4年前

人气314

篇文章来讲讲效果的进一步应用。

先来看看官网上的slack 。(gif上传失败多次,放弃了)

http://floidio.github.io/prototypes/slack/

为方便,附上gif的网盘地址:

http://pan.baidu.com/s/1gdNpb5h

也附上另一个demo,基本的原理一致:

http://floidio.github.io/prototypes/if-by-ifttt/

时间比较紧,主要拆解一下Slack demo的原理。有了上一篇文章的基础,也能比较快的上手。

1.基本素材及排版就完成后,界面如下:

414502

2.添加paging效果,基本动画完成;

3.对于paging特效,静态页面内的内容会跟随paging特效一同出现,但是对于跨页面的内容如何感知呢?这里需要用到一个动画:scroll move。在paging图层下,新建动画scorll move,进入动画页面;

4.手机层添加:move动画,把手机拖移到中间;scale动画,1x;运动曲线spring,tension 500,friction 50;

5.背景层添加:opacity动画,100%;

这时预览操作时可以发现,第一次滑动时的动画没有问题了,但是向左滑动时并没有效果,同时按照这种做法的第三页动画并不能正常的运作。

scroll move解决的是元件怎么感知页面的变动的问题,下一步应该解决的是原件怎么准确的感知页面的变化。

6.点击动画状态final的下拉箭头,添加条件如下:condition in constraints/switch continuously/edge horizontal/rage 0-1536,这个条件的意思为以水平距离约束,范围为0~1536px(一个屏幕的水平大小);

414503

7.添加新的final状态,添加其余元件的动画及final条件,由此可见,fioid的动画可以添加多个final状态,有点类似于flash中的关键帧;

414575

8.演示,检查,应该是不会出现问题了。

与以上同理,IFFF的paging动画也类似,这里就不展开了。

paging多见于App的引导页,但是也有应用于App的使用中,在fliod中也可以实现,实现难度比上面的例子小,但是理解难度要比slack的例子要大。各位可以尝试,gif附上。

> http://pan.baidu.com/s/1hrqZl5a

     
TA的上传
  • 红色风格企业后台管理系统界面设计
  • 4张后台管理系统界面UI
  • 几张系统管理登录页设计
  • 国家电网管理系统后台界面
  • 简约大气后台登录页
  • 员工考勤系统后台界面
  • 飞哥网站
  • 一起海带APP设计
  • 扁平风格手机主题UI
  • 25个优秀UI图标ICON设计作品
查看全部

只有登录之后才可以评论,请点击进行登录

全部评论: 0

登录

忘记密码

如果您尚未注册,请选择以下方式登录

Q Q 登 录 微 博 登 录
已有账号?快去登录>>

注册