實(shí)現(xiàn)圖片隨者手勢(shì)拖動(dòng)進(jìn)行翻轉(zhuǎn)

效果圖:

圖片翻轉(zhuǎn).gif

- (void)viewDidLoad {
    [super viewDidLoad];
    UIPanGestureRecognizer *panGs = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(PanAction:)];
    [self.view addGestureRecognizer:panGs];
    self.panGs = panGs;
    [self setImage];
}
//設(shè)置圖片
- (void)setImage {
    //設(shè)置頂圖
    //contentsRect設(shè)置圖片的內(nèi)容區(qū)域
    self.topImage.layer.contentsRect = CGRectMake(0, 0, 1, 0.5);
    self.topImage.layer.anchorPoint = CGPointMake(0.5, 1);
    //設(shè)置底圖
    self.bottomImage.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.5);
    self.bottomImage.layer.anchorPoint = CGPointMake(0.5, 0);
    //設(shè)置底部image的漸變層
    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.frame = self.bottomImage.bounds;
    gradient.colors = @[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];
#pragma  mark  - 漸變層
    //設(shè)置漸變層漸變的區(qū)間
    //其location屬性可以設(shè)置開始漸變的區(qū)域
    //下面為設(shè)置漸變qujian
    //layer中有很多屬性其取值范圍在0～1之間
    gradient.startPoint = CGPointMake(0, 0);
    gradient.endPoint = CGPointMake(0, 1);
    //opacity--->不透明度
    gradient.opacity = 0;
    self.gradient = gradient;
    [self.bottomImage.layer addSublayer:gradient];
}
- (void)PanAction:(UIPanGestureRecognizer *)sender {
    CGPoint curPoint = [sender translationInView:self.touchView];
    CGFloat angle = (curPoint.y / 200) *M_PI;
    CATransform3D transform = CATransform3DIdentity;
    //設(shè)置立體效果，注意要加上“.0“携狭；
    transform.m34 = -1/300.0;
    self.topImage.layer.transform = CATransform3DRotate(transform, -angle, 1, 0, 0);
    self.gradient.opacity = curPoint.y/200;
    if (sender.state == UIGestureRecognizerStateEnded) {
        [UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.5 initialSpringVelocity:1 options:UIViewAnimationOptionCurveEaseOut animations:^{
            //重置transForm
            self.topImage.layer.transform = CATransform3DIdentity;
            self.gradient.opacity = 0;
        } completion:nil];
    }
}

CAlayer復(fù)制層CAReplicatorLayer

實(shí)現(xiàn)效果也：音量振動(dòng)條

音量震動(dòng)條.gif

- (void)setLayer {
    //設(shè)置復(fù)制層
    CAReplicatorLayer *replicator = [CAReplicatorLayer layer];
    replicator.frame = self.backView.bounds;
    replicator.backgroundColor = [UIColor yellowColor].CGColor;
    replicator.instanceCount = 8;
    replicator.instanceTransform = CATransform3DMakeTranslation(30, 0, 0);
    replicator.instanceDelay = 1;
    //設(shè)置子layer
    CALayer *layer = [CALayer layer];
    CGFloat weight = 20;
    CGFloat height = 100;
    CGFloat y = self.backView.bounds.size.height - height;
    CGFloat x = 20;
    layer.anchorPoint = CGPointMake(0.5, 1);
    layer.frame = CGRectMake(x, y, weight, height);
    layer.backgroundColor = [UIColor redColor].CGColor;
    [replicator addSublayer:layer];
    [self.backView.layer addSublayer:replicator];
    //設(shè)置動(dòng)畫
    CABasicAnimation *baseAnim = [CABasicAnimation animation];
    baseAnim.keyPath = @"transform.scale.y";
    baseAnim.fromValue = @0;
    baseAnim.toValue = @1.5;
    baseAnim.repeatCount = MAXFLOAT;
    baseAnim.duration = 1;
    baseAnim.autoreverses = YES;
    [layer addAnimation:baseAnim forKey:nil];
}