iOS可以通过CADisplayLink实现自定义动画引擎,pop就是基于此实现的,而且比原生Core Animation更强大好用。譬如当ViewController侧滑返回的时候,系统会将Core Animation的动画会停止,而基于CADisplayLink实现的动画则不会停止,因而可以实现类似网易云音乐从播放页侧滑时hold住专辑封面图旋转的效果。

八一八魔性的pop

1、实用的宏

#define POP_ARRAY_COUNT(x) sizeof(x) / sizeof(x[0])

#define FB_PROPERTY_GET(stype, property, ctype) \

- (ctype)property { \

return ((stype *)_state)->property; \

}

#define FB_PROPERTY_SET(stype, property, mutator, ctype, ...) \

- (void)mutator (ctype)value { \

if (value == ((stype *)_state)->property) \

return; \

((stype *)_state)->property = value; \

__VA_ARGS__ \

}

#define FB_PROPERTY_SET_OBJ_COPY(stype, property, mutator, ctype, ...) \

- (void)mutator (ctype)value { \

if (value == ((stype *)_state)->property) \

return; \

((stype *)_state)->property = [value copy]; \

__VA_ARGS__ \

}

2、判定值的数据类型

pop定义了支持的值的数据类型

const POPValueType kPOPAnimatableSupportTypes[10] = {kPOPValueInteger, kPOPValueFloat, kPOPValuePoint, kPOPValueSize, kPOPValueRect, kPOPValueEdgeInsets, kPOPValueColor, kPOPValueSCNVector3, kPOPValueSCNVector4};

通过@encode指令,将给定类型编码的内部字符串与objcType对比,得到值的数据类型

static bool FBCompareTypeEncoding(const char *objctype, POPValueType type)

{

switch (type)

{

case kPOPValueFloat:

return (strcmp(objctype, @encode(float)) == 0

|| strcmp(objctype, @encode(double)) == 0

);

case kPOPValuePoint:

return (strcmp(objctype, @encode(CGPoint)) == 0

#if !TARGET_OS_IPHONE

|| strcmp(objctype, @encode(NSPoint)) == 0

#endif

);

case kPOPValueSize:

return (strcmp(objctype, @encode(CGSize)) == 0

#if !TARGET_OS_IPHONE

|| strcmp(objctype, @encode(NSSize)) == 0

#endif

);

case kPOPValueRect:

return (strcmp(objctype, @encode(CGRect)) == 0

#if !TARGET_OS_IPHONE

|| strcmp(objctype, @encode(NSRect)) == 0

#endif

);

case kPOPValueEdgeInsets:

#if TARGET_OS_IPHONE

return strcmp(objctype, @encode(UIEdgeInsets)) == 0;

#else

return false;

#endif

case kPOPValueAffineTransform:

return strcmp(objctype, @encode(CGAffineTransform)) == 0;

case kPOPValueTransform:

return strcmp(objctype, @encode(CATransform3D)) == 0;

case kPOPValueRange:

return strcmp(objctype, @encode(CFRange)) == 0

|| strcmp(objctype, @encode (NSRange)) == 0;

case kPOPValueInteger:

return (strcmp(objctype, @encode(int)) == 0

|| strcmp(objctype, @encode(unsigned int)) == 0

|| strcmp(objctype, @encode(short)) == 0

|| strcmp(objctype, @encode(unsigned short)) == 0

|| strcmp(objctype, @encode(long)) == 0

|| strcmp(objctype, @encode(unsigned long)) == 0

|| strcmp(objctype, @encode(long long)) == 0

|| strcmp(objctype, @encode(unsigned long long)) == 0

);

case kPOPValueSCNVector3:

#if SCENEKIT_SDK_AVAILABLE

return strcmp(objctype, @encode(SCNVector3)) == 0;

#else

return false;

#endif

case kPOPValueSCNVector4:

#if SCENEKIT_SDK_AVAILABLE

return strcmp(objctype, @encode(SCNVector4)) == 0;

#else

return false;

#endif

default:

return false;

}

}

3、将值的数据类型标准化为Vector

举个CGRect类型的例子:

case kPOPValueRect:

vec = Vector::new_cg_rect([value CGRectValue]);

Vector *Vector::new_cg_rect(const CGRect &r)

{

Vector *v = new Vector(4);

v->_values[0] = r.origin.x;

v->_values[1] = r.origin.y;

v->_values[2] = r.size.width;

v->_values[3] = r.size.height;

return v;

}

通过Vector的两个参数size_t _count;、CGFloat *_values;将给定的类型抽象出来,实现解耦。此外还有一个好处,当创建属性动画为kPOPLayerBounds,但toValue属性赋值的是一个NSNumber,得益于_values是数组指针,并不会引发数组越界导致的crash,只是动画效果不可预期。

4、基于NSRunLoop的动画更新机制

- (void)_scheduleProcessPendingList

{

// see WebKit for magic numbers, eg http://trac.webkit.org/changeset/166540

static const CFIndex CATransactionCommitRunLoopOrder = 2000000;

static const CFIndex POPAnimationApplyRunLoopOrder = CATransactionCommitRunLoopOrder - 1;

// lock

OSSpinLockLock(&_lock);

if (!_pendingListObserver) {

__weak POPAnimator *weakSelf = self;

_pendingListObserver = CFRunLoopObserverCreateWithHandler(kCFAllocatorDefault, kCFRunLoopBeforeWaiting | kCFRunLoopExit, false, POPAnimationApplyRunLoopOrder, ^(CFRunLoopObserverRef observer, CFRunLoopActivity activity) {

[weakSelf _processPendingList];

});

if (_pendingListObserver) {

CFRunLoopAddObserver(CFRunLoopGetMain(), _pendingListObserver,  kCFRunLoopCommonModes);

}

}

// unlock

OSSpinLockUnlock(&_lock);

}

在主线程RunLoop中添加观察者,监听了kCFAllocatorDefault、kCFRunLoopBeforeWaiting、kCFRunLoopExit事件,在收到回调的时候,处理_pendingList里的动画。

5、更新动画的回调数组

static POPStaticAnimatablePropertyState _staticStates[] =

{

/* CALayer */

{kPOPLayerBackgroundColor,

^(CALayer *obj, CGFloat values[]) {

POPCGColorGetRGBAComponents(obj.backgroundColor, values);

},

^(CALayer *obj, const CGFloat values[]) {

CGColorRef color = POPCGColorRGBACreate(values);

[obj setBackgroundColor:color];

CGColorRelease(color);

},

kPOPThresholdColor

},

{kPOPLayerBounds,

^(CALayer *obj, CGFloat values[]) {

values_from_rect(values, [obj bounds]);

},

^(CALayer *obj, const CGFloat values[]) {

[obj setBounds:values_to_rect(values)];

},

kPOPThresholdPoint

},

...

封装不同的动画行为,实现类似模板模式,只需统一调用,即可更新动画

// write value

write(obj, currentVec->data());

6、动画插值的动态实现

switch (type) {

case kPOPAnimationSpring:

advanced = advance(time, dt, obj);

break;

case kPOPAnimationDecay:

advanced = advance(time, dt, obj);

break;

case kPOPAnimationBasic: {

advanced = advance(time, dt, obj);

computedProgress = true;

break;

}

case kPOPAnimationCustom: {

customFinished = [self _advance:obj currentTime:time elapsedTime:dt] ? false : true;

advanced = true;

break;

}

default:

break;

}

可以看出总共有四种动画插值的算法,以kPOPAnimationBasic为例:

bool advance(CFTimeInterval time, CFTimeInterval dt, id obj) {

// default timing function

if (!timingFunction) {

((POPBasicAnimation *)self).timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];

}

// solve for normalized time, aka progresss [0, 1]

CGFloat p = 1.0f;

if (duration > 0.0f) {

// cap local time to duration

CFTimeInterval t = MIN(time - startTime, duration) / duration;

p = POPTimingFunctionSolve(timingControlPoints, t, SOLVE_EPS(duration));

timeProgress = t;

} else {

timeProgress = 1.;

}

// interpolate and advance

interpolate(valueType, valueCount, fromVec->data(), toVec->data(), currentVec->data(), p);

progress = p;

clampCurrentValue();

return true;

}

依照给定的timingFunction,使用POPTimingFunctionSolve计算贝塞尔曲线的变化率,再通过混合计算#define MIX(a, b, f) ((a) + (f) * ((b) - (a))),最终得到动画的插值。

小结

pop中还有很多有意思的地方,譬如TransformationMatrix里的矩阵操作,这里就暂且不挖WebCore底层了。简而言之,无论性能(c++混编)、易用、容错,pop都有着作为引擎该有的特性,而它所暴露的和Core Animation相似的接口也让人极易上手!

聊聊动画引擎 pop的更多相关文章

  1. POP动画引擎中Layer与CALayer的一点区别

    POP动画引擎是facebook提供的一个开源框架, 可以实现很多的动画效果, 这里就不一一介绍啦, 有兴趣的童鞋请移步: https://github.com/facebook/pop 下面简单的讲 ...

  2. iOS动画——弹窗动画(pop动画)

    用pop动画简单实现弹窗的缩放和渐变,感觉这个动画常用,就写一下博客 pop动画是Facebook推出的动画引擎,请自行到GitHub上搜索下载拖拽导入xcode项目中. 更多pop动画使用和原理可网 ...

  3. SpriteSheet精灵动画引擎

    SpriteSheet精灵动画引擎   本文介绍Flash中SpriteSheet精灵序列图与其它渲染方式的性能对比.SpriteSheet的原理及注意实现,最后实现了一个精灵序列图的渲染引擎.本文的 ...

  4. 第四十二课:基于CSS的动画引擎

    由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...

  5. [译]理解 Windows UI 动画引擎

    本文译自 Nick Waggoner 的 "Understand what’s possible with the Windows UI Animation Engine",已获原 ...

  6. 基于canvas与原生JS的H5动画引擎

    前一段时间项目组里有一些H5动画的需求,由于没有专业的前端人员,便交由我这个做后台的研究相关的H5动画技术. 通过初步调研,H5动画的实现大概有以下几种方式: 1.基于css实现 这种方式比较简单易学 ...

  7. Xcode7.3.1中通过最新的CocoaPod安装pop动画引擎

    CocoaPod是一个用ruby实现,用于方便的管理Xcode中第三方插件的管理器.用它我们可以很方便的安装和升级插件而不用担心破坏原有的项目. 而pop是一个用于实现App中动画的引擎,它是由Fac ...

  8. 用POP动画引擎实现弹簧动画(POPSpringAnimation)

    效果图: #import "ViewController.h" #import <POP.h> @interface ViewController () @proper ...

  9. 用POP动画引擎实现衰减动画(POPDecayAnimation)

    效果图: #import "ViewController.h" #import <POP.h> @interface ViewController () @end @i ...

随机推荐

  1. leetcode面试准备: Game of Life

    leetcode面试准备: Game of Life 1 题目 According to the Wikipedia's article: "The Game of Life, also k ...

  2. poi大数据导入解决方法

    This one comes up quite a lot, but often the reason isn't what you might initially think. So, the fi ...

  3. SCOI2005互不侵犯King

    1087: [SCOI2005]互不侵犯King Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1499  Solved: 872[Submit][S ...

  4. NOI2008假面舞会

    1064: [Noi2008]假面舞会 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 883  Solved: 462[Submit][Status] ...

  5. 【转】我的WIN7分辨率是1920*1080,调低后字体模糊

    原文网址:http://tieba.baidu.com/p/778306758 WIN7还有一个“使用XP风格DPI缩放”的选项,如果选中则只放大文字,不选会连对话框和文字全部放大 这么多层楼,只有这 ...

  6. HTTP2.0那些事

    1. HTTP2.0的前世 http2.0的前世是http1.0和http1.1这两兄弟.虽然之前仅仅只有两个版本,但这两个版本所包含的协议规范之庞大,足以让任何一个有经验的工程师为之头疼.http1 ...

  7. .net HTMLParser详细使用说明 强大的Filter类 解析HTML文档如此简单

    背景: HTMLParser原本是一个在sourceforge上的一个Java开源项目,使用这个Java类库可以用来线性地或嵌套地解析HTML文本.他的 功能强大和开源等特性吸引了大量Web信息提取的 ...

  8. C#实现Zip压缩解压实例【转】

    本文只列举一个压缩帮助类,使用的是有要添加一个dll引用ICSharpCode.SharpZipLib.dll[下载地址]. 另外说明一下的是,这个类压缩格式是ZIP的,所以文件的后缀写成 .zip. ...

  9. web测试用例表(自用)

    自己留着用,第一次搞这么个东西.虽然简单却很实用. 模块名               备注 开发人员   版本号             用例作者   设计时间             测试类型 功 ...

  10. Spark的几种运行模式

    1.local单机模式,结果xshell可见:./bin/spark-submit --class org.apache.spark.examples.SparkPi --master local[1 ...