我利用了POP库制作了简单的广告展示的翻页效果:
源码在这里
大致思路
首先简单分析一下动画效果:
我们使用了旋转以及平移两个动画效果,通过动图可以看到:通过手指拖动(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]<