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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
Origami教程07 - Android按钮动效
0.0°
2016-11-15 原创文章 教程 举报 16421 42 49 13

今天暂时脱轨一下官方案例,一起研究下Origami Studio之后,Android按钮动效的制作方法。和QC年代的做法略有不同,不过方法大同小异。今天会有几个新的Patch学习,还有如何清晰规划自己的Patch逻辑。

请打开教程文件同步进行学习。



Image title


学前思考

相信大部分同学都应该对Material Design有一些了解的,不清楚的请自行面壁思过。先看看官方的按钮动效,以此为基础思考如何实现,请看下图:

Image title

从动效层面来说,要实现一个效果,先梳理清楚,“动”的元素有哪些,从上图来看,不难看出分别有以下元素:

  1. 按钮颜色变化;
  2. 阴影的深度变化;
  3.   波纹效果;

教程文件理解

基础的按钮样式已经搭建完成了,其中里面有个新的学习点,就是图层遮罩,看下图:

Image title

大家可以自己摸索一下怎么用,这里就不多阐述了,并不是太难用的操作。

其中,遮罩层中的The Light 1是做按钮颜色变化的,这里要特殊说明一下为什么不是直接变化按钮颜色。因为按钮底色是多变性的,所以基本都是以黑色12%的方式来兼容所有底色的按钮,当然实际技术实现的时候也许会不一样。

The Light 2是做波纹效果的。Shadows 02是因为Origami不支持双层阴影,所以只能重新做一层了。

基本如上,教程,GO~ 哈哈 ;P


Step 1:按钮颜色变化

先做最简单的,按钮颜色变化,都是基础Patch添加,就不一一阐述了,看图:

Image title

然后,把阴影的变化加上,注意变化数值,为了清晰Patch逻辑,明晰每个patch的对象与作用,可修改名称,双击即可,如下图:

Image title

在预览体验一下,目前是点击开启动画,再点关闭动画。但从动效而言,动画是自动关闭的,怎么做到这一点?在这里我们要学习一个新的Patch,Wait patch,添加,并连线,方式如下:

Image title

Duiation 表示停顿X秒开启命令,再预览一下,效果很明显,1秒后动画自动关闭了。

现在看起来,貌似还不错,但从细节而言,是不好的,因为动画的时间节奏无法控制,最重要的原因是Pop Animation的动画播放时间是不可控的,怎么解决?

好吧,其实也很简单,放弃Pop Animation,用Classic Animation代替,在这里有个小技巧,直接双击小圆点来添加patch,这样即使删除patch,但是连线还是存在的,不然重新连线也是心烦不是?请看下图:

Image title

Classic       Animation学习

Number    信号接收

Duiation    表示停顿X秒开启命令

Curve        动画曲线


因为按下状态的话,按钮底色一直都是处以变化后的状态的,只有松开手指后才会复原,所以,连线的逻辑关系要调整一下,最后如图:

Image title

预览一下,嗯,现阶段的效果搞定,效果如下:

Image title

没有波纹效果看起来很怪异,哈哈,继续~


Step 2:捕捉点击坐标

首先,波纹效果直接效果就是,从小到大,然后从透明到不透明。动画本身并不复杂,问题在于波纹效果是跟随点击的位置而发散的,要做到这一点,必须捕捉当点击时,点击所在的坐标点是多少。


好吧,其实也很简单,要做到这件事情,用Mouse patch很轻松就解决,请看下图:

Image title

在预览里面测试一下,你会发现The Light 2的坐标点已经会跟随点击的位置变化了。

搞定这个基础问题,再继续的时候,发现连线已经很多了,如果还在基础上继续加逻辑,后面看逻辑就显得很乱,所以我们在这里把Tab命令做一个信号发射器,点击小圆点,快捷键“W”,然后再“Shirt + W”调出接收器,请看下图:

Image title


Step 3:添加波纹效果

到这里,基本上就没什么难度了,和上面的思路一样,完成The Light 2的大小变化、透明度变化,因为简单所以也不多阐述了,最后的Patch 逻辑如下图:

Image title

其实上图并没本质解决一个问题,就是波纹的动画复原,我这里是简单处理1秒后复原,但是从实际的场景这样明显是不好的,从技术实现其实都很简单解决,这里的话暂时本人没找到什么简单的方法,有朋友提供一下思路?

最后,看看整体的Patchs 逻辑排布:

Image title

还是清晰易懂的有木有~


学习总结:

  • 认识如何使用遮罩层;
  • 初步认识Wait patch;
  • 添加Patch时的一些便利小技巧;
  • 初步认识Classic Animation patch;
  • 初步认识Mouse patch;
  • 初步认识信号发射器以及信号接收器;
更新:2016-11-15

下载
收藏

42人已收藏

HeNgrY

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

  • 47

    作品

  • 1811

    粉丝

  • 130

    关注

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

    猜你喜欢

      2016-11-15 原创文章 教程 举报 16421 42 49 13

      Origami教程07 - Android按钮动效

      0.0°

      你确定要举报Origami教程07 - Android按钮动效

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

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

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      49
      42
      13

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

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

      登录

      手机号

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

      登录
      第三方账号登录