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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
重力触发的知乎问题删除动效
0.0°
2016-02-27 原创文章 经验/观点 举报 2412 19 9 5

知乎里满满几屏都是看过或者不想看的问题,真想像尿尿一样全部倒掉倒掉!

当初自学UI的时候听朋友说知乎是产品和设计的聚集地,于是就去瞻仰了一下,从此一发不可收拾成了忠实的知乎狗哈哈。可是不知道是不是因为我看的问题类型太杂乱,导致现在给我推荐的问题都奇奇怪怪的好多都不感兴趣,有些看过的问题回答也还会显示,导致我滑来滑去找不到一个感兴趣的。对于那一大摞不感兴趣的问题要一个个删除实在太麻烦,真希望能一股脑全都去掉啊,于是突发奇想做了一个逗比动效来演示一下。做动画的过程中也有一些研究和收获,特此与大家分享一下,如果说得有不正确的地方还望各位指正~~



动效演示效果:(压缩gif的时候可能质量有所降低)

Image title


这个动效我是用的hype3 pro来完成制作,其中主要分为四个部分:


1.手动删除部分

Image title


2.像尿尿一样哗啦哗啦流出去部分

Image title


3.因为肾不好所以要用力把最后一点尿干净部分

Image title


4.新问题加载

Image title


各个部分的动效制作过程我就不加赘述了,无非就是调参数调到爽,耐心点总能调好的。至于连贯性方面,2.3.4这三个部分就是间隔一定的时间差然后连续开始时间线就好,我主要描述一下从第1部分到第2部分是怎样通过倾斜屏幕触发的。


hype用得比较多的各位应该都知道,hype里有个很牛逼的“物理量”功能,通过设定元素的物理量参数,即便没有用时间线做动画也可以很方便地模拟真实物理情景中的复杂运动


Image titleImage title


所以,最开始的想法就是给每一条问题赋予物理量参数,倾斜手机的时候让那些问题在重力作用下掉出去。但是经过多次测试之后发现效果非常不理想,因为第一个问题没有完全出去的时候第二个问题根本动都不动,看起来很生硬。于是就只能先用时间线做好一个个问题连续滑出的效果,然后通过倾斜屏幕来触发这一动画时间线,从而实现倾倒的效果。


那么问题来了:手机为什么那么大?hype里并没有这么奇怪的触发条件怎么办?

于是这里就需要一个神奇的装置——灯灯灯等重力触发器

首先我们用矩形工具画几个矩形,并且围成如下的一个封闭空间。

Image title


然后在这个阴冷潮湿孤单寂寞的地牢里的悬崖上,放进一个混球,并且命名为“混球小学生”(你问为什么?因为不这么命名的话是会失效的哟我讨厌小学生),再给它赋予一下物理量(动态,受重力影响,通过设备控制重力方向),这样角色就更加生动形象了

Image title

Image title


为了不让小学生逃出来为祸世间,我们需要给地牢也设定物理量来加固一下(静态,相互影响)。

Image title


完成上述操作后,一个激动人心的重力触发器就做好啦,然后让我们把它安装到屏幕的底部,让悬崖上的小学生能在屏幕底部露出一点点脑袋瓜子

Image title


最后,我们以小学生“退出时区时”作为触发条件,触发倾倒效果的时间线

Image title


如此这般,在我们倾斜屏幕的时候,小学生在重力的作用下彻底离开了我们的视线跌入了万丈深渊(掉进左边的坑里,退出了视区所以触发时间线),于是所有的事情都能愉快地按照计划发展了哈哈哈哈~~上述就是通过倾斜屏幕来触发时间线的主要思路,接下来补充一些细节及感想:


1.即使某个元素的透明度为0甚至直接设为隐藏,也会受到物理量的影响,在不为人知的地方偷偷地运动着。所以我们大可以把触发器的可见性设为隐藏,这样既能保持功能又不影响视觉(虽然透明度调为0也不影响视觉,但是在操作上会挡住底下的元素,假如它底下有个按钮的话你就看得到但是按不到那个按钮。虽然在这个动效里并不影响什么,但是养成这种习惯还是有好处的)


2.“进入视区时”和“退出视区时”这两个触发条件好像并非在上下左右四个侧边都是相同的工作机制,一开始我把触发器放在屏幕左侧,但是当小学生从左侧离开屏幕之后并没有成功触发。这个问题我还没弄得太清楚,哪位前辈若知其所以然还望不吝赐教


3.在物理量方面我们只需要让墙能挡住小学生不出去就行了,所以不妨把“退还”“摩擦力”“空气阻力”等等的无关参数都设为0,这样可以最大程度降低设备的运算压力,养成优化的习惯也是不错的哈


关于知乎:

不知道大家是否也有觉得很多问题或者回答都不想看,一般是一个个删除还是置之不理呢?欢迎大家交流一下自己的看法哈~

话说封面的那个知乎问题的高票回答是我当初答的哈哈,有兴趣的可以瞄一下~如何让电脑有种高端的感觉?




更新:2016-02-27

收藏

19人已收藏

傻子白

Always for fun!

  • 17

    作品

  • 78

    粉丝

  • 11

    关注

  • 剑网三全门派3D像素风
  • 个人作品集
  • 像素风情人节图标设计
  • 黏糊糊的字体效果教程
相关标签
ui动效hype经验

    猜你喜欢

      2016-02-27 原创文章 经验/观点 举报 2412 19 9 5

      重力触发的知乎问题删除动效

      0.0°

      你确定要举报重力触发的知乎问题删除动效

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

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

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      9
      19
      5

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

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

      登录

      手机号

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

      登录
      第三方账号登录