您所在的位置: 首页 > 新闻资讯 > 软件资讯

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

时间:2016-02-28 编辑:robin 阅读:4 次

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

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

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

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

1.手动删除部分

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

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

4.新问题加载

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

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

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

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

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

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

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

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

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

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

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

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

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

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

关于知乎:

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