您好,登錄后才能下訂單哦!
受人所托,做一個(gè)類(lèi)似于qq賬號(hào)信息里的一個(gè)動(dòng)畫(huà),感覺(jué)挺有意思,也沒(méi)感覺(jué)有多難,就開(kāi)始做了,結(jié)果才發(fā)現(xiàn)學(xué)的數(shù)學(xué)知識(shí)都還給體育老師了,研究了大半天才做出來(lái)。
先看一下動(dòng)畫(huà)效果:
用到的知識(shí)點(diǎn):
(1)三角函數(shù)
(2)CALayer
(3)CATransaction
(4)UIBezierPath
(5)CAKeyframeAnimation
(6)CAAnimationGroup
如圖,這明顯是一段圓弧,那么要確定這段一段圓弧的位置,就得確定這段圓弧的圓心和圓心角。我規(guī)定圓心在手機(jī)屏幕的左頂點(diǎn),也就是(0,0),圓心角為60°。別問(wèn)我為什么這么確定,我也是一點(diǎn)點(diǎn)嘗試的。我們先設(shè)手機(jī)屏幕的寬度為 ScreenWidth,圓弧半徑為R;那么R = ScreenWidth/cos(60°);知道了這些開(kāi)始畫(huà)圓弧。
// 屏幕的寬度 CGFloat width = [UIScreen mainScreen].bounds.size.width; // 圓半徑 float r = 2 * width / sqrt(3); // 畫(huà)曲線 UIColor *color = [UIColor redColor]; [color set]; UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(0, 0) radius:r startAngle:M_PI / 2 endAngle:M_PI / 6 clockwise:NO]; path.lineWidth = 1.0; path.lineCapStyle = kCGLineCapRound; path.lineJoinStyle = kCGLineJoinRound; [path stroke];
確定了圓心角和半徑就要確定ABCD四個(gè)點(diǎn)的坐標(biāo)了,分別作為四張圖片的圓心。圓弧SA和圓弧DE的圓心角一樣,設(shè)定為7.5°,那么弧AB、弧BC、弧CD的圓心角設(shè)定為相等,分別為(60 - 7.5 * 2)/ 3 = 15°。那么A點(diǎn)的坐標(biāo)就等于(R * sin7.5,R * cos7.5°);B,C,D點(diǎn)的坐標(biāo)一樣用三角函數(shù)求,分別為(R * sin22.5,R * cos22.5°),(R * sin37.5,R * cos37.5°),(R * sin52.5,R * cos52.5°)。ABCD其實(shí)都是一個(gè)按鈕,下面開(kāi)始放按鈕。
// 放圖片 for (int i = 0; i < 4; i++) { // 一共四個(gè)按鈕 從左到右index分別為0,1,2,3 UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = [self getButtonFrame:i]; button.tag = i + 1; [button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside]; [button setImage:[UIImage imageNamed:[NSString stringWithFormat:@"%d",i + 1]] forState:UIControlStateNormal]; // 設(shè)置按鈕為圓 button.layer.cornerRadius = 25; button.layer.borderColor = [UIColor greenColor].CGColor; button.layer.masksToBounds = YES; button.layer.borderWidth = 2.0f; [self addSubview:button]; } // 根據(jù)Index確定按鈕的坐標(biāo) - (CGRect)getButtonFrame: (int) index { float radians = M_PI * (7.5 + 15 * index) / 180; CGFloat width = [UIScreen mainScreen].bounds.size.width; float r = 2 * width / sqrt(3); CGRect frame = CGRectMake(sin(radians) * r, cos(radians) * r, 50, 50); frame.origin.x = frame.origin.x - 25; frame.origin.y = frame.origin.y - 25; return frame; }
頭像默認(rèn)放第一個(gè)。
self.head = [[UIImageView alloc] initWithFrame:[self getButtonFrame:0]]; self.head.image = [UIImage imageNamed:@"myHead"]; self.head.layer.borderColor = [UIColor greenColor].CGColor; self.head.layer.masksToBounds = YES; self.head.layer.cornerRadius = 25; self.head.layer.borderWidth = 2.0f; [self addSubview:self.head];
之后按鈕點(diǎn)擊之后,頭像移動(dòng)到按鈕點(diǎn)擊的地方。
// 按鈕點(diǎn)擊事件 - (void)buttonClick:(UIButton *)button { // 原來(lái)圖片所在按鈕的index int preIndex = [self getPreviousIndexByFrame:self.head.frame]; int buttonIndex = (int)button.tag - 1; // 點(diǎn)擊圖片所在按鈕 不做任何操作 if (preIndex == buttonIndex) { return; } CGFloat width = [UIScreen mainScreen].bounds.size.width; float r = 2 * width / sqrt(3); //加入動(dòng)畫(huà)效果 CALayer *transitionLayer = [[CALayer alloc] init]; //顯式事務(wù)默認(rèn)開(kāi)啟動(dòng)畫(huà)效果,kCFBooleanTrue關(guān)閉 保證begin和commit 之間的屬性修改同時(shí)進(jìn)行 transitionLayer.contents = self.head.layer.contents; transitionLayer.borderColor = [UIColor greenColor].CGColor; transitionLayer.masksToBounds = YES; transitionLayer.cornerRadius = 25; transitionLayer.borderWidth = 2.0f; transitionLayer.frame = self.head.frame; transitionLayer.backgroundColor=[UIColor blueColor].CGColor; [self.layer addSublayer:transitionLayer]; self.head.hidden = YES; UIBezierPath *movePath; //路徑曲線 貝塞爾曲線 if (buttonIndex > preIndex) { // 向上滑 逆時(shí)針 movePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(0, 0) radius:r startAngle:[self getAnticlockwiseByIndex:preIndex] endAngle:[self getAnticlockwiseByIndex:buttonIndex] clockwise:NO]; [movePath moveToPoint:transitionLayer.position]; }else { // 向下滑 順時(shí)針 movePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(0, 0) radius:r startAngle:[self getClockwiseAngleByIndex:preIndex] endAngle:[self getClockwiseAngleByIndex:buttonIndex] clockwise:YES]; [movePath moveToPoint:transitionLayer.position]; } //關(guān)鍵幀動(dòng)畫(huà)效果 CAKeyframeAnimation *positionAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; // 動(dòng)畫(huà)軌跡 positionAnimation.path = movePath.CGPath; // 動(dòng)畫(huà)完成之后是否刪除動(dòng)畫(huà)效果 positionAnimation.removedOnCompletion = NO; // 設(shè)置開(kāi)始的時(shí)間 positionAnimation.beginTime = CACurrentMediaTime(); CGFloat time = 0.7; if (labs(buttonIndex - preIndex) > 1) { time = 0.4 * labs(buttonIndex - preIndex); } //動(dòng)畫(huà)總時(shí)間 positionAnimation.duration = time; // 動(dòng)畫(huà)的方式 淡入淡出 positionAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]; // 執(zhí)行完之后保存最新的狀態(tài) positionAnimation.fillMode = kCAFillModeForwards; // 動(dòng)畫(huà)完成之后,是否回到原來(lái)的地方 positionAnimation.autoreverses= NO; [transitionLayer addAnimation:positionAnimation forKey:@"opacity"]; [CATransaction setCompletionBlock:^{ [NSThread sleepForTimeInterval:time]; self.head.hidden = NO; self.head.frame = button.frame; [transitionLayer removeFromSuperlayer]; }]; } // 根據(jù)Index獲得順時(shí)針的弧度 - (float)getAnticlockwiseByIndex: (NSInteger)index { return M_PI * (0.5 - (7.5 + 15 * index) / 180); } // 根據(jù)Index獲得逆時(shí)針的弧度 - (float)getClockwiseAngleByIndex: (NSInteger)index { index = 3 - index; return M_PI * (30 + 7.5 + 15 * index) / 180; }
這個(gè)動(dòng)畫(huà)的難點(diǎn)其實(shí)是確定四個(gè)按鈕的坐標(biāo)以及圓弧的半徑,主要是學(xué)的數(shù)學(xué)都忘的差不多了,還好重新?lián)炱饋?lái)還算不難。
以上所述是小編給大家介紹的iOS動(dòng)畫(huà)案例(1) 類(lèi)似于qq賬號(hào)信息里的一個(gè)動(dòng)畫(huà)效果,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。