手把手教你使用Core animation 做動畫(下)
來源：Airfei
鏈接：http://www.reibang.com/p/1e2b8ff3519e
2.上下橫線的動畫效果挂脑。
此動畫效果戚长，需要使用transform.rotation.z轉動角度。
上橫線轉動的角度順序為 0 -> 10° -> (-55°) -> (-45°)
這是一組數(shù)據(jù)，使用關鍵幀處理動畫。
CAKeyframeAnimation *rotationAnimation1 = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"];
? ?rotationAnimation1.values = @[[NSNumber numberWithFloat:0],
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? [NSNumber numberWithFloat:Radians(10) ],
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? [NSNumber numberWithFloat:Radians(-10) - M_PI_4 ],
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? [NSNumber numberWithFloat:- M_PI_4 ]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ];
下橫線轉動的角度順序為0 -> (-10°) -> (55°) -> (45°)
CAKeyframeAnimation *rotationAnimation2 = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"];
? ?rotationAnimation2.values = @[[NSNumber numberWithFloat:0],
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? [NSNumber numberWithFloat:Radians(-10) ],
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? [NSNumber numberWithFloat:Radians(10) ?+ M_PI_4 ],
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? [NSNumber numberWithFloat: M_PI_4 ]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ];
你認為這么就結束了? 最終結束的動畫如下：
發(fā)現(xiàn)相交的直線沒有居中除秀，而是靠左顯示。
向左平移，使用transform.translation.x
//平移量
? ?CGFloat toValue = lineWidth *(1- cos(M_PI_4)) /2.0;
即旋轉角度又發(fā)生偏移量瓢剿，使用組合動畫。
上橫線組合動畫
//平移x
? ?CABasicAnimation *translationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
? ?translationAnimation.fromValue = [NSNumber numberWithFloat:0];
? ?translationAnimation.toValue = [NSNumber numberWithFloat:-toValue];
//角度關鍵幀 上橫線的關鍵幀 0 - 10° - (-55°) - (-45°)
CAKeyframeAnimation *rotationAnimation1 = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"];
rotationAnimation1.values = @[[NSNumber numberWithFloat:0],
[NSNumber numberWithFloat:Radians(10) ],
[NSNumber numberWithFloat:Radians(-10) - M_PI_4 ],
[NSNumber numberWithFloat:- M_PI_4 ]
];
CAAnimationGroup *transformGroup1 = [CAAnimationGroup animation];
transformGroup1.animations = [NSArray arrayWithObjects:rotationAnimation1,translationAnimation, nil];
transformGroup1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
transformGroup1.duration = kStep3Duration;
transformGroup1.removedOnCompletion = YES;
[_topLineLayer addAnimation:transformGroup1 forKey:nil];
下橫線組合動畫
//角度關鍵幀 下橫線的關鍵幀 0 - （-10°） - (55°) - (45°)
? ?CAKeyframeAnimation *rotationAnimation2 = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"];
? ?rotationAnimation2.values = @[[NSNumber numberWithFloat:0],
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? [NSNumber numberWithFloat:Radians(-10) ],
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? [NSNumber numberWithFloat:Radians(10) + M_PI_4 ],
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? [NSNumber numberWithFloat: M_PI_4 ]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ];
CAAnimationGroup *transformGroup2 = [CAAnimationGroup animation];
transformGroup2.animations = [NSArray arrayWithObjects:rotationAnimation2,translationAnimation, nil];
transformGroup2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
transformGroup2.duration = kStep3Duration ;
transformGroup2.delegate = self;
transformGroup2.removedOnCompletion = YES;
[_bottomLineLayer addAnimation:transformGroup2 forKey:nil];
Part1到此結束悠轩。最終效果圖
Part2的思路和Part1思路是一樣的间狂。你可以參考代碼自己思考一下。核心代碼
-(void)cancelAnimation
{
? ?//最關鍵是path路徑
UIBezierPath *path = [UIBezierPath bezierPath];
//30度,經過反復測試火架，效果最好
CGFloat angle = Radians(30);
CGFloat startPointX = self.center.x + Raduis * cos(angle);
CGFloat startPointY = kCenterY - Raduis * sin(angle);
CGFloat controlPointX = self.center.x + Raduis *acos(angle);
CGFloat controlPointY = kCenterY;
CGFloat endPointX = self.center.x + lineWidth /2;
CGFloat endPointY = kCenterY;
//組合path 路徑 起點 -150° 順時針的圓
path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.center.x,kCenterY)
radius:Raduis
startAngle:-M_PI + angle
endAngle:M_PI + angle
clockwise:YES];
//起點為 180°-> (360°-30°)
UIBezierPath *path1 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.center.x,kCenterY)
radius:Raduis
startAngle:M_PI + angle
endAngle:2 * M_PI - angle
clockwise:YES];
[path appendPath:path1];
//三點曲線
UIBezierPath *path2 = [UIBezierPath bezierPath];
[path2 moveToPoint:CGPointMake(startPointX, startPointY)];
[path2 addCurveToPoint:CGPointMake(endPointX,endPointY)
controlPoint1:CGPointMake(startPointX, startPointY)
controlPoint2:CGPointMake(controlPointX, controlPointY)];
[path appendPath:path2];
//比原始狀態(tài)向左偏移5個像素
UIBezierPath *path3 = [UIBezierPath bezierPath];
[path3 moveToPoint:CGPointMake(endPointX,endPointY)];
[path3 addLineToPoint:CGPointMake(self.center.x - lineWidth/2 -5,endPointY)];
[path appendPath:path3];
_changedLayer.path = path.CGPath;
//平移量
CGFloat toValue = lineWidth *(1- cos(M_PI_4)) /2.0;
//finished 最終狀態(tài)
CGAffineTransform transform1 = CGAffineTransformMakeRotation(0);
CGAffineTransform transform2 = CGAffineTransformMakeTranslation(0, 0);
CGAffineTransform transform3 = CGAffineTransformMakeRotation(0);
CGAffineTransform transform = CGAffineTransformConcat(transform1, transform2);
_topLineLayer.affineTransform = transform;
transform = CGAffineTransformConcat(transform3, transform2);
_bottomLineLayer.affineTransform = transform;
//一個圓的長度比
CGFloat endPercent = 2* M_PI *Raduis / ([self calculateTotalLength] + lineWidth);
//橫線占總path的百分比
CGFloat percent = lineWidth / ([self calculateTotalLength] + lineWidth);
_changedLayer.strokeStart = 1.0 -percent;
CAKeyframeAnimation *startAnimation = [CAKeyframeAnimation animationWithKeyPath:@"strokeStart"];
startAnimation.values = @[@0.0,@0.3,@(1.0 -percent)];
//在π+ angle
CAKeyframeAnimation *EndAnimation = [CAKeyframeAnimation animationWithKeyPath:@"strokeEnd"];
EndAnimation.values = @[@(endPercent),@(endPercent),@1.0];
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.animations = [NSArray arrayWithObjects:startAnimation,EndAnimation, nil];
animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animationGroup.duration = kStep4Duration;
animationGroup.delegate = self;
animationGroup.removedOnCompletion = YES;
[animationGroup setValue:@"animationStep4" forKey:@"animationName"];
[_changedLayer addAnimation:animationGroup forKey:nil];
//平移x
CABasicAnimation *translationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
translationAnimation.fromValue = [NSNumber numberWithFloat:-toValue];
translationAnimation.toValue = [NSNumber numberWithFloat:0];
//角度關鍵幀 上橫線的關鍵幀 ?(-45°) -> (-55°)-> 10° -> 0
CAKeyframeAnimation *rotationAnimation1 = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"];
rotationAnimation1.values = @[[NSNumber numberWithFloat:- M_PI_4 ],
[NSNumber numberWithFloat:- Radians(10) - M_PI_4 ],
[NSNumber numberWithFloat:Radians(10) ],
[NSNumber numberWithFloat:0]
];
CAAnimationGroup *transformGroup1 = [CAAnimationGroup animation];
transformGroup1.animations = [NSArray arrayWithObjects:rotationAnimation1,translationAnimation, nil];
transformGroup1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
transformGroup1.duration = kStep4Duration;
transformGroup1.removedOnCompletion = YES;
[_topLineLayer addAnimation:transformGroup1 forKey:nil];
//角度關鍵幀 下橫線的關鍵幀 ?(45°)-> (55°)- >（-10°）-> 0
CAKeyframeAnimation *rotationAnimation2 = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"];
rotationAnimation2.values = @[[NSNumber numberWithFloat: M_PI_4 ],
[NSNumber numberWithFloat:Radians(10) + M_PI_4 ],
[NSNumber numberWithFloat:-Radians(10) ],
[NSNumber numberWithFloat:0]
];
CAAnimationGroup *transformGroup2 = [CAAnimationGroup animation];
transformGroup2.animations = [NSArray arrayWithObjects:rotationAnimation2,translationAnimation, nil];
transformGroup2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
transformGroup2.duration = kStep4Duration;
transformGroup2.delegate = self;
transformGroup2.removedOnCompletion = YES;
[_bottomLineLayer addAnimation:transformGroup2 forKey:nil];
}
最終效果圖：
本篇文章講解結束鉴象！
閱讀 6765 投訴
寫留言
?
