header_v1.7.40

Code实现Zee Young的动效

2年前发布

原创作品 / UI / 交互/UE
作品版权由MartinRGB 解释, 禁止匿名转载;禁止商业使用;禁止个人使用。 临摹作品,同人作品原型版权归原作者所有。

注:动效&设计是临摹自Zee Young,仅仅尝试代码实现。

Zee Young的设计非常令人惊艳,感觉是利用AE表达式控制了视差滚动和树木的操控点,用纸飞机沿路径运动来实现有趣味的下拉刷新效果。

看到有人在Codepen实现了Web效果,感到实现是具有可能性的,所以尝试iOS实现,效果还有很多不足的地方,会继续改进的。 而且知识不足,刚刚入门,目前也是假ImageView打造的效果,不是真数据

感谢开发者AlienJunX的指教。 没有AlienJunX大哥在扭曲滤镜和贝塞尔路径运动等知识点上的指导,我是根本做不出这个效果的。


流程:Sketch临摹->QC模拟扭曲效果/ScrollView回弹效果/List下滑效果->PaintCode绘制飞机运动路径->Code实现

iOS版本(My Github):https://github.com/MartinRGB/Replace-iOS
Android版本(来自中国开发者Race604):https://github.com/race604/FlyRefresh
Web版本:http://codepen.io/suez/pen/oXLroX

第一张:Decelerate版本实操
第二张:Decelerate版本录屏
第三张:Pop Bounce版本实操
第四张:Pop Bounce版本录屏
第五张:QC原型

Decelerate版本实操

Decelerate版本录屏

Pop Bounce版本实操

Pop Bounce版本录屏

QC原型

43

作品信息

  • 创作时间

    2015/06/14

相关作品 收录收藏夹 TA的主页
Code实现Zee Young的动效
Hello PM 意见反馈
没有新消息

提示文案

提示文案

提示失败
提示成功