Facebook 开源动画框架 Pop

Facebook 开源动画框架 Pop

作者:fenglh/2016.08.25

继承关系

这里写图片描述

创建动画

使用POP可以创建4类动效:: spring, decay, basic and custom.

Spring (弹性)

动效可以赋予物体愉悦的弹性效果

POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];

Decay (衰减)

动效可以用来逐渐减慢物体的速度至停止

POPDecayAnimation *anim = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];

Basic(基本)

动效可以在给定时间的运动中插入数值调整运动节奏

POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];

Custom(自定义)

动效可以让设计值创建自定义动效,只需简单处理

开始动画

若想让物体动起来,只需要添加上面的4类动画所创建的东西到视图。

[self.yourView.layer pop_addAnimation:anim forKey:@"typeANameForYourAnimationHere"];

时间函数 (timing function)

  • Ease in (kCAMediaTimingFunctionEaseIn):
    这里写图片描述
  • Ease out (kCAMediaTimingFunctionEaseOut):
    这里写图片描述
  • Ease in ease out (kCAMediaTimingFunctionEaseInEaseOut):
    这里写图片描述
  • 默认 (kCAMediaTimingFunctionDefault):
    这里写图片描述

动画效果

  • 强烈推考官方demo–Pop官方demo
  • 也可以看一下本人写的demo–ITXHook(注:此demo不是单纯作为演示Pop动画而建立的,只是它的UI交互部分使用了Pop,所以贴上来供参考)

参考文章

Facebook POP动效库使用教程

23个Facebook Paper中的设计细节

Pop官方demo

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值