活动指示器、音量震动条、立体折叠、倒影

活动指示器

//CAReplicatorLayer 复制图层，可以把图层里面所以子层复制
    // 创建复制图层
    CAReplicatorLayer *repL = [CAReplicatorLayer layer];
    
    repL.frame = _bgView.bounds;
    
    [_bgView.layer addSublayer:repL];
    
    CALayer *layer = [CALayer layer];
    
    layer.transform = CATransform3DMakeScale(0, 0, 0);
    
    layer.position = CGPointMake(_bgView.bounds.size.width/2, 10);
    
    layer.bounds = CGRectMake(0, 0, 10, 10);
    
    layer.backgroundColor = [UIColor greenColor].CGColor;
    
    [repL addSublayer:layer];
    
    //设置缩放动画
    CABasicAnimation *anim = [CABasicAnimation animation];
    
    anim.keyPath = @"transform.scale";
    
    anim.fromValue = @1;
    
    anim.toValue = @0;
    
    anim.repeatCount = MAXFLOAT;
    
    CGFloat duration = 0.1;
    
    int count = 16;
    
    anim.duration = duration * count;
    
    CGFloat angle = M_PI * 2 / count;
    //设置子层总数 即：复制层中有多少个子层，包括原始层
    repL.instanceCount = count;
    //设置复制层子层的动画 相对于上个子控件的动画
    repL.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1);
    //距离上一个控件动画的延迟时间
    repL.instanceDelay = duration;
    
    [layer addAnimation:anim forKey:nil];

10C487B9-25BA-40B4-B6BC-8362A49AE381.png

音量震动条

//CAReplicatorLayer 复制图层，可以把图层里面所以子层复制
    // 创建复制图层
    CAReplicatorLayer *repL = [CAReplicatorLayer layer];
    
    repL.frame = _bgView.bounds;
    
    [_bgView.layer addSublayer:repL];
    
    CALayer *layer = [CALayer layer];
    
    layer.anchorPoint = CGPointMake(0.5, 1);
    
    layer.position = CGPointMake(15 , _bgView.bounds.size.height);
    
    layer.bounds = CGRectMake(0, 0, 15, 100);
    
    layer.backgroundColor = [UIColor greenColor].CGColor;
    
    [repL addSublayer:layer];
    
    //设置缩放动画
    CABasicAnimation *anim = [CABasicAnimation animation];
    
    anim.keyPath = @"transform.scale.y";
    
    anim.toValue = @0.1;
    
    anim.repeatCount = MAXFLOAT;
    
    anim.duration = 0.5;
    // 设置动画反转
    anim.autoreverses = YES;
    
    //设置子层总数 即：复制层中有多少个子层，包括原始层
    repL.instanceCount = 6;
    //设置复制层子层的偏移量 相对于上个子控件的动画
    repL.instanceTransform = CATransform3DMakeTranslation(25, 0, 0);
    //距离上一个控件动画的延迟时间
    repL.instanceDelay = 0.1;
    
    [layer addAnimation:anim forKey:nil];

DD69BCF0-22F2-4C15-9305-0522773D37A6.png

立体折叠

@interface WatchViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *topImageV;
@property (weak, nonatomic) IBOutlet UIImageView *bottomImageV;
@property (weak, nonatomic) IBOutlet UIView *drawView;

@property (nonatomic ,assign) CAGradientLayer *gradientL;
@end

@implementation WatchViewController
- (void)viewDidLoad
{
    [super viewDidLoad];
    // 通过设置contentsRect 可以设置图片显示的尺寸，
    _topImageV.layer.contentsRect = CGRectMake(0, 0, 1, 0.5);
    _topImageV.layer.anchorPoint = CGPointMake(0.5, 1);
    _bottomImageV.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.5);
    _bottomImageV.layer.anchorPoint = CGPointMake(0.5, 0);
    
    //设置图层 阴影效果
    CAGradientLayer *gradientL = [CAGradientLayer layer];
    
    gradientL.frame = _bottomImageV.bounds;
    
    gradientL.colors = @[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];
    
//    gradientL.locations = @[@0.1 ,@0.3];
    
    gradientL.opacity = 0.0;
    
    _gradientL = gradientL;
    [_bottomImageV.layer addSublayer:gradientL];
    
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
    [_drawView addGestureRecognizer:pan];
}
- (void)pan:(UIPanGestureRecognizer*)pan
{
    CGPoint transP = [pan translationInView:_drawView];
    
    // 旋转角度， 往下逆时针旋转
    CGFloat angle = -transP.y / 182.0 * M_PI;
    
    CATransform3D transfrom = CATransform3DIdentity;
    
    // 增加旋转的立体感，近大远小
    transfrom.m34 = -1 / 500.0;
    
    transfrom = CATransform3DRotate(transfrom, angle, 1, 0, 0);
    
    _topImageV.layer.transform = transfrom;
    
    // 设置阴影效果
    _gradientL.opacity = transP.y * 1 / 200.0;
    
    //结束的时候 反弹
    if (pan.state == UIGestureRecognizerStateEnded)
    {
        //弹簧效果的动画
        //SpringWithDamping 弹簧系数，越小，弹簧效果越明显
        //delay 动画延迟时间
        //SpringVelocity 速度通常0
        [UIView animateWithDuration:0.25 delay:0 usingSpringWithDamping:0.3 initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
            
            //回到默认效果
            _topImageV.layer.transform = CATransform3DIdentity;
            
            _gradientL.opacity = 0.0;
            
        } completion:^(BOOL finished) {
            
        }];
    }
    
    
}

@end

6F682C8E-C83C-4EA7-8D3B-47AF14BDD240.png

倒影

#import "aaDrawView.h"
@interface aaDrawView ()

@end
@implementation aaDrawView
// 设置控件主层的类型  默认是CALayer
+ (Class)layerClass
{
    return [CAReplicatorLayer class];
}

@end

#import "WatchViewController.h"
#import "aaDrawView.h"
@interface WatchViewController ()
@property (weak, nonatomic) IBOutlet aaDrawView *repView;

@end

@implementation WatchViewController
- (void)viewDidLoad
{
    [super viewDidLoad];
    CAReplicatorLayer *layer = (CAReplicatorLayer *) _repView.layer;
    
    layer.instanceCount = 2;
    
    CATransform3D transform = CATransform3DMakeTranslation(0, _repView.bounds.size.height, 0);
    // 绕着X轴旋转
    transform = CATransform3DRotate(transform, M_PI, 1, 0, 0);
    
    // 往下平移控件的高度
    layer.instanceTransform = transform;
    
    layer.instanceRedOffset = -0.1;
    layer.instanceBlueOffset = -0.1;
    layer.instanceGreenOffset = -0.1;
    layer.instanceAlphaOffset = -0.1;
}

27BA1903-6EBC-4591-9EC9-F81397EC4D9F.png