POP介绍与使用实践(快速上手动画)
http://adad184.com/2015/03/11/intro-to-pop/
前言
动画在APP开发过程中 大家多多少少都会接触到 而且随着ios7的扁平化风格启用之后 越来越多的APP开始尝试加入各种绚丽的动画交互效果以增加APP的用户体验(当然 还是以国外的APP居多)
有过相关开发经验的同学肯定知道在iOS中 动画相关的部分都是基于Core Animation 但是今天我们不讨论Core Animation 今天的主角是POP -来自于Facebook的动画引擎(其实我不喜欢把POP定义为动画引擎 我愿意称它为函数发生器)
介绍
官方地址 https://github.com/facebook/pop
官方介绍(翻译版)
POP是一个在iOS与OS X上通用的极具扩展性的动画引擎 它在基本的静态动画的基础上增加的弹簧动画与衰减动画 使之能创造出更真实更具物理性的交互动画 POP的API可以快速的与现有的ObjC代码集成并可以作用于任意对象的任意属性
POP是个相当成熟且久经考验的框架 Facebook出品的令人惊叹的Paper应用中的所有动画和效果即出自POP
安装方式还是推荐使用CocoaPod
1 |
pod 'pop', '~> 1.0' |
POP的神奇之处在于 它是独立与Core Animation的存在 所以 忘记Core Animation吧 忘记Layer Tree吧 迎接一个简单的明天 (LOL 开玩笑的~:) 很多地方还是会需要Core Animation的 不过说不定哪天苹果大发善心 将动画相关的部分向POP借鉴一点也不是不可能的(比如SpriteKit就借鉴了Cocos2D :)
使用
POP默认支持三种动画 但同时也支持自定义动画
- POPBasicAnimation
- POPSpringAnimation
- POPDecayAnimation
- POPCustomAnimation //自定义动画
这里我们只讨论前三种(因为自定义动画我也没用过 :) 先来看看官方的示例代码吧
官方代码示例
1 |
//Basic animations can be used to interpolate values over a specified time period. To use an ease-in ease-out animation to animate a view's alpha from 0.0 to 1.0 over the default duration: |
POPBasicAnimation
POPBasicAnimation使用最广泛 提供固定时间间隔的动画(如淡入淡出效果)
代码示例1
1 |
POPBasicAnimation *anBasic = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPositionX]; |
其动画效果如下
POPBasicAnimation
可以看到 添加一个动画最少仅需三步
- 定义一个animation对象 并指定对应的动画属性
- 设置初始值和默认值(初始值可以不指定 会默认从当前值开始)
- 添加到想产生动画的对象上
POPBasicAnimation可配置的属性与默认值为
1 |
duration:0.4 //动画间隔 |
POPBasicAnimation提供四种timingfunction(很熟悉 对不对? 就是Core Animation中那些)
- kCAMediaTimingFunctionLinear
- kCAMediaTimingFunctionEaseIn
- kCAMediaTimingFunctionEaseOut
- kCAMediaTimingFunctionEaseInEaseOut
其时间函数分别如下
kCAMediaTimingFunctionLinear
kCAMediaTimingFunctionEaseIn
kCAMediaTimingFunctionEaseOut
kCAMediaTimingFunctionEaseInEaseOut
POPSpringAnimation
POPSpringAnimation也许是大多数人使用POP的理由 其提供一个类似弹簧一般的动画效果(使用后 APP立马就活泼起来了 有木有?!)
代码示例23
1 |
POPSpringAnimation *anSpring = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionX]; |
其动画效果如下
动画效果
POPSpringAnimation可配置的属性与默认值为
1 |
springBounciness:4.0 //[0-20] 弹力 越大则震动幅度越大 |
注意:POPSpringAnimation是没有duration字段的 其动画持续时间由以上几个参数决定
其时间函数如下
时间函数
POPDecayAnimation
POPDecayAnimation提供一个过阻尼效果(其实Spring是一种欠阻尼效果) 可以实现类似UIScrollView的滑动衰减效果(是的 你可以靠它来自己实现一个UIScrollView)
代码示例3
1 |
POPDecayAnimation *anDecay = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX]; |
其动画效果如下
动画效果
注意:这里对POPDecayAnimation设置toValue是没有意义的 会被忽略(因为目的状态是动态计算得到的)
POPDecayAnimation可配置的属性与默认值为
1 |
deceleration:0.998 //衰减系数(越小则衰减得越快) |
注意:POPDecayAnimation也是没有duration字段的 其动画持续时间由velocity与deceleration决定
其时间函数如下
时间函数
接下来我们看一下POP默认支持哪些属性的动画 打开POPAnimatablePropery.h可以看到如下定义(这些是到目前为止 所支持的属性 随着版本的更新 还在不断的新增中 :)
1 |
/** |
作为刚接触POP的一些同学来说 如果在上面看到你希望的某些属性的话 你可以像官方代码示例一样指定这个属性即可开始动画了
但是如果你想要的某些属性不在之上呢 这时候自定义属性POPAnimatableProperty就排上用场了
自定义属性
POP默认支持的三种动画都继承自POPPropertyAnimation POPPropertyAnimation中定义了一个叫property的属性( 之前没有用到它是因为POP根据不同的默认动画属性帮你生成了默认的property) 而这个property则是用来驱动POP的动画效果中的重要一环
代码示例4
1 |
POPAnimatableProperty *prop = [POPAnimatableProperty propertyWithName:@"prop" initializer:^(POPMutableAnimatableProperty *prop) { |
其组成就是一个readBlock一个writeBlock和一个threashold
- readBlock告诉POP当前的属性值
- writeBlock中修改变化后的属性值
- threashold决定了动画变化间隔的阈值 值越大writeBlock的调用次数越少
POPAnimatableProperty其实是POP中一个比较重要的东西 像上面提到的POP自带的动画属性 查看源代码可以看到也只是POP自动帮你设置好了POPAnimatableProperty而已 其作用就是当动画的某个时间片被触发时 告诉系统如何根据当前时间片做出变化
还是以一个实际的例子来说明如何使用自定义属性 比如我们要实现一个像系统的时钟APP里秒表计时的一个效果
1 |
POPAnimatableProperty *prop = [POPAnimatableProperty propertyWithName:@"countdown" initializer:^(POPMutableAnimatableProperty *prop) { prop.writeBlock = ^(id obj, const CGFloat values[]) { |
其动画效果如下
动画效果
有没有从中得到一些启发呢? POP可以做的事情可远比Core Animation要多(注意这里我们使用了beginTime这个属性来设置动画的延迟施放) 例如音乐播放时那种淡入淡出的效果等等也可以用POP来实现
小结
其实只需要熟练掌握POP自带的三种动画 即可完成大部分的动画效果 如果实在是无法满足你的需求的话 自定义动画也基本可以满足你的要求 可以说POP化繁为简的出现 极大的方便了我们这些苦逼的coder
当然 就像我说的 POP不仅仅是一个动画引擎 相信经过我最后一个例子 大家可以得到一点启事 POP能做的事情还不少 :)
POP介绍与使用实践(快速上手动画)的更多相关文章
- POP介绍与使用实践(快速上手动画)[转]
前言 动画在APP开发过程中 大家多多少少都会接触到 而且随着ios7的扁平化风格启用之后 越来越多的APP开始尝试加入各种绚丽的动画交互效果以增加APP的用户体验(当然 还是以国外的APP居多) 有 ...
- [转载]Masonry介绍与使用实践(快速上手Autolayout)
原博地址 http://adad184.com/2014/09/28/use-masonry-to-quick-solve-autolayout/ 前言 1 MagicNumber -> aut ...
- Masonry介绍与使用实践(快速上手Autolayout)
MagicNumber -> autoresizingMask -> autolayout 以上是纯手写代码所经历的关于页面布局的三个时期 在iphone1-iphone3gs时代 win ...
- 【转】Masonry介绍与使用实践(快速上手Autolayout)
原文网址:http://adad184.com/2014/09/28/use-masonry-to-quick-solve-autolayout/ 前言 1 MagicNumber -> aut ...
- Masonry介绍与使用实践 - iOS移动开发周报
本文转发至 http://www.tuicool.com/articles/MRbaEnB/ 原文 http://www.infoq.com/cn/news/2014/11/masonry-intr ...
- 几个小实践带你快速上手MindSpore
摘要:本文将带大家通过几个小实践快速上手MindSpore,其中包括MindSpore端边云统一格式及华为智慧终端背后的黑科技. MindSpore介绍 MindSpore是一种适用于端边云场景的新型 ...
- 官方 React 快速上手脚手架 create-react-app
此文简单讲解了官方 React 快速上手脚手架的安装与介绍. 1. React 快速上手脚手架 create-react-app 为了快速地进行构建使用 React 的项目,FaceBook 官方发布 ...
- 【学习总结】快速上手Linux玩转典型应用-第1章-课程介绍
课程目录链接 快速上手Linux玩转典型应用-目录 1. Linux有什么用 2. 课程安排 3. 课程收获 基本运维能力,等等 END
- 【转】Vue.js 2.0 快速上手精华梳理
Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...
随机推荐
- android 开发环境问题
一.console出现The connection to adb is down, and a severe error has occured. .先把eclipse关闭. .在管理器转到你的and ...
- Make the Most (Hackerrank Codeagon)
题目链接 Problem Statement Codenation is sending N of its employees to a High Profile Business Conferenc ...
- 基于Skyline与ArcGIS Server的二三维联动功能实现
基于Skyline与ArcGIS Server的二三维联动功能实现主要利用WEB技术.ArcGIS for JavaScript.Skyline 二次开发以及ArcGIS 10.1 桌面工具. 利用A ...
- PHP实现微信退款的分析与源码实现
原文:https://blog.csdn.net/jason19905/article/details/78628349 网上的很多PHP微信支付接入教程都颇为复杂,且需要配置和引入较多的文件,本人通 ...
- 在Bat批处理中调用Powershell脚本
##如何在BAT中调用powershell,把下面代码另存为bat格式pushd %~dp0powershell.exe -command ^ "& {set-executionp ...
- SPSS统计分析案例:无空白列重复正交试验设计方差分析
SPSS统计分析案例:无空白列重复正交试验设计方差分析 前面有讲过 SPSS正交试验设计及其方差分析 一篇文章,包含了一个典型的正交试验案例.然而在实际应用当中,主观客观条件复杂多变,在试验设计中就要 ...
- VC++1.5太伟大了
功能样样俱全,一点不比现在的VS系列差 VC++1.5全貌,虽然很古老,但是已经可以了. 新建的文档试图,多文档工程,很像样 文档试图,单文档工程,已经非常像样了,和记事本差不多了 这是资源编辑器,寒 ...
- 你真的会用Action的模型绑定吗?
在QQ群或者一些程序的交流平台,经常会有人问:我怎么传一个数组在Action中接收.我传的数组为什么Action的model中接收不到.或者我在ajax的data中设置了一些数组,为什么后台还是接收不 ...
- UI2Code智能生成Flutter代码--整体设计篇
摘要: UI2CODE项目是闲鱼技术团队研发的一款通过机器视觉理解+AI人工智能将UI视觉图片转化为端侧代码的工具. 背景: 随着移动互联网时代的到来,人类的科学技术突飞猛进.然而软件工程师们依旧需要 ...
- leetcode 563 - 653
563. Binary Tree Tilt Input: 1 / \ 2 3 Output: 1 Explanation: Tilt of node 2 : 0 Tilt of node 3 : 0 ...