恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Origami教程10-列表视差动画+TAB动画
0.0°
2016-12-20 原创文章 教程 举报 8225 65 48 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


更新:2016-12-20

下载
收藏

65人已收藏

HeNgrY

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

  • 47

    作品

  • 1811

    粉丝

  • 130

    关注

  • Sketch58-智能布局功能的一些总结
  • 关于老板说“出几个方案看看”的思考
  • 聊聊小团队设计管理的那点事
  • 关于Sketch我知道的那些事
相关标签
教程origami动效

    猜你喜欢

      2016-12-20 原创文章 教程 举报 8225 65 48 9

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

      0.0°

      你确定要举报Origami教程10-列表视差动画+TAB动画

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年12月16日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      48
      65
      9

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录