动画

coreAnimation

基本动画

 //1. 中心点平移动画
    CABasicAnimation *animation = [CABasicAnimation animation];
    animation.keyPath = @"position.x";
    animation.fromValue = @50;
    animation.toValue = @(375-50);
    animation.duration = 1.0;
    //动画结束视图停留在终点位置
    animation.fillMode = kCAFillModeForwards;
    animation.removedOnCompletion = NO;
    [layer addAnimation:animation forKey:@"basic"];
    
  //2. 两个视图做动画
    CABasicAnimation *animation = [CABasicAnimation animation];
    animation.keyPath = @"position.x";
    animation.byValue = @200;
    animation.duration = 2.0;
    animation.fillMode = kCAFillModeForwards;
    animation.removedOnCompletion = NO;
    [layer addAnimation:animation forKey:@"basic"];

    animation.beginTime = CACurrentMediaTime() + 1.0;
    [layer1 addAnimation:animation forKey:@"basic"];
    
    //两个点之间做动画
     CABasicAnimation *animation = [CABasicAnimation animation];
    animation.keyPath = @"position";
    animation.fromValue = @(CGPointMake(150, 150));
    animation.toValue = @(CGPointMake(180, 200));
    animation.duration = 1.0;
    //动画结束视图停留在终点位置
    animation.fillMode = kCAFillModeForwards;
    animation.removedOnCompletion = NO;
    [viewTemp.layer addAnimation:animation forKey:@"basic"];

2. 非匀速动画

//非匀速运动
    CABasicAnimation *baseAnimation = [CABasicAnimation animation];
    baseAnimation.keyPath = @"position.x";
    baseAnimation.fromValue = @[@150];
    baseAnimation.toValue = @[@350];
    baseAnimation.duration = 1.0;
    baseAnimation.fillMode = kCAFillModeForwards;
    baseAnimation.removedOnCompletion = NO;
    //baseAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    baseAnimation.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0.5 :0 :0.9 :0.7];
    
    [viewTemp.layer addAnimation:baseAnimation forKey:@"basic"];

3. 旋转动画

//旋转动画
    CABasicAnimation *baseAnimation = [CABasicAnimation animation];
    baseAnimation.keyPath = @"transform.rotation.z";
    baseAnimation.toValue = [NSNumber numberWithFloat: M_PI*2.0];
    baseAnimation.duration = 4.0;
    baseAnimation.repeatCount = ULLONG_MAX;
    
    [viewTemp.layer addAnimation:baseAnimation forKey:@"rotationAnimation"];

关键帧动画

    //使视图摇动动画
    CAKeyframeAnimation *keyframeAnimation = [CAKeyframeAnimation animation];
    keyframeAnimation.keyPath = @"position.x";
    keyframeAnimation.values = @[@0,@10,@-10,@10,@0];
    keyframeAnimation.keyTimes = @[@0,@(1/6.0),@(3/6.0),@(5/6.0),@(1)];
    keyframeAnimation.duration = 0.4;
    keyframeAnimation.additive = YES;
    [layer addAnimation:keyframeAnimation forKey:@"shake"];
    
    //使视图按照折线运动
    CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation];
    keyFrameAnimation.keyPath = @"position";
    keyFrameAnimation.values = @[@(CGPointMake(100, 100)),@(CGPointMake(130, 80)),@(CGPointMake(150, 50))];
    keyFrameAnimation.keyTimes = @[@(0),@(1/3.0),@(1.0)];
    keyFrameAnimation.duration = 3.0;
    keyFrameAnimation.fillMode = kCAFillModeForwards;
    keyFrameAnimation.removedOnCompletion = NO;
    
    [viewTemp.layer addAnimation:keyFrameAnimation forKey:@"basic"];

总结

1. 两种状态间做动画应该用CABaseAnimation
2. 多种状态间做动画应该用CAKeyFrameAnimation

springAnimation

-(void)springAnimation{
    CASpringAnimation *springAnimation = [CASpringAnimation animationWithKeyPath:@"position"];
    springAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 300)];
    springAnimation.duration = springAnimation.settlingDuration;
    springAnimation.initialVelocity = 10;
    springAnimation.damping = 7;
    [self.viewTemp.layer addAnimation:springAnimation forKey:@"springAnimation"];
}

转场动画

 CATransition *transition = [CATransition animation];
    transition.type = @"moveIn";
    transition.subtype = kCATransitionFromLeft;
    transition.duration = 1.0;
    [self.navigationController.view.layer addAnimation:transition forKey:@"transition"];
    
    [self.navigationController pushViewController:[ViewControllerTwo new] animated:YES];

动画组

- (void)viewDidLoad {
    [super viewDidLoad];
   
    UIView *viewTemp = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
    viewTemp.backgroundColor = [UIColor redColor];
    [self.view addSubview:viewTemp];
    
    CABasicAnimation *basicAnimation1 = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    basicAnimation1.toValue = [NSNumber numberWithFloat: M_PI*2];
    basicAnimation1.duration = 1.0;
    basicAnimation1.repeatCount = LONG_MAX;
    
    CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
    basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 500)];
    basicAnimation.duration = 2.0;
    basicAnimation.repeatCount = 1;
    basicAnimation.fillMode = kCAFillModeForwards;
    basicAnimation.removedOnCompletion = NO;
    
    CAAnimationGroup *animationGrop = [CAAnimationGroup animation];
    animationGrop.animations = @[basicAnimation,basicAnimation1];
    animationGrop.duration = 3.0;
    animationGrop.autoreverses = YES;
    animationGrop.repeatCount = LONG_MAX;
    
    [viewTemp.layer addAnimation:animationGrop forKey:@"animationGroup"];
    
}

UIKit中的力学动画

重力

    animator = [[UIDynamicAnimator alloc] initWithReferenceView:viewTemp];
    [animator removeAllBehaviors];
 
    UIGravityBehavior *gravityBehavior = [[UIGravityBehavior alloc] initWithItems:@[viewTemp]];
    [gravityBehavior setAngle:0 magnitude:9.8];
    
    [animator addBehavior:gravityBehavior];

注意：UIDynamicAnimator对象不能用局部变量形式，ARC下会被释放，导致没有动画。

碰撞与弹力

- (void)testGravityCollision{
    [self.animator removeAllBehaviors];
    
    //重力
    UIGravityBehavior *gravityBehavior = [[UIGravityBehavior alloc] initWithItems:@[self.viewTemp]];
    [gravityBehavior setAngle:M_PI_4 magnitude:0.5];
    [self.animator addBehavior:gravityBehavior];
    
    //碰撞
    UICollisionBehavior *collistionBehavior = [[UICollisionBehavior alloc] initWithItems:@[self.viewTemp]];
    collistionBehavior.translatesReferenceBoundsIntoBoundary = YES;
    [self.animator addBehavior:collistionBehavior];
    
    //弹力
    UIDynamicItemBehavior *itemBehavior = [[UIDynamicItemBehavior alloc] initWithItems:@[self.viewTemp]];
    itemBehavior.elasticity = 0.7;
    [self.animator addBehavior:itemBehavior];
}

吸附力

1. 元素与锚点吸附

- (void)testAttached{
    //重力
    UIGravityBehavior *gravityBehavior = [[UIGravityBehavior alloc] initWithItems:@[self.viewTemp]];
    [gravityBehavior setAngle:M_PI_2 magnitude:0.5];
    [self.animator addBehavior:gravityBehavior];
    
    //吸附力(要撞到锚点，但是要侧撞)
    UIAttachmentBehavior *attachmentBehavior = [[UIAttachmentBehavior alloc] initWithItem:self.viewTemp offsetFromCenter:UIOffsetMake(50, 0) attachedToAnchor:CGPointMake(270, 330)];
    attachmentBehavior.length = 70;//两点之间作用力长度（刚性吸附,类似杠杆）
    - (void)testAttached{
    //重力
    UIGravityBehavior *gravityBehavior = [[UIGravityBehavior alloc] initWithItems:@[self.viewTemp]];
    [gravityBehavior setAngle:M_PI_2 magnitude:0.5];
    [self.animator addBehavior:gravityBehavior];
    
    //吸附力(要撞到锚点，但是要侧撞)
    UIAttachmentBehavior *attachmentBehavior = [[UIAttachmentBehavior alloc] initWithItem:self.viewTemp offsetFromCenter:UIOffsetMake(50, 0) attachedToAnchor:CGPointMake(270, 330)];
    attachmentBehavior.length = 170;//两点之间作用力长度（刚性吸附,类似杠杆）
    attachmentBehavior.frequency = 10000;//震动频率（弹性吸附，类似橡皮筋）
    [self.animator addBehavior:attachmentBehavior];
}
    [self.animator addBehavior:attachmentBehavior];
}

2. 元素与元素吸附

- (void)testAttached{
    [self.animator removeAllBehaviors];
    
    //viewTemp1
    self.viewTemp1 = [[UIView alloc] initWithFrame:CGRectMake(270, 270, 100, 100)];
    self.viewTemp1.backgroundColor = [UIColor redColor];
    [self.view addSubview:self.viewTemp1];
    
    //重力
    UIGravityBehavior *gravityBehavior = [[UIGravityBehavior alloc] initWithItems:@[self.viewTemp]];
    [gravityBehavior setAngle:M_PI_2 magnitude:0.5];
    [self.animator addBehavior:gravityBehavior];
    
    //吸附力(要撞到锚点，但是要侧撞)
    UIAttachmentBehavior *attachmentBehavior = [[UIAttachmentBehavior alloc] initWithItem:self.viewTemp offsetFromCenter:UIOffsetMake(50, 0) attachedToItem:self.viewTemp1 offsetFromCenter:UIOffsetMake(-50, 0)];
    attachmentBehavior.length = 70;//两点之间作用力长度（刚性吸附,类似杠杆）
    [self.animator addBehavior:attachmentBehavior];
}

吸附力总结：

1. view与锚点间的吸附，是否要进行偏移。是否要进行刚性吸附还是弹性吸附
2. view与view间的吸附，是否要进行偏移。是否要进行刚性吸附还是弹性吸附

推力

- (void)testPush{
    //推力
    UIPushBehavior *pushBehavior = [[UIPushBehavior alloc] initWithItems:@[self.viewTemp] mode:UIPushBehaviorModeInstantaneous];
    [pushBehavior setTargetOffsetFromCenter:UIOffsetMake(-25, 0) forItem:self.viewTemp];
    [pushBehavior setAngle:M_PI_4];
    [pushBehavior setMagnitude:5.0];
    [self.animator addBehavior:pushBehavior];
    
    //碰撞力
    UICollisionBehavior *collisionBehavior = [[UICollisionBehavior alloc] initWithItems:@[self.viewTemp]];
    collisionBehavior.translatesReferenceBoundsIntoBoundary = YES;
    [self.animator addBehavior:collisionBehavior];
}

推力总结

1. 是持续推力还是瞬间推力
2. 是否中心点要偏移
3. 推力的方向以及大小

捕获

UISnapBehavior *snapBehavior = [[UISnapBehavior alloc] initWithItem:self.viewTemp snapToPoint:CGPointMake(300, 300)];
snapBehavior.damping = 0.0;
[self.animator addBehavior:snapBehavior];