1.正方体
Core Animation定义了这个(消亡点)位于变换图层的anchorPoint ,当改变一个图层的position，你也改变了它的消亡点，做3D变换的时候要时刻记住这一点，当你视图通过调整m34来让它更加有3D效果，应该首先把它放置于屏幕中央，然后通过平移来把它移动到指定位置（而不是直接改变它的position），这样所有的3D图层都共享一个消亡点。
如果有多个视图或者图层，每个都做3D变换，那就需要分别设置相同的m34值，并且确保在变换之前都在屏幕中央共享同一个position,CALayer有一个属性叫做sublayerTransform。它也是CATransform3D类型，但和对一个图层的变换不同，它影响到所有的子图层。这意味着你可以一次性对包含这些图层的容器做变换，于是所有的子图层都自动继承了这个变换方法
_viewArray=[[NSMutableArray alloc]initWithCapacity:0];
_containerView=[[UIView alloc]init];
_containerView.backgroundColor=[UIColor grayColor];
_containerView.frame=CGRectMake(50, 50, 200, 200);
[self.view addSubview:_containerView];
for(int i=1;i<7;i++)
{
UIView *temp=[self createCustemView:i];
temp.center=CGPointMake(200/2, 200/2);
[_containerView insertSubview:temp atIndex:0];
[_viewArray insertObject:temp atIndex:0];
}
[self setTransform];
-(void)setTransform
{
CATransform3D perspective=CATransform3DIdentity;
perspective.m34=-1.0/500.0; //设置消亡点
_containerView.layer.sublayerTransform=perspective;//共用sublayerTransform
CATransform3D transform=CATransform3DMakeTranslation(0, 0, 50);//第六张view沿z移动50
[self getView:0 andTransform:transform];//6
transform=CATransform3DMakeTranslation(50, 0, 0);//第五张view沿x移动50 并且沿y旋转90度，注意这里旋转是按中点旋转主要看anchorPoint 一下以此类推
transform=CATransform3DRotate(transform, M_PI_2, 0, 1, 0);
[self getView:1 andTransform:transform];//5
transform=CATransform3DMakeTranslation(0, -50, 0);
transform=CATransform3DRotate(transform, M_PI_2, 1, 0, 0);
[self getView:2 andTransform:transform];//4
transform=CATransform3DMakeTranslation(0, 50, 0);
transform=CATransform3DRotate(transform, -M_PI_2, 1, 0, 0);
[self getView:3 andTransform:transform];//3
transform=CATransform3DMakeTranslation(-50, 0, 0);
transform=CATransform3DRotate(transform, -M_PI_2, 0, 1, 0);
[self getView:4 andTransform:transform];//2
transform=CATransform3DMakeTranslation(0, 0, -50);
transform=CATransform3DRotate(transform, M_PI, 0, 1, 0);
[self getView:5 andTransform:transform];//1
perspective=CATransform3DRotate(perspective, -M_PI_4, 1, 0, 0);//最后旋转下整体更好的看清楚（不旋转就是一个正面的立方体，只能看到一面）
//.layer.sublayerTransform=perspective;
perspective=CATransform3DRotate(perspective, -M_PI_4, 0, 1, 0);
_containerView.layer.sublayerTransform=perspective;
}
-(void)getView:(int)index andTransform:(CATransform3D)transform
{
UIView *temp=[_viewArray objectAtIndex:index];
temp.layer.transform=transform;
[self applyLightingToFace:temp.layer];
}
-(void)applyLightingToFace:(CALayer *)face //给每个面添加光亮和阴影,这一块代码不是很懂
{
CALayer *layer=[CALayer layer];
layer.frame=face.bounds;
[face addSublayer:layer];
CATransform3D transform=face.transform;
GLKMatrix4 matrix4=*(GLKMatrix4 *)&transform;//三矩阵转四矩阵
GLKMatrix3 matrix3=GLKMatrix4GetMatrix3(matrix4);
GLKVector3 normal=GLKVector3Make(0, 0, 1);
normal=GLKMatrix3MultiplyVector3(matrix3, normal);
normal=GLKVector3Normalize(normal);
GLKVector3 light=GLKVector3Normalize(GLKVector3Make(0, 1, -0.5));
float dotProduct=GLKVector3DotProduct(light, normal);
CGFloat shadow=1+dotProduct-0.5;
UIColor *color=[UIColor colorWithWhite:0 alpha:shadow];
layer.backgroundColor=color.CGColor;
}
-(UIView *)createCustemView:(int)number//创建正方体的各个面
{
UIView *view=[[UIView alloc]init];
view.backgroundColor=[UIColor whiteColor];
UILabel *label=[[UILabel alloc]init];
label.textAlignment=NSTextAlignmentCenter;
label.textColor=[UIColor redColor];
label.text=[NSString stringWithFormat:@"%d",number];
view.bounds=CGRectMake(0, 0, 100, 100);
label.frame=CGRectMake(0, (100-17)/2, 100, 17);
[view addSubview:label];
return view;
}
2.第一个loadding动画
一共是八个小圆圈排成一个大圆，第一个小圆在正上角
[self createAnimationLoadView];
-(void)createAnimationLoadView
{
_sequencePostionArray=[[NSMutableArray alloc]initWithCapacity:0];
_sequenceViewArray=[[NSMutableArray alloc]initWithCapacity:0];
NSArray *colorArray = @[[UIColor blueColor],[UIColor redColor],[UIColor purpleColor],[UIColor yellowColor],[UIColor blueColor],[UIColor blackColor],[UIColor grayColor],[UIColor orangeColor]];
//NSArray *colorArray=@[[UIColor redColor],[UIColor yellowColor],[UIColor blueColor],[UIColor purpleColor],[UIColor blackColor],[UIColor orangeColor],[UIColor grayColor],[UIColor greenColor]];
CGFloat centerX=self.view.center.x;
CGFloat centerY=self.view.center.y;
CGFloat delta=2*M_PI /8;
CGFloat x = centerX + 50 * cos(delta*7);
CGFloat y = centerY + 50 * sin(delta*7);
[_sequencePostionArray addObject:[NSValue valueWithCGPoint:CGPointMake(x, y)]];
UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 20, 20)];//第一个正小圆
view1.center = self.view.center;
view1.backgroundColor = colorArray[0];
view1.layer.cornerRadius = 10;
view1.layer.masksToBounds = YES;
view1.layer.transform = CATransform3DMakeScale(0, 0, 0);
[self.view addSubview:view1];
[_sequenceViewArray addObject:view1];
for(int i=0;i<7;i++)//绘制其余的7个小圆
{
CGFloat x = centerX + 50 * cos(delta*i);//
CGFloat y = centerY + 50 * sin(delta*i);
[_sequencePostionArray addObject:[NSValue valueWithCGPoint:CGPointMake(x, y)]];
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 20, 20)];
view.center = self.view.center;
view.backgroundColor = colorArray[i+1];
view.layer.cornerRadius = 10;
view.layer.transform = CATransform3DMakeScale(0, 0, 0);
view.layer.masksToBounds = YES;
[self.view addSubview:view];
[_sequenceViewArray addObject:view];
}
-(void)startAnimation
{
for(int i=0;i<_sequenceViewArray.count;i++)//每个小圆都使用组动画
{
UIView *view=[_sequenceViewArray objectAtIndex:i];
[view.layer addAnimation:[self createGroupAnimationWithDelay:i*0.1 andIndex:i] forKey:@"group"];
}
}
-(CAAnimationGroup *)createGroupAnimationWithDelay:(CFTimeInterval)time andIndex:(NSInteger)index
{//分别改变属性的坐标和缩放大小
CABasicAnimation *moveAnimation=[CABasicAnimation animationWithKeyPath:@"position"];
moveAnimation.fromValue=[NSValue valueWithCGPoint:self.view.center];
moveAnimation.toValue=[_sequencePostionArray objectAtIndex:index];
moveAnimation.duration=0.75;
moveAnimation.autoreverses=YES;
CABasicAnimation *scaleAnimation=[CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.fromValue=@(0);
scaleAnimation.toValue=@(1);
scaleAnimation.duration=0.75;
scaleAnimation.autoreverses=YES;
CAAnimationGroup *group=[CAAnimationGroup animation];
group.animations=@[moveAnimation,scaleAnimation];
group.autoreverses=YES;
group.duration=0.75;
group.repeatCount=HUGE_VALF;
group.beginTime=CACurrentMediaTime()+time;
return group;
}
3第二个动画
旋转 并且有弹动的效果
-(CAKeyframeAnimation *)createRotateAnimation:(NSTimeInterval)time
{//方块从0度开始旋转60度，再下来旋转到90度，在旋转到110度（这里先转的角度都是与初始化的对比）,在旋转到90度弹回，旋转到70度，旋转到90度...
CAKeyframeAnimation *animation=[CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"];
animation.values=@[@(0),@(NUMBER_TO_MPI(60)),@(NUMBER_TO_MPI(90)),@(NUMBER_TO_MPI(110)),@(NUMBER_TO_MPI(90)),@(NUMBER_TO_MPI(70)),@(NUMBER_TO_MPI(90)),@(NUMBER_TO_MPI(100)),@(NUMBER_TO_MPI(90)),@(NUMBER_TO_MPI(80)),@(NUMBER_TO_MPI(90)),@(NUMBER_TO_MPI(95)),@(NUMBER_TO_MPI(90))];
animation.keyTimes=@[@(0),@(0.5),@(0.6),@(0.64),@(0.68),@(0.72),@(0.76),@(0.8),@(0.84),@(0.88),@(0.92),@(0.98),@(1)];// 旋转到各个角度的时间点，并不是区间的时间，一共才1s时间
animation.fillMode=kCAFillModeForwards;
animation.removedOnCompletion=NO;
animation.beginTime=CACurrentMediaTime()+time;
//animation.repeatCount=HUGE_VALF;
animation.duration=1;
return animation;
}
-(void)button1Click:(id)sender
{//每个view分别添加layer动画和移动中心点y，感觉是在向上翻动
[_yellowView.layer addAnimation:[self createRotateAnimation:0] forKey:@"yeallow"];
[_redView.layer addAnimation:[self createRotateAnimation:0.2] forKey:@"red"];
[_blueView.layer addAnimation:[self createRotateAnimation:0.4] forKey:@"blue"];
[UIView animateWithDuration:0.5 animations:^{
_yellowView.center = CGPointMake(_yellowView.center.x, _yellowView.center.y-10);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.1 animations:^{
_yellowView.center = CGPointMake(_yellowView.center.x, _yellowView.center.y+10);
}];
}];
[UIView animateWithDuration:0.5 delay:0.2 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
_redView.center = CGPointMake(_redView.center.x, _redView.center.y-10);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.1 animations:^{
_redView.center = CGPointMake(_redView.center.x, _redView.center.y+10);
}];
}];
[UIView animateWithDuration:0.5 delay:0.4 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
_blueView.center = CGPointMake(_blueView.center.x, _blueView.center.y-10);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.1 animations:^{
_blueView.center = CGPointMake(_blueView.center.x, _blueView.center.y+10);
}];
}];
}
