UI基础--自定义UISwitch

建一个动画管理类

.h

#import <UIKit/UIKit.h>
#import <Foundation/Foundation.h>


@interface LLAnimationManager : NSObject


/**
 *  init
 */
- (instancetype)initWithAnimationDuration:(CGFloat)animationDuration;


/**
 * the face layer move position
 */
- (CABasicAnimation *)moveAnimationWithFromPosition:(CGPoint)fromPosition toPosition:(CGPoint)toPosition;

/**
 * the layer background color animation
 */
- (CABasicAnimation *)backgroundColorAnimationFromValue:(NSValue *)fromValue toValue:(NSValue *)toValue;

/**
 * the eye layer move position
 */
- (CABasicAnimation *)eyeMoveAnimationFromValue:(NSValue *)fromValue toValue:(NSValue *)toValue;

/**
 * mouth key frame animation
 */
- (CAKeyframeAnimation *)mouthKeyFrameAnimationWidthOffSet:(CGFloat)offSet on:(BOOL)on;

/**
 *  eyes close and open key frame animation
 */
- (CAKeyframeAnimation *)eyesCloseAndOpenAnimationWithRect:(CGRect)rect;


@end

.m

#import "LLAnimationManager.h"
#import <QuartzCore/QuartzCore.h> 

@interface LLAnimationManager()

/**
 *  the duration is the face moving time not include spring animation
 */
@property (nonatomic, assign) CGFloat animationDuration;

@end



@implementation LLAnimationManager


/**
 *  init
 */
- (instancetype)initWithAnimationDuration:(CGFloat)animationDuration {
    self = [super init];
    if (self) {
        _animationDuration = animationDuration;
    }
    return self;
}

/**
 *  faceLayer move animation
 */
- (CABasicAnimation *)moveAnimationWithFromPosition:(CGPoint)fromPosition toPosition:(CGPoint)toPosition {
    CABasicAnimation *moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
    moveAnimation.fromValue = [NSValue valueWithCGPoint:fromPosition];
    moveAnimation.toValue = [NSValue valueWithCGPoint:toPosition];
    moveAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    moveAnimation.duration = _animationDuration * 2 /3;
    moveAnimation.removedOnCompletion = NO;
    moveAnimation.fillMode = kCAFillModeForwards;
    return moveAnimation;
}

/**
 *  layer background color animation
 */
- (CABasicAnimation *)backgroundColorAnimationFromValue:(NSValue *)fromValue toValue:(NSValue *)toValue {
    CABasicAnimation *colorAnimation = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
    colorAnimation.fromValue = fromValue;
    colorAnimation.toValue = toValue;
    colorAnimation.duration = _animationDuration * 2 /3;
    colorAnimation.removedOnCompletion = NO;
    colorAnimation.fillMode = kCAFillModeForwards;
    return colorAnimation;

}

/**
 * the eyes layer move
 */
- (CABasicAnimation *)eyeMoveAnimationFromValue:(NSValue *)fromValue toValue:(NSValue *)toValue{
    CABasicAnimation *moveAnimation = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
    moveAnimation.fromValue = fromValue;
    moveAnimation.toValue = toValue;
    moveAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    moveAnimation.duration = _animationDuration / 3;
    moveAnimation.removedOnCompletion = NO;
    moveAnimation.fillMode = kCAFillModeForwards;
    return moveAnimation;
}


/**
 * mouth key frame animation
 */
- (CAKeyframeAnimation *)mouthKeyFrameAnimationWidthOffSet:(CGFloat)offSet on:(BOOL)on{
    CGFloat frameNumber = _animationDuration * 60 / 3;
    CGFloat frameValue = on ? offSet : 0;
    NSMutableArray *arrayFrame = [NSMutableArray array];
    for (int i = 0; i < frameNumber; i++) {
        if (on) {
            frameValue = frameValue - offSet / frameNumber;
        } else {
            frameValue = frameValue + offSet / frameNumber;
        }
        [arrayFrame addObject:@(frameValue)];
    }
    CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"mouthOffSet"];
    keyAnimation.values = arrayFrame;
    keyAnimation.duration = _animationDuration / 4;
    if (!on && _animationDuration >= 1.f) {
        keyAnimation.beginTime = CACurrentMediaTime() + _animationDuration / 12;
    }
    keyAnimation.removedOnCompletion = NO;
    keyAnimation.fillMode = kCAFillModeForwards;
    return keyAnimation;
}

/**
 *  eyes close and open key frame animation
 */
- (CAKeyframeAnimation *)eyesCloseAndOpenAnimationWithRect:(CGRect)rect {
    CGFloat frameNumber = _animationDuration * 180 / 9;         // 180 frame erver second
    CGFloat eyesX = rect.origin.x;
    CGFloat eyesY = rect.origin.y;
    CGFloat eyesWidth = rect.size.width;
    CGFloat eyesHeight = rect.size.height;
    NSMutableArray *arrayFrame = [NSMutableArray array];
    for (int i = 0; i < frameNumber; i++) {
        if (i < frameNumber / 3) {
            // close
            eyesHeight = eyesHeight - rect.size.height / (frameNumber / 3);
        } else if (i >= frameNumber / 3 && i < frameNumber * 2 / 3) {
            // zero
            eyesHeight = 0;
        } else {
            // open
            eyesHeight = eyesHeight + rect.size.height / (frameNumber / 3);
        }
        eyesY = (rect.size.height - eyesHeight) / 2;
        [arrayFrame addObject:[NSValue valueWithCGRect:CGRectMake(eyesX, eyesY, eyesWidth, eyesHeight)]];
    }
    CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"eyeRect"];
    keyAnimation.values = arrayFrame;
    keyAnimation.duration = _animationDuration / 3;
    keyAnimation.removedOnCompletion = NO;
    keyAnimation.fillMode = kCAFillModeForwards;
    return keyAnimation;
}

@end

创建一个类:继承CALayer

.h

#import <QuartzCore/QuartzCore.h>
#import <UIKit/UIKit.h>

@interface LLEyesLayer : CALayer

/**
 *  eye property
 */
@property (nonatomic, assign) CGRect eyeRect;

@property (nonatomic, assign) CGFloat eyeDistance;

@property (nonatomic, strong) UIColor *eyeColor;

@property (nonatomic, assign) BOOL isLiking;

@property (nonatomic, assign) CGFloat mouthOffSet;

@property (nonatomic, assign) CGFloat mouthY;

@end

.m

#import "LLEyesLayer.h"

@implementation LLEyesLayer

/**
 *  init layer
 *
 *  @return self
 */
- (instancetype)init {
    if (self = [super init]) {
        // 默认属性
        _eyeRect = CGRectMake(0, 0, 0, 0);
        _mouthOffSet = 0.f;
    }
    return self;
}

- (instancetype)initWithLayer:(LLEyesLayer *)layer {
    self = [super initWithLayer:layer];
    if (self) {
        self.eyeRect = layer.eyeRect;
        self.eyeDistance = layer.eyeDistance;
        self.eyeColor = layer.eyeColor;
        self.isLiking = layer.isLiking;
        self.mouthOffSet = layer.mouthOffSet;
        self.mouthY = layer.mouthY;
    }
    return self;
}

/**
 *  draw
 */
- (void)drawInContext:(CGContextRef)ctx {
    UIBezierPath *bezierLeft = [UIBezierPath bezierPathWithOvalInRect:_eyeRect];
    UIBezierPath *bezierRight = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(_eyeDistance, _eyeRect.origin.y, _eyeRect.size.width, _eyeRect.size.height)];
    
    
    UIBezierPath *bezierMouth = [UIBezierPath bezierPath];
    CGFloat mouthWidth = _eyeRect.size.width + _eyeDistance;
    if (_isLiking) {
        // funny mouth
        [bezierMouth moveToPoint:CGPointMake(0, _mouthY)];
        [bezierMouth addCurveToPoint:CGPointMake(mouthWidth, _mouthY) controlPoint1:CGPointMake(mouthWidth - _mouthOffSet * 3 / 4, _mouthY + _mouthOffSet / 2) controlPoint2:CGPointMake(mouthWidth - _mouthOffSet / 4, _mouthY + _mouthOffSet / 2)];
    } else {
        // boring mouth
        bezierMouth = [UIBezierPath bezierPathWithRect:CGRectMake(0, _mouthY, mouthWidth, _eyeRect.size.height / 4)];
    }

    [bezierMouth closePath];
    CGContextAddPath(ctx, bezierLeft.CGPath);
    CGContextAddPath(ctx, bezierRight.CGPath);
    CGContextAddPath(ctx, bezierMouth.CGPath);
    CGContextSetFillColorWithColor(ctx, _eyeColor.CGColor);
    CGContextSetStrokeColorWithColor(ctx, [UIColor redColor].CGColor);
    CGContextFillPath(ctx);
}


/**
 * key animation
 */
+(BOOL)needsDisplayForKey:(NSString *)key{
    if ([key isEqual:@"mouthOffSet"]) {
        return YES;
    }
    if ([key isEqual:@"eyeRect"]) {
        return YES;
    }
    return [super needsDisplayForKey:key];
}

@end

创建一个开关,继承:UIView

.h

#import <UIKit/UIKit.h>

@protocol LLSwitchDelegate;

IB_DESIGNABLE @interface LLSwitch : UIView


/**
 *  switch on color
 */
@property (nonatomic, strong) IBInspectable UIColor *onColor;

/**
 *  switch off color
 */
@property (nonatomic, strong) IBInspectable UIColor *offColor;

/**
 *  face on and off color
 */
@property (nonatomic, strong) IBInspectable UIColor *faceColor;

/**
 *  the duration is the face moving time
 */
@property (nonatomic, assign) IBInspectable CGFloat animationDuration;


/**
 *  the switch status is or isn't on
 */
@property (nonatomic, assign) IBInspectable BOOL on;

@property (nonatomic, weak) IBOutlet id <LLSwitchDelegate> delegate;

@end


#pragma mark LLSwitch delegate
@protocol LLSwitchDelegate <NSObject>

@optional


- (void)didTapLLSwitch:(LLSwitch *)llSwitch;


- (void)animationDidStopForLLSwitch:(LLSwitch *)llSwitch;

@end

.m

#import "LLSwitch.h"
#import "LLAnimationManager.h"
#import "LLEyesLayer.h"


NSString * const FaceMoveAnimationKey = @"FaceMoveAnimationKey";
NSString * const BackgroundColorAnimationKey = @"BackgroundColorAnimationKey";
NSString * const EyesMoveStartAnimationKey = @"EyesMoveStartAnimationKey";
NSString * const EyesMoveEndAnimationKey = @"EyesMoveEndAnimationKey";
NSString * const EyesMoveBackAnimationKey = @"EyesMoveBackAnimationKey";
NSString * const MouthFrameAnimationKey = @"MouthFrameAnimationKey";
NSString * const EyesCloseAndOpenAnimationKey = @"EyesCloseAndOpenAnimationKey";

@interface LLSwitch()

/**
 *  switch background view
 */
@property (nonatomic, strong) UIView *backgroundView;

/**
 *  face layer
 */
@property (nonatomic, strong) CAShapeLayer *circleFaceLayer;

/**
 *  paddingWidth
 */
@property (nonatomic, assign) CGFloat paddingWidth;

/**
 *  eyes layer
 */
@property (nonatomic, strong) LLEyesLayer *eyesLayer;

/**
 *  face radius
 */
@property (nonatomic, assign) CGFloat circleFaceRadius;

/**
 *  the faceLayer move distance
 */
@property (nonatomic, assign) CGFloat moveDistance;

/**
 *  handler layer animation manager
 */
@property (nonatomic, strong) LLAnimationManager *animationManager;


/**
 *  whether is animated
 */
@property (nonatomic, assign) BOOL isAnimating;

@property (nonatomic, assign) CGFloat faceLayerWidth;



@end


@implementation LLSwitch

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        [self initSetUpView];
    }
    return self;
}

- (instancetype)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];
    if (self) {
        [self initSetUpView];
    }
    return self;
}


- (void)initSetUpView {
    
    /**
     *  check the switch width and height
     */
    NSAssert(self.frame.size.width >= self.frame.size.height, @"switch width must be tall！");
    
    /**
     *  init property
     */
    _onColor = [UIColor colorWithRed:73/255.0 green:182/255.0 blue:235/255.0 alpha:1.f];
    _offColor = [UIColor colorWithRed:211/255.0 green:207/255.0 blue:207/255.0 alpha:1.f];
    _faceColor = [UIColor whiteColor];
    _paddingWidth = self.frame.size.height * 0.1;
    _circleFaceRadius = (self.frame.size.height - 2 * _paddingWidth) / 2;
    _animationDuration = 1.2f;
    _animationManager = [[LLAnimationManager alloc] initWithAnimationDuration:_animationDuration];
    _moveDistance = self.frame.size.width - _paddingWidth * 2 - _circleFaceRadius * 2;
    _on = NO;
    _isAnimating = NO;
    
    /**
     *  setting init property
     */
    self.backgroundView.backgroundColor = _offColor;
    self.circleFaceLayer.fillColor = _faceColor.CGColor;
    self.faceLayerWidth = self.circleFaceLayer.frame.size.width;
    [self.eyesLayer setNeedsDisplay];
    
    [self addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapSwitch)]];
}


#pragma mark set property

- (void)setBackgroundColor:(UIColor *)backgroundColor {
    return;
}

- (void)setOffColor:(UIColor *)offColor {
    _offColor = offColor;
    if (!_on) {
        _backgroundView.backgroundColor = offColor;
        _eyesLayer.eyeColor = offColor;
        [self.eyesLayer setNeedsDisplay];
    }
}

- (void)setOnColor:(UIColor *)onColor {
    _onColor = onColor;
    if (_on) {
        _backgroundView.backgroundColor = onColor;
        _eyesLayer.eyeColor = onColor;
        [self.eyesLayer setNeedsDisplay];
    }
}

- (void)setFaceColor:(UIColor *)faceColor {
    _faceColor = faceColor;
    _circleFaceLayer.fillColor = faceColor.CGColor;
}

- (void)setAnimationDuration:(CGFloat)animationDuration {
    _animationDuration = animationDuration;
    _animationManager = [[LLAnimationManager alloc] initWithAnimationDuration:_animationDuration];
}

- (void)setOn:(BOOL)on {
    _on = on;
    if (on) {
        self.backgroundView.backgroundColor = _onColor;
        self.circleFaceLayer.position = CGPointMake(self.circleFaceLayer.position.x + _moveDistance, self.circleFaceLayer.position.y);
        self.eyesLayer.eyeColor = _onColor;
        self.eyesLayer.isLiking = YES;
        self.eyesLayer.mouthOffSet = _eyesLayer.frame.size.width;
        [self.eyesLayer needsDisplay];
    }
}


#pragma mark GestureRecognizer
- (void)handleTapSwitch {
    if (_isAnimating) {
        return;
    }
    _isAnimating = YES;
    // faceLayer
    CABasicAnimation *moveAnimation = [_animationManager moveAnimationWithFromPosition:_circleFaceLayer.position toPosition:_on ? CGPointMake(_circleFaceLayer.position.x - _moveDistance, _circleFaceLayer.position.y) : CGPointMake(_circleFaceLayer.position.x + _moveDistance, _circleFaceLayer.position.y)];
    moveAnimation.delegate = self;
    [_circleFaceLayer addAnimation:moveAnimation forKey:FaceMoveAnimationKey];
    
    // backfroundView
    CABasicAnimation *colorAnimation = [_animationManager backgroundColorAnimationFromValue:(id)(_on ? _onColor : _offColor).CGColor toValue:(id)(_on ? _offColor : _onColor).CGColor];
    [_backgroundView.layer addAnimation:colorAnimation forKey:BackgroundColorAnimationKey];
    
    // eyesLayer
    CABasicAnimation *rotationAnimation = [_animationManager eyeMoveAnimationFromValue:@(0) toValue:@(_on ? -_faceLayerWidth : _faceLayerWidth)];
    rotationAnimation.delegate = self;
    [_eyesLayer addAnimation:rotationAnimation forKey:EyesMoveStartAnimationKey];
    _circleFaceLayer.masksToBounds = YES;
    if (_on) {
        [self eyesKeyFrameAnimationStart];
    }
    
    
    // start delegate
    if ([self.delegate respondsToSelector:@selector(didTapLLSwitch:)]) {
        [self.delegate didTapLLSwitch:self];
    }
    
}



#pragma mark Init

/**
 *  init backgroundView
 *
 *  @return backgroundView
 */
- (UIView *)backgroundView {
    if (!_backgroundView) {
        _backgroundView = [[UIView alloc] init];
        _backgroundView.frame = self.bounds;
        _backgroundView.layer.cornerRadius = self.frame.size.height / 2;
        _backgroundView.layer.masksToBounds = YES;
        [self addSubview:_backgroundView];
    }
    return _backgroundView;
}


/**
 *  init circleFaceLayer
 *
 *  @return circleFaceLayer
 */
- (CAShapeLayer *)circleFaceLayer {
    if (!_circleFaceLayer) {
        _circleFaceLayer = [CAShapeLayer layer];
        [_circleFaceLayer setFrame:CGRectMake(_paddingWidth, _paddingWidth, _circleFaceRadius * 2, _circleFaceRadius *2)];
        UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:_circleFaceLayer.bounds];
        _circleFaceLayer.path = circlePath.CGPath;
        [self.backgroundView.layer addSublayer:_circleFaceLayer];
    }
    return _circleFaceLayer;
}


/**
 *  eyes and mouth layer
 *
 *  @return eyesLayer
 */
- (LLEyesLayer *)eyesLayer {
    if (!_eyesLayer) {
        _eyesLayer = [LLEyesLayer layer];
        _eyesLayer.eyeRect = CGRectMake(0, 0, _faceLayerWidth / 6, _circleFaceLayer.frame.size.height * 0.22);
        _eyesLayer.eyeDistance = _faceLayerWidth / 3;
        _eyesLayer.eyeColor = _offColor;
        _eyesLayer.isLiking = NO;
        _eyesLayer.mouthY = _eyesLayer.eyeRect.size.height * 7 / 4;
        _eyesLayer.frame = CGRectMake(_faceLayerWidth / 4, _circleFaceLayer.frame.size.height * 0.28, _faceLayerWidth / 2, _circleFaceLayer.frame.size.height * 0.72);
    //    _eyesLayer.backgroundColor = [UIColor redColor].CGColor;
        [self.circleFaceLayer addSublayer:_eyesLayer];

    }
    return  _eyesLayer;
}

#pragma mark AnimationDelegate
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
    if (flag) {
        
        // start eyes ending animation
        if (anim == [_eyesLayer animationForKey:EyesMoveStartAnimationKey]) {
            _eyesLayer.eyeColor = _on ?  _offColor: _onColor;
            _eyesLayer.isLiking = !_on;
            [_eyesLayer setNeedsDisplay];
            CABasicAnimation *rotationAnimation = [_animationManager eyeMoveAnimationFromValue:@(_on ? _faceLayerWidth : -_faceLayerWidth) toValue:@(_on ? -_faceLayerWidth / 6 :  _faceLayerWidth / 6)];
            rotationAnimation.delegate = self;
            [_eyesLayer addAnimation:rotationAnimation forKey:EyesMoveEndAnimationKey];
            
            if (!_on) {
                [self eyesKeyFrameAnimationStart];
            }
        }
        
        // start eyes back animation
        if (anim == [_eyesLayer animationForKey:EyesMoveEndAnimationKey]) {
            CABasicAnimation *rotationAnimation = [_animationManager eyeMoveAnimationFromValue:@(_on ? -_faceLayerWidth / 6 :  _faceLayerWidth / 6) toValue:@(0)];
            rotationAnimation.delegate = self;
            [_eyesLayer addAnimation:rotationAnimation forKey:EyesMoveBackAnimationKey];
            
            if (!_on) {
                CAKeyframeAnimation *eyesKeyFrameAnimation = [_animationManager eyesCloseAndOpenAnimationWithRect:_eyesLayer.eyeRect];
                [_eyesLayer addAnimation:eyesKeyFrameAnimation forKey:EyesCloseAndOpenAnimationKey];
            }
        }
        
        // eyes back animation end
        if (anim == [_eyesLayer animationForKey:EyesMoveBackAnimationKey]) {
            [_eyesLayer removeAllAnimations];
            _eyesLayer.mouthOffSet = _on ? 0 : _eyesLayer.frame.size.width;
            
            if (_on) {
                _circleFaceLayer.position = CGPointMake(_circleFaceLayer.position.x - _moveDistance, _circleFaceLayer.position.y);
                _on = NO;
            } else {
                _circleFaceLayer.position = CGPointMake(_circleFaceLayer.position.x + _moveDistance, _circleFaceLayer.position.y);
                _on = YES;
            }
            _isAnimating = NO;
            
            
            // stop delegate
            if ([self.delegate respondsToSelector:@selector(animationDidStopForLLSwitch:)]) {
                [self.delegate animationDidStopForLLSwitch:self];
            }
        }
    }
}

/**
 *  add mouth keyFrameAnimation
 */
- (void)eyesKeyFrameAnimationStart {
    CAKeyframeAnimation *keyAnimation = [_animationManager mouthKeyFrameAnimationWidthOffSet:_eyesLayer.frame.size.width on:_on];
    [_eyesLayer addAnimation:keyAnimation forKey:MouthFrameAnimationKey];
}

- (void)dealloc {
    self.delegate = nil;
}


@end

在需要的地方使用即可:

#import "ViewController.h"
#import "LLSwitch.h"

@interface ViewController () <LLSwitchDelegate>

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    LLSwitch *llSwitch = [[LLSwitch alloc] initWithFrame:CGRectMake(100, 100, 120, 60)];
    [self.view addSubview:llSwitch];
    llSwitch.delegate = self;
}

-(void)didTapLLSwitch:(LLSwitch *)llSwitch {
    NSLog(@"start");
}

- (void)animationDidStopForLLSwitch:(LLSwitch *)llSwitch {
    NSLog(@"stop");
}

@end