美文网首页
iOS UIDynamicAnimator动画实现

iOS UIDynamicAnimator动画实现

作者: 唯吾无忧 | 来源:发表于2017-05-23 16:37 被阅读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地址,感兴趣的小伙伴可以参考一下,如有不合理的地方欢迎指正!

    相关文章

      网友评论

          本文标题:iOS UIDynamicAnimator动画实现

          本文链接:https://www.haomeiwen.com/subject/rhvwxxtx.html