制作POP翻页动画

最新推荐文章于 2022-01-02 15:27:42 发布

fuzesunshine

最新推荐文章于 2022-01-02 15:27:42 发布

阅读量620

点赞数

分类专栏： iOS 文章标签： pop iOS

本文链接：https://blog.csdn.net/fuzesunshine/article/details/52039871

版权

我利用了POP库制作了简单的广告展示的翻页效果：
Markdown
源码在这里

大致思路

首先简单分析一下动画效果：
我们使用了旋转以及平移两个动画效果，通过动图可以看到：通过手指拖动(pan)，图片在平移的同时绕着自身中轴线旋转。

那么怎么让图片绕着中轴线旋转呢？可以使用POPBasicAnimation中的kPOPLayerRotaionY制作旋转动画，中轴线的位置为锚点的位置，可以通过anchorPoint、anchorPointZ以及position共同确定锚点的三维坐标。至于anchorPoint与position如何共同确定绝对坐标可以参照博客，简单来说：锚点是标志一个layer位置的点，anchorPoint是锚点在该layer的相对坐标，而positon是锚点在superView中的绝对坐标。
沿x轴的平移效果可以通过POPBasicAnimaition的kPOPLayerPositionX来实现。旋转的角度以及平移的距离都与手指拖动(pan)的距离有关。

源码分析

首先初始化五张图片，设置不同的位置，以及不同的旋转角度。在画面中只显示3张，但为了左右拖动时有图片补位，这里初始化5张。

- (void)initPictures {
    for (int i = 0; i<5; i++) {
   
        UIImageView *imgView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:[pictureNames objectAtIndex:i]]];
        imgView.frame = CGRectMake(0, 0, 319, 187);
        imgView.layer.anchorPoint = CGPointMake(0.5, 0.5);
        imgView.layer.anchorPointZ = 100.0f;
        imgView.layer.position = CGPointMake(-62+i*287, 374/4+30);
        imgView.layer.transform = [self setTransform3D];
        imgView.userInteractionEnabled = YES;

        POPBasicAnimation *initRotationAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerRotationY];
        initRotationAnimation.duration = 0;
        initRotationAnimation.toValue = @((2-i)*M_PI/6);

        [imgView.layer pop_addAnimation:initRotationAnimation forKey:@"initRotation"];

        [self showImageAndReflection:imgView];

        [imgViews addObject:imgView];
        [self.view addSubview:imgView];
    }
}

这里通过showImageAndReflection函数来设置图片的倒影：

- (void)showImageAndReflection:(UIImageView *)view {
    // 制作reflection
    CALayer *layer = view.layer;
    CALayer *reflectLayer = [CALayer layer];
    reflectLayer.contents = layer.contents;
    reflectLayer.bounds = layer.bounds;
    reflectLayer.position = CGPointMake(layer.bounds.size.width/2, layer.bounds.size.height*1.5);
    reflectLayer.transform = CATransform3DMakeRotation(M_PI, 1, 0, 0);

    // 给该reflection加个半透明的layer
    CALayer *blackLayer = [CALayer layer]<