iOS动画案例(1)类似于qq账号信息里的一个动画效果 - 行业资讯

受人所托,做一个类似于qq账号信息里的一个动画,感觉挺有意思,也没感觉有多难,就开始做了,结果才发现学的数学知识都还给体育老师了,研究了大半天才做出来。

,先看一下动画效果:

用到的知识点:

(1)三角函数
　　(2)CALayer
　　(3)CATransaction
　　(4)UIBezierPath
　　(5)CAKeyframeAnimation
　　(6)CAAnimationGroup

,如图,这明显是一段圆弧,那么要确定这段一段圆弧的位置,就得确定这段圆弧的圆心和圆心角。我规定圆心在手机屏幕的左顶点,也就是(0,0),圆心角为60°。别问我为什么这么确定,我也是一点点尝试的。我们先设手机屏幕的宽度为ScreenWidth,圆弧半径为R,那么R=ScreenWidth/cos(60°);知道了这些开始画圆弧。

　　　　//屏幕的宽度　　CGFloat宽度=[UIScreen mainScreen] .bounds.size.width;//圆半径　　浮动r=2 *宽度/?3);//画曲线　　用户界面颜色*颜色=[用户界面颜色redColor]; 　　(颜色设置); 　　UIBezierPath *路径=[UIBezierPath bezierPathWithArcCenter: CGPointMake(0,0):半径r startAngle: M_PI/2 endAngle: M_PI顺时针/6:没有); 　　路径。线宽=1.0; 　　路径。lineCapStyle=kCGLineCapRound; 　　路径。lineJoinStyle=kCGLineJoinRound; 　　(路径中风), 　　　　

,确定了圆心角和半径就要确定ABCD四个点的坐标了,分别作为四张图片的圆心。圆弧SA和圆弧DE的圆心角一样,设定为7.5°,那么弧AB,公元前弧弧CD的圆心角设定为相等,分别为(60 - 7.5 * 2)/3=15°。那么一个点的坐标就等于(R * sin7.5, R * cos7.5°); B, C, D点的坐标一样用三角函数求,分别为(* sin22.5, R * cos22.5°), (* sin37.5, R * cos37.5°), (* sin52.5, R * cos52.5°) .ABCD其实都是一个按钮、下面开始放按钮。

　　　　//放图片　　for (int i=0;我& lt;4;我+ +){//一共四个按钮从左到右指数分别为0,1,2,3 　　UIButton *按钮=[UIButton buttonWithType UIButtonTypeCustom):; 　　button.frame=(自我getButtonFrame:我); 　　按钮。标签=i + 1; 　　【按钮addTarget:自我行动:@ selector (buttonClick:) forControlEvents: UIControlEventTouchUpInside); 　　[按钮setImage:[界面图像imageNamed:(NSString stringWithFormat: @ % d, i + 1]] forState: UIControlStateNormal);//设置按钮为圆　　button.layer。cornerRadius=25; 　　button.layer。borderColor=[用户界面颜色greenColor] .CGColor; 　　button.layer。masksToBounds=是的; 　　button.layer。borderWidth f=2.0; 　　(自我addSubview:按钮); 　　}//根据指数确定按钮的坐标　　——(CGRect中)getButtonFrame:指数(int) { 　　浮动弧度=M_PI *(7.5 + 15 *指数)/180; 　　CGFloat宽度=[UIScreen mainScreen] .bounds.size.width; 　　浮动r=2 *宽度/?3); 　　CGRect中?CGRectMake (sin(弧度)* r, cos(弧度)* r, 50岁,50); 　　frame.origin。x=frame.origin。x - 25; 　　frame.origin。y=frame.origin。y - 25; 　　返回帧; 　　} 　　　　

,头像默认放第一个。

　　　　　　自我。头=[[UIImageView alloc] initWithFrame:[自我getButtonFrame: 0]]; 　　self.head。形象=[界面图像imageNamed: @“到了头”); 　　self.head.layer。borderColor=[用户界面颜色greenColor] .CGColor; 　　self.head.layer。masksToBounds=是的; 　　self.head.layer。cornerRadius=25; 　　self.head.layer。borderWidth f=2.0; 　　[自我addSubview: self.head]; 　　　　

之后按钮点击之后,头像移动到按钮点击的地方。

　　　　//按钮点击事件　　- (void) buttonClick: {(UIButton *)按钮//原来图片所在按钮的指数　　int preIndex=(自我getPreviousIndexByFrame: self.head.frame); 　　int buttonIndex=(int)按钮。标签- 1;//点击图片所在按钮不做任何操作　　如果(preIndex==buttonIndex) { 　　返回; 　　} 　　CGFloat宽度=[UIScreen mainScreen] .bounds.size.width; 　　浮动r=2 *宽度/?3);//加入动画效果　　CALayer * transitionLayer=[[CALayer alloc] init);//显式事务默认开启动画效果,kCFBooleanTrue关闭保证开始和提交之间的属性修改同时进行　　transitionLayer。内容=self.head.layer.contents; 　　transitionLayer。borderColor=[用户界面颜色greenColor] .CGColor; 　　transitionLayer。masksToBounds=是的; 　　transitionLayer。cornerRadius=25; 　　transitionLayer。borderWidth f=2.0; 　　transitionLayer.frame=self.head.frame; 　　transitionLayer。写成backgroundColor=[用户界面颜色blueColor] .CGColor; 　　(自我。层addSublayer transitionLayer):; 　　self.head。隐藏=是的; 　　UIBezierPath * movePath;//路径曲线贝塞尔曲线　　如果(buttonIndex比;preIndex) {//向上滑逆时针　　movePath=[UIBezierPath bezierPathWithArcCenter: CGPointMake(0,0):半径r startAngle:[自我getAnticlockwiseByIndex: preIndex] endAngle:[自我getAnticlockwiseByIndex buttonIndex):顺时针方向:没有); 　　[movePath moveToPoint transitionLayer.position):; 　　其他}{//向下滑顺时针　　movePath=[UIBezierPath bezierPathWithArcCenter: CGPointMake(0,0):半径r startAngle:[自我getClockwiseAngleByIndex: preIndex] endAngle:[自我getClockwiseAngleByIndex buttonIndex):顺时针方向:是的); 　　[movePath moveToPoint transitionLayer.position):; 　　}//关键帧动画效果　　CAKeyframeAnimation * positionAnimation=[CAKeyframeAnimation animationWithKeyPath: @“位置”);//动画轨迹　　positionAnimation。路径=movePath.CGPath;//动画完成之后是否删除动画效果　　positionAnimation。removedOnCompletion=没有;//设置开始的时间　　positionAnimation。beginTime=CACurrentMediaTime (); 　　CGFloat时间=0.7; 　　如果实验室(buttonIndex - preIndex)比;1){ 　　时间=0.4 *实验室(buttonIndex - preIndex); 　　}//动画总时间　　positionAnimation。时间=时间;//动画的方式淡入淡出　　positionAnimation。timingFunction=[CAMediaTimingFunction functionWithName kCAMediaTimingFunctionEaseOut):;//执行完之后保存最新的状态　　positionAnimation。fillMode=kCAFillModeForwards;//动画完成之后,是否回到原来的地方　　positionAnimation。autoreverses=没有; 　　[transitionLayer addAnimation: positionAnimation forKey: @“不透明度”); 　　[CATransaction setCompletionBlock: ^ { 　　[NSThread sleepForTimeInterval:时间); 　　self.head。隐藏=没有; 　　self.head.frame=button.frame; 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null