iOS UIDynamicAnimator动画实现

2017-05-23  本文已影响0人  唯吾无忧

UIDynamicAnimator 是iOS7之后引入的一个动态库,用来模拟实现现实世界的物理模型,实现的动画有动感。主要模拟的物理行为有:UIGravityBehavior(重力),UIAttachmentBehavior(吸附),UISnapBehavior(震荡),UIPushBehavior(推动),UICollisionBehavior(碰撞),UIDynamicItemBehavior(配置一些公用的属性,与其他的Dynamic Behavior共同配合)。

本文主要介绍一个未完待续的小动画,结合UIGravityBehavior、UISnapBehavior、UICollisionBehavior实现。

一、初始化UI

- (void)initSubViews {- (void)initSubViews {

[self.view addSubview:self.weiImageView];

[self.view addSubview:self.wanImageView];

[self.view addSubview:self.daiImageView];

[self.view addSubview:self.xuImageView];

[self.view addSubview:self.longmaoImageView];

_weiImageView.cy_originY = -100;

_wanImageView.cy_originY = -100;

_daiImageView.cy_originY = -100;

_xuImageView.cy_originY = -100;

}

初始化ImageView的时候,设置ImageView的frame是你想设置的位置,这里又设置各个frame的origin.y为0是为了实现掉落效果。

二、实现动画

- (void)animation {

//实现龙猫的晃动动画,设置龙猫不间断晃动

CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];

animation.keyPath = @"transform.rotation";

animation.values = @[@(-20 / 180.0 * M_PI), @(10 / 180.0 * M_PI), @(-20 /180.0 * M_PI)];

animation.removedOnCompletion = NO;

animation.duration = 0.5;

animation.repeatCount = MAXFLOAT;

[self.longmaoImageView.layer addAnimation:animation forKey:nil];

//设置四个ImageView的吸附动画,由初始位置吸附到各个ImageView的center位置,每个ImageView 的路径不一样

UISnapBehavior *snap = [[UISnapBehavior alloc] initWithItem:_weiImageView snapToPoint:weiInitialPoint];

snap.damping = 1.0;

UISnapBehavior *snap1 = [[UISnapBehavior alloc] initWithItem:_wanImageView snapToPoint:wanInitialPoint];

snap1.damping = 1.0;

UISnapBehavior *snap2 = [[UISnapBehavior alloc] initWithItem:_daiImageView snapToPoint:daiInitialPoint];

snap2.damping = 1.0;

UISnapBehavior *snap3 = [[UISnapBehavior alloc] initWithItem:_xuImageView snapToPoint:xuInitialPoint];

snap3.damping = 1.0;

//重力效果,声明一个对象,可以循环加载

UIGravityBehavior *gravity = [[UIGravityBehavior alloc] init];

[gravity addItem:_weiImageView];

[gravity addItem:_wanImageView];

[gravity addItem:_daiImageView];

[gravity addItem:_xuImageView];

//弹性效果,这里设置碰撞类型collisionMode为碰撞所有

UICollisionBehavior *collision = [[UICollisionBehavior alloc] init];

collision.collisionMode = UICollisionBehaviorModeEverything;

[collision addItem:_weiImageView];

[collision addItem:_wanImageView];

[collision addItem:_daiImageView];

[collision addItem:_xuImageView];

//初始化 self.animator,self.animator的ReferenceView是所有子类View的父View,承载所有动画

//snap吸附动画的发生通过线程设置延时,展现出的效果有节奏

self.animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

[self.animator addBehavior:snap];

});

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.4 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

[self.animator addBehavior:snap1];

});

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.8 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

[self.animator addBehavior:snap2];

});

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

[self.animator addBehavior:snap3];

});

}

三、细节补充

关于UICollisionBehavior的collisionMode的三种效果,可以参考文章

http://www.jianshu.com/p/2ca3b16026a5

另外附上本文Demo地址,感兴趣的小伙伴可以参考一下,如有不合理的地方欢迎指正!

上一篇下一篇

猜你喜欢

热点阅读