点赞动效：缩放和抖动结合

先上示例图：

点赞动画.gif

直接上代码：

点赞动效

#define AngleRatation(angle) (angle / 180.0 * M_PI)
- (void)startAnimationPopOut {
    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
    
    CAKeyframeAnimation *scaleAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
    NSValue *scaleValue1 = [NSValue valueWithCATransform3D:CATransform3DMakeScale(2.0, 2.0, 0)];
    NSValue *scaleValue2 = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.5, 0.5, 0)];
    NSValue *scaleValue3 = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.2, 1.2, 0)];
    NSValue *scaleValue4 = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 0)];
    scaleAnimation.values = @[scaleValue1,scaleValue2,scaleValue3,scaleValue4];

    CAKeyframeAnimation *rotateAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
    NSValue *rotateValue1 = @(AngleRatation(20));
    NSValue *rotateValue2 = @(AngleRatation(-20));
    NSValue *rotateValue3 = @(AngleRatation(10));
    NSValue *rotateValue4 = @(AngleRatation(0));
    rotateAnimation.values = @[rotateValue1,rotateValue2,rotateValue3,rotateValue4];

    animationGroup.animations = @[scaleAnimation,rotateAnimation];
    animationGroup.duration = 0.8;
    animationGroup.removedOnCompletion = NO;
    animationGroup.fillMode = kCAFillModeForwards;
    animationGroup.repeatCount = 0;
    animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    [self.iconImageView.layer addAnimation:animationGroup forKey:@"animationGroup"];
}

取消点赞动效

- (void)startAnimationPopIn {
    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
    
    CAKeyframeAnimation *scaleAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
    NSValue *scaleValue1 = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.5, 0.5, 0)];
    NSValue *scaleValue2 = [NSValue valueWithCATransform3D:CATransform3DMakeScale(2.0, 2.0, 0)];
    NSValue *scaleValue3 = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.8, 0.8, 0)];
    NSValue *scaleValue4 = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 0)];
    scaleAnimation.values = @[scaleValue1,scaleValue2,scaleValue3,scaleValue4];
 
    CAKeyframeAnimation *rotateAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
    NSValue *rotateValue1 = @(AngleRatation(10));
    NSValue *rotateValue2 = @(AngleRatation(-20));
    NSValue *rotateValue3 = @(AngleRatation(20));
    NSValue *rotateValue4 = @(AngleRatation(0));
    rotateAnimation.values = @[rotateValue1,rotateValue2,rotateValue3,rotateValue4];
  
    animationGroup.animations = @[scaleAnimation,rotateAnimation];
    animationGroup.duration = 0.8;
    animationGroup.removedOnCompletion = NO;
    animationGroup.fillMode = kCAFillModeForwards;
    animationGroup.repeatCount = 0;
    animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    [self.iconImageView.layer addAnimation:animationGroup forKey:@"animationGroup"];
}

微博的点赞效果很是给力，最近有需求让实现那种效果，最终做了这种简化后的效果

动画拆分：

1.scale动画

2.rotation动画

最终用动画组组合起来即可