提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
这篇文章来讲讲paging效果的进一步应用。
先来看看官网上的slack demo。(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.基本素材及排版就完成后,界面如下:
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(一个屏幕的水平大小);
7.添加新的final状态,添加其余元件的动画及final条件,由此可见,fioid的动画可以添加多个final状态,有点类似于flash中的关键帧;
8.演示,检查,应该是不会出现问题了。
与以上同理,IFFF的paging动画也类似,这里就不展开了。
paging多见于App的引导页,但是也有应用于App的使用中,在fliod中也可以实现,实现难度比上面的例子小,但是理解难度要比slack的例子要大。各位可以尝试,gif附上。
> http://pan.baidu.com/s/1hrqZl5a
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册