经常看到一些很好的动画加载视图,闲来无事就写了一个书本翻页样式的动画加载视图,核心技术是CALayer+CoreAnimation。项目源码地址:https://github.com/China131/JHLodingView.git 如果有所帮助,记得star哦?
正题如下:
创建一个单独的layer:
/* 使用类方法创建CAlayer对象 */
CALayer * layer = [CALayer layer];
/* CATransform实际上是一个结构体 因此不能直接对内部元素直接赋值 */
CATransform3D transform = layer.transform;
/* 设置layer的立体效果值 m34为该值 渲染立体效果 */
transform.m34 = 10.5/-2000;
layer.transform = transform;
/* 设置layer的背景颜色,注意是CGColor类型 */
layer.backgroundColor = [k_COLOR_STOCK[_currentIndex%k_COLOR_STOCK.count] CGColor];
/* 设置锚点,锚点即动画的中心点,默认为(二维环境)(0.5.0.5),分别表示X轴中点 Y轴中点 */
layer.anchorPoint = CGPointMake(0, 0.5);
layer.frame = CGRectMake(200, 100, 30, 45);
/* 设置layer的中心点,相当于UIView对象的center熟悉 */
layer.position = CGPointMake(K_IOS_WIDTH/2, K_IOS_HEIGHT/2-50);
[self.layer addSublayer:layer];
创建翻页动画
/* 创建翻页动画 */
CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
/* transform.rotation.y的动画开始值 */
basic.fromValue = @(-M_PI );
/* transform.rotation.y的动画结束值 */
basic.toValue = @(0);
/* 是否在动画结束后自动按照反向动画回归原状态 */
basic.autoreverses = NO;
/* 动画执行次数 */
basic.repeatCount = 1;
/* 动画时长 */
basic.duration = 1.0;
/* 动画填充模式 */
basic.fillMode = kCAFillModeRemoved;
/* 设置代理 */
basic.delegate = self;
[layer addAnimation:basic forKey:@"basc"];
当按照上方法循环添加多个layer动画时,并间隔0.2s执行,就会有从左到右的翻页动画效果。如果想要更加完美,可以将这些layer添加到数组,在从左到右的动画完成后,给数组中的layer添加一个反向动画,即可实现来回的翻页动画。效果图如下: