iOS之POP动画使用和实战
来源:互联网 发布:java语言基本数据类型 编辑:程序博客网 时间:2024/06/05 06:38
- POP是一个来自于Facebook,在iOS与OSX上通用的极具扩展性的动画引擎。它在基本的静态动画的基础上增加的弹簧动画与衰减动画,使之能创造出更真实更具物理性的交互动画。
- Pop Animation
在使用上和Core Animation
很相似,都涉及Animation
对象以及Animation
的载体的概念
- 关于Core Animation
的相关详解, 可参考我的上一篇文章Core Animation(核心动画)
- 不同的是Core Animation
的载体只能是CALayer
,而Pop Animation
可以是任意基于NSObject
的对象
- POP 使用 Objective-C++
编写,Objective-C++
是对 C++
的扩展
GitHub项目地址
一. POP自我介绍
- POP 目前由四部分组成:1. Animations;2. Engine;3. Utility;4. WebCore。
- POP 动画极为流畅,主要在于Enimator 里,POP 通过 CADisplayLink 高达 60 FPS 的特性,打造了一个游戏级的动画引擎。
- CADisplayLink 是类似 NSTimer 的定时器,不同之处在于,NSTimer 用于我们定义任务的执行周期、资料的更新周期,他的执行受到 CPU 的阻塞影响,而 CADisplayLink 则用于定义画面的重绘、动画的演变,他的执行基于 frames 的间隔。
- 通过 CADisplayLink,Apple 允许你将 App 的重绘速度设定到和屏幕刷新频率一致,由此你可以获得非常流畅的交互动画,这项技术的应用在游戏中非常常见,著名的 Cocos-2D 也应用了这个重要的技术。
- WebCore 里包含了一些从 Apple 的开源的网页渲染引擎里拿出的源文件,与 Utility 里的组件一并,提供了 POP 的各项复杂计算的基本支持
二. POP参数介绍
POP默认支持三种动画,但同时也支持自定义动画
POPBasicAnimation
//基础动画POPSpringAnimation
//弹簧动画POPDecayAnimation
//衰减动画POPCustomAnimation
//自定义动画
1、相关属性介绍
1-1、属性简单介绍
- POP动画大部分属性和CoreAnimation(核心动画)的含义和用法一样
- 具体可参考Core Animation(核心动画)
- 每种动画的特殊属性会在下文中继续介绍
1-2、动画可配置属性
- CALayer层各属性(比较简单,就不加注释了)
/** Common CALayer property names. */extern NSString * const kPOPLayerBackgroundColor;extern NSString * const kPOPLayerBounds;extern NSString * const kPOPLayerCornerRadius;extern NSString * const kPOPLayerBorderWidth;extern NSString * const kPOPLayerBorderColor;extern NSString * const kPOPLayerOpacity;extern NSString * const kPOPLayerPosition;extern NSString * const kPOPLayerPositionX;extern NSString * const kPOPLayerPositionY;extern NSString * const kPOPLayerRotation;extern NSString * const kPOPLayerRotationX;extern NSString * const kPOPLayerRotationY;extern NSString * const kPOPLayerScaleX;extern NSString * const kPOPLayerScaleXY;extern NSString * const kPOPLayerScaleY;extern NSString * const kPOPLayerSize;extern NSString * const kPOPLayerSubscaleXY;extern NSString * const kPOPLayerSubtranslationX;extern NSString * const kPOPLayerSubtranslationXY;extern NSString * const kPOPLayerSubtranslationY;extern NSString * const kPOPLayerSubtranslationZ;extern NSString * const kPOPLayerTranslationX;extern NSString * const kPOPLayerTranslationXY;extern NSString * const kPOPLayerTranslationY;extern NSString * const kPOPLayerTranslationZ;extern NSString * const kPOPLayerZPosition;extern NSString * const kPOPLayerShadowColor;extern NSString * const kPOPLayerShadowOffset;extern NSString * const kPOPLayerShadowOpacity;extern NSString * const kPOPLayerShadowRadius;
- UIVIew层
/** Common UIView property names. */extern NSString * const kPOPViewAlpha;extern NSString * const kPOPViewBackgroundColor;extern NSString * const kPOPViewBounds;extern NSString * const kPOPViewCenter;extern NSString * const kPOPViewFrame;extern NSString * const kPOPViewScaleX;extern NSString * const kPOPViewScaleXY;extern NSString * const kPOPViewScaleY;extern NSString * const kPOPViewSize;extern NSString * const kPOPViewTintColor;
- 其他层视图层
/** Common UINavigationBar property names. */extern NSString * const kPOPNavigationBarBarTintColor;/** Common UIToolbar property names. */extern NSString * const kPOPToolbarBarTintColor;/** Common UITabBar property names. */extern NSString * const kPOPTabBarBarTintColor;/** Common UILabel property names. */extern NSString * const kPOPLabelTextColor;
以上仅仅列出了常用的一些属性,更多控件/更多参考框架里面类
POPAnimatableProperty.h
1-3、POPBasicAnimation可配置的属性与默认值为
POPBasicAnimation *basic = [POPBasicAnimation linearAnimation];basic.fromValue = @(0);//从0开始 basic.toValue = @(3*60);//180秒后结束basic.duration = 3*60;//持续3分钟[lab pop_addAnimation:basic forKey:nil];
let basic1 = POPBasicAnimation(propertyNamed: kPOPLayerPositionX)basic1?.fromValue = redView.layer.position.xbasic1?.toValue = 300basic1?.beginTime = CFTimeInterval() + 1.0redView.pop_add(basic1, forKey: "position.x")
三. POPBasicAnimation基础动画
1. 先看一下效果, 其动画效果如下
2. 示例代码
let basic1 = POPBasicAnimation(propertyNamed: kPOPLayerPositionX)basic1?.toValue = 300//开始时间basic1?.beginTime = CFTimeInterval() + 1.0redView.pop_add(basic1, forKey: "position.x")
3. 可以看到,添加一个动画最少仅需三步
- 1)定义一个
animation
对象,并指定对应的动画属性(kPOPLayerPositionX
) - 2)设置初始值结束值(初始值可以不指定,会默认从当前值开始)
- 3)添加到想产生动画的对象上
4. Core Animation 和 POP 运行动画对比
- 由于 POP 是基于定时器定时刷新添加动画的原理,那么如果将动画库运行在主线程上,会由于线程阻塞的问题导致动画效果出现卡顿、不流畅的情况。
- 更为关键的是,你不能将动画效果放在子线程,因为你不能将对 view 和 layer 的操作放到主线程之外
- POP 受主线程阻塞的影响很大,在使用过程中,应避免在有可能发生主线程阻塞的情况下使用 POP ,避免制作卡顿的动画效果,产生不好的用户体验
四. POPSpringAnimation弹性动画
1. 属性介绍
velocity
: 设置动画开始速度springBounciness
: 振幅, 可以设置的范围是0-20,默认为4。值越大振动的幅度越大springSpeed
: 速度, 可以设置的范围是0-20,默认为12.值越大速度越快,结束的越快dynamicsMass
: 质量, 质量越大,动画的速度越慢,振动的幅度越大,结束的越慢dynamicsTension
: 拉力 拉力越大,动画的速度越快,结束的越快dynamicsFriction
: 摩擦力, 摩擦力越大,动画的速度越慢,振动的幅度越小。
注意: 以上的六个属性中一般只会设置
springBounciness
和springSpeed
, 如有特殊需求才会设置其他属性
2. 代码示例
let spring = POPSpringAnimation(propertyNamed: kPOPViewScaleXY)//注意: 这里改变的是x和y的比例,参数赋值也要传两个; 若只需要其中一个,则可设置//`spring?.fromValue = 0.4`即可spring?.fromValue = CGSize(width: 0.3, height: 0.3)spring?.toValue = CGSize(width: 2, height: 2)spring?.springSpeed = 5spring?.springBounciness = 15lightBlue.pop_add(spring, forKey: "scale")
五. POPDecayAnimation
POPDecayAnimation
提供一个过阻尼效果(其实Spring
是一种欠阻尼效果)可以实现类似UIScrollView
的滑动衰减效果(是的你可以靠它来自己实现一个UIScrollView
)
属性介绍
-deceleration
(负加速度, 衰减系数(越小则衰减得越快)) 是一个你会很少用到的值,默认是就是我们地球的 0.998,如果你开发APP给火星人用,那么这个值你使用 0.376 会更合适
-velocity
也是必须和你操作的属性有相同的结构,如果你操作的是 bounds, 传CGRect类型;如果 velocity 是负值,那么就会反向递减代码示例
let decay = POPDecayAnimation(propertyNamed: kPOPViewSize)decay?.velocity = CGSize(width: 300, height: pictureBtn.frame.height)//延迟1秒后执行decay?.beginTime = CACurrentMediaTime() + 1.0pictureBtn.pop_add(decay, forKey: "size")
六. 自定义属性
POP默认支持的三种动画都继承自POPPropertyAnimation
, POPPropertyAnimation
中定义了一个叫property
的属性(之前没有用到它是因为POP根据不同的默认动画属性帮你生成了默认的property
这个属性则是用来驱动POP的动画效果中的重要一环
1. 实力模块
if let proper = POPAnimatableProperty.property(withName: "prop", initializer: { (prop) in guard let prop = prop else { return } //read prop.readBlock = { (obj, values) in } //write prop.writeBlock = {(obj, values) in } prop.threshold = 0.01}) as? POPAnimatableProperty { anim.property = proper}
2. 属性介绍
其组成就是一个readBlock一个writeBlock和一个threashold
-readBlock
告诉POP当前的属性值
-writeBlock
中修改变化后的属性值
-threashold
决定了动画变化间隔的阈值 值越大writeBlock
的调用次数越少
POPAnimatableProperty其实是POP中一个比较重要的东西 像上面提到的POP自带的动画属性 查看源代码可以看到也只是POP自动帮你设置好了POPAnimatableProperty而已 其作用就是当动画的某个时间片被触发时 告诉系统如何根据当前时间片做出变化
还是以一个实际的例子来说明如何使用自定义属性 比如我们要实现一个像系统的时钟APP里秒表计时的一个效果
3. 完整代码示例
if let proper = POPAnimatableProperty.property(withName: "prop", initializer: { (prop) in guard let prop = prop else { return } //read prop.readBlock = { (obj, values) in guard let array = values else { return } print(array[0]) } //write prop.writeBlock = {(obj, values) in guard let button = obj as? UIButton, let array = values else { return } let value = array[0] button.setTitle(String(format: "%02d:%02d:%02d", Int(value / 60), Int(value.truncatingRemainder(dividingBy: 60)), Int((value * 100).truncatingRemainder(dividingBy: 100))), for: .normal) } prop.threshold = 0.01}) as? POPAnimatableProperty { if let popBasic = POPBasicAnimation.linear() { //秒表用线性的时间函数初始化 popBasic.property = proper popBasic.fromValue = 0 //从0开始 popBasic.toValue = 18 //到18秒 popBasic.duration = 18 //持续18秒 popBasic.beginTime = CACurrentMediaTime() + 2 //延迟2秒开始 pictureBtn.pop_add(popBasic, forKey: "linear") }}
4. 注意:
- 在Swift4.0版本(4.0之前版本未知)中,初始化出来的对象都是可选类型
- POP官方的建议是添加
if
条件判断,详情可到GitHub上查看示例 - 正如上段代码所示: 闭包中涉及的可选类型都添加了
guard
判断
七. 类似微博中间发布按钮弹出动画
先看一下效果吧
动画分为两个部分
- 中间六个按钮依次执行动画弹出
- 上面标题图片最后动画落下
下面来看一下部分的核心代码
1. 六个按钮的弹出和消失动画
for i in 0..<titles.count { let button = BaseButton() button.setTitle(titles[i], for: .normal) button.setImage(UIImage(named: images[i]), for: .normal) button.addTarget(self, action: #selector(buttonClick(button:)), for: .touchUpInside) addSubview(button) //计算X/Y let row = i / maxCols let col = i % maxCols let buttonX = btnStsrtX + CGFloat(col) * (xMargin + buttonW) let buttonEndY = btnStartY + CGFloat(row) * buttonH let buttonStartY = buttonEndY - kScreenHeight //按钮动画 let popSpring = POPSpringAnimation(propertyNamed: kPOPViewFrame) popSpring?.fromValue = CGRect(x: buttonX, y: buttonStartY, width: buttonW, height: buttonH) popSpring?.toValue = CGRect(x: buttonX, y: buttonEndY, width: buttonW, height: buttonH) popSpring?.springBounciness = kSpringFactor popSpring?.springSpeed = kSpringFactor popSpring?.beginTime = CACurrentMediaTime() + kAnimationDelay * Double(i) button.pop_add(popSpring, forKey: "spring")}
2. 最上部分标语的弹出和消失
//z执行动画let imagePOP = POPSpringAnimation(propertyNamed: kPOPViewCenter)imagePOP?.fromValue = CGPoint(x: kScreenWidth * 0.5, y: 0.2 * kScreenHeight - kScreenHeight)imagePOP?.toValue = CGPoint(x: kScreenWidth * 0.5, y: 0.2 * kScreenHeight)imagePOP?.springSpeed = kSpringFactorimagePOP?.springBounciness = kSpringFactorimagePOP?.beginTime = CACurrentMediaTime() + Double(btnCount) * kAnimationDelayimagePOP?.completionBlock = { popAnim, finished in //所有动画执行完毕,回复View点击事件 kRootView?.isUserInteractionEnabled = true self.isUserInteractionEnabled = true}topImage.pop_add(imagePOP, forKey: nil)
以上是类似微博动画的部分核心代码, 具体代码详见GitHub项目, 喜欢请star
github项目介绍
- 折叠图片
- 音量震动条
- 活动指示器
- 微博动画
- 倒计时-计时器
- 类似QQ信息条数的粘性动画
- 类似雷达-水波纹动画
注: 项目持续更新中……
- iOS之POP动画使用和实战
- iOS pop动画的入门使用
- IOS 自定义push和pop动画
- ios push pop动画
- ios pop 折叠动画
- ios pop系统动画
- iOS动画POP
- iOS 动画实战之Lottie动画
- iOS:更改navigationController push和pop界面切换动画
- IOS 实现系统push和pop的动画
- iOS pushViewController 实现push 和pop 默认动画效果
- IOS 实现系统push和pop的动画
- IOS POP 时 无动画
- iOS Facebook pop动画进阶
- IOS 动画框架pop使用方法
- Swift基础之自定义PUSH和POP跳转动画
- iOS 自定义动画 push/pop动画
- swift开发之pop动画
- VS2008_no find file or document无法找到头文件的错误
- web.xml
- 一个三位数的各个数字之和
- BLE-NRF51822教程8-软件定时器的使用
- hihocoder 1305 区间求差
- iOS之POP动画使用和实战
- [SAP ABAP开发技术总结]OPEN SQL
- Java后端程序员面经(2-2. 缓存之分布式缓存)
- structs1.3+spring+hibernate+freemarker实现简单功能
- 快速排序-降序(python)
- 蟠桃记
- MQTT入门篇
- python list 返回索引的方法
- 几种获取当前时间的方法