Origami教程10-列表视差动画+TAB动画

原创文章 分类: 教程 版权:
5154 59 44 7
2016-12-16
29.9
首页推荐

上期教程,大家学习了常用的下拉刷新动效,当然仅是一个思路和方法,不同的终端平台有不一样的做法,不要一味照搬,学习其中的实现方法即可,共勉~

本期主要讲2个动效,TAB的切换,以及列表的视差效果。

请下载附件,并且开始学习。


完整效果如下:

Image title



学习讲解

本次教程都是较为常见的动效,列表动效 & TAB切换。两个效果是同时做的,所以在图层结构安排上要稍微注意,不能乱来。

Image title



看右侧的图层结构,其中以”Screen”包含所有的切换页面,方便后面的制作。然后各自在对应的页面安排对应的UI,方便后期的动效添加,避免错乱。

建议大家先看看图层的布置方法,理解之后再继续。

OK,那就正式开始吧。


Step 1:添加Swipe X

选择“Screen”文件夹,添加 Swipe X 事件,把Pop Switch 中的 End Value 数值改为-375 。

Image title


在预览中测试,可见已经在Screen01 和 Screen02 之间切换了。


为什么是 -375 呢,你注意看每个文件夹对应的尺寸,还有Anchor 的安排,动效的制作和图层的结构安排是息息相关的,这个在技术还原的时候道理差不多。


Screen01 和 Screen02 之间切换成功了,但是看看上面的TAB模块,并没有对应发生变化,所以接下来要做的:

  1. TAB Line 代表当前项,所以屏幕切换时要滑动到对应的位置;
  2. TAB的文案颜色应根据当前项发生变化;
  3. 点击文案也会发生屏幕的切换;

Step 2:TAB 动效添加

一般情况,这个效果下意识就想到改变X轴来实现,在这里我们用另一种方式,不过首先,让我们先把Pop Switch 的Progress 输出弄个发射器,方便我们多方面运用,看图:

Image title

建议大家新增Comment 命名为TAB动效,这是一个良好的设计习惯,方便理解,希望大家能养成这种习惯。

TAB Line:Patch 逻辑,Clip > Transition ,看图:

Image title

Transition 右键选择Position 模式,以此能够控制图层的Anchor 属性


TAB 文案:Patch 逻辑,Clip > Transition ,看图:

Image title

Transition 右键选择Color 模式


TAB 文案的点击,给对应的文案添加Tab事件,然后为了保证点击的准确性,把属性里size 的 H 改为44

Image title

 

在预览中操作看看,是不是已经完全实现了TAB的效果,有问题请自检,加油~


Step 3:使用Loop生成列表

这里就不细说Loop列表的实现方法了,可以移步去看第六期的教程。其中头像的素材能用第六期的,图标附件里面有。不想重复的可以直接在Completed 文件里直接复制过来,最后的逻辑Patch 如下:


Screen 01

Image title


Screen 02

Image title


其中为了方便后面制作列表动画,为Loop做一个发射器


Step 4:添加Screen 01列表动效

列表的时间差动效,最关键的Patch 理所当然是Delay,但是关键点在于 Duration 的时间怎么处理,这里我提供一种思路,希望你们能理解,因为其中并没有新内容,都是基本的Patch 逻辑,在此就直接贴最后的逻辑图了,请看图:

Image title

其中,时间差以算法来得出不同的时间差,然后赋值到Duration,这样就能有一个列表时间差的简单效果了,逻辑添加完后在预览检查一下,效果如图:

Image title


Step 5:Screen 02列表细分动效

Screen02的列表效果以内部细分元素的方法来做,Screen01以Contents 文件夹来制作动画,Screen02 则以 Contents02 里面的图层来一一对应做动画,在此也仅是不同的动画逻辑添加,并不困难,逻辑图如下:

Image title

其中里面用到的Delay 主要就是为了控制动画出现的先后顺序,类似AE的时间轴概念。

到此基本上整个效果已经完成了,基本思路并不难,主要是图层结构的安排,还有对应的Patch 逻辑使用方法。


学习总结:

  1. 初识Swipe ,并理解其基本使用方法;
  2. 图层的Anchor 属性动画制作方法;
  3. 文案的点击事件,注意修改其尺寸保障点击有效性;
  4.   Loop的高阶使用思路及方法;



 界面主要是借鉴了https://dribbble.com/shots/3157407-Message-Experience-for-iOS-app   

By Gleb Kuznetsov✈

Image title


HeNgrY

博学之,审问之,慎思之,明辨之,笃行之

1417粉丝/116关注

话唠原创小生小小收藏家
IconFont-1PX不对齐引发的'血案'Origami教程09-下拉刷新动画

HeNgrY

HeNgrY

博学之,审问之,慎思之,明辨之,笃行之

话唠原创小生小小收藏家

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2017 UI.CN