国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 系統 > iOS > 正文

IOS 圓球沿著橢圓軌跡做動畫

2020-07-26 03:13:40
字體:
來源:轉載
供稿:網友

前言:最近公司項目有個需求,需要實現讓一個view沿著橢圓軌跡做動畫,效果實現后,就自己封裝做了一個小demo,使用更方便。先看效果:

橢圓.gif

效果圖中的白色橢圓軌跡線其實是用貝塞爾曲線畫出來的,為了清晰的看出來運動的軌跡。其實項目中是不顯示軌跡線的,也就是小球是懸空運動的。若不需要刪除掉即可。

實現步驟:

1.首先設定關鍵幀動畫CAKeyframeAnimation的一些屬性,比如運動時間和重復次數和calculationMode模式,我們選擇kCAAnimationPaced 使得動畫均勻進行。

  CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];  pathAnimation.calculationMode = kCAAnimationPaced;  pathAnimation.fillMode = kCAFillModeForwards;  pathAnimation.removedOnCompletion = NO;  pathAnimation.duration = 5.0;  pathAnimation.repeatCount = 2;

2.設定好關鍵幀動畫的path,即一個橢圓形的路徑。需要使用CGPathAddArc,CGPathAddArc經常用于畫正圓,比如下面就是一個正圓,各個參數的意義:

 //160,200為圓心,100為半徑 (startAngle,endAngle)為起始角度和結束角度,1為順時針,0 為逆時針
 CGPathAddArc(curvedPath, NULL, 160,200, 100, startAngle, endAngle, 0);

需要注意的是由于iOS中的坐標體系是和Quartz坐標體系中Y軸相反的,所以iOS UIView在做Quartz繪圖時,Y軸已經做了Scale為-1的轉換,因此造成CGPathAddArc函數最后一個是否是順時針的參數結果正好是相反的,也就是說如果設置最后的參數為YES,根據參數定義應該是順時針的,但實際繪圖結果會是逆時針的!

我們需要畫的是橢圓啊,別急,接下來稍作更改即可。正圓第二個參數默認為NULL,我們要改成橢圓,

//短半軸和長半軸的比例  float radiuscale = 0.5;  //橢圓頂點的坐標值  CGFloat origin_x = self.frame.size.width/2;  CGFloat origin_y = self.frame.size.height/2;  //長半軸的長  CGFloat radiusX = 100;  CGMutablePathRef curvedPath = CGPathCreateMutable();  CGAffineTransform t2 = CGAffineTransformConcat(CGAffineTransformConcat(                                      CGAffineTransformMakeTranslation(-origin_x, -origin_y),                                      CGAffineTransformMakeScale(1, radiuscale)),                          CGAffineTransformMakeTranslation(origin_x, origin_y));  CGPathAddArc(curvedPath, &t2, origin_x, origin_y, radiusX,startAngle,endAngle, 1);  pathAnimation.path = curvedPath;  CGPathRelease(curvedPath);

好了,至此,動畫的軌跡和屬性都寫好了。添加到view上就ok了。

3.貝塞爾畫橢圓

如果是整個橢圓的話,只需要設定好理想中的橢圓的外切圓即可。

  //整個橢圓  CGContextRef context = UIGraphicsGetCurrentContext();  CGContextSaveGState(context);  UIBezierPath *arc = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(origin_x-100, origin_y-50, 200, 100)];  [[UIColor whiteColor] setStroke];  [arc stroke];  CGContextRestoreGState(context);

總結: 希望本文能對你有幫助。如果你有更好的想法,歡迎和我交流!
demo地址:https://github.com/xiaochenyi/CircleAnimateDemo

文/秋雨W(簡書作者)
原文鏈接:http://www.jianshu.com/p/d8cc02e7efa7
著作權歸作者所有,轉載請聯系作者獲得授權,并標注“簡書作者”。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 万山特区| 饶河县| 财经| 周宁县| 新疆| 马龙县| 十堰市| 诸暨市| 新巴尔虎左旗| 麟游县| 镇宁| 沙坪坝区| 尤溪县| 开原市| 达日县| 图们市| 抚州市| 西华县| 天台县| 扬州市| 秦皇岛市| 容城县| 上栗县| 宽甸| 洛阳市| 兴化市| 定远县| 张家界市| 于田县| 高邮市| 太康县| 峨眉山市| 金平| 迁安市| 买车| 南溪县| 蛟河市| 仁布县| 盱眙县| 枝江市| 巴中市|