First, position and Anchorpoint
Position: Used to set the position of the Calayer in the parent layer, with the upper left corner of the parent layer as the origin (0, 0)
Anchorpoint (anchor point):
Known as Anchor Point, Anchor Point
Determines which point of the calayer is in the position indicated by the position attribute
In its own upper left corner as the origin (0, 0)
Its x, y range is 0~1, the default value is (0.5, 0.5)
Recommend a connection: Http://www.cnblogs.com/wendingding/p/3800736.html is very detailed, and there is a view, The default anchor point is the center point: (0.5,0.5), if you reset the anchor point, when you run the animation will find the entire control moved, so you need to set the anchor point to reset the position,
Cgpoint oldanchorpoint = _homebtn.layer.anchorpoint;
_homebtn.layer.anchorpoint =cgpointmake (0.5,0);
[_homebtn.layersetposition:cgpointmake (_homebtn.layer.position.x + _homebtn.layer.bounds.size.width * (_ Homebtn.layer.anchorpoint.x-oldanchorpoint.x), _homebtn.layer.position.y +_homebtn.layer.bounds.size.height * (_ HOMEBTN.LAYER.ANCHORPOINT.Y-OLDANCHORPOINT.Y)];
Second: the use of cabasicanimation
When you create a cabasicanimation, you need to specify a start value and an end value by-setfromvalue and-settovalue. When you add the base animation to the layer, it starts to run.
Autoreverses
When you set this property to YES, after it arrives at the destination, the animation returns to the starting value instead of jumping directly to the starting value.
Duration
Duration This parameter you are already quite familiar with. It sets the time that the start value takes to the end value. The period is affected by the properties of the speed. Removedoncompletion
This property defaults to YES, which means that the animation is automatically removed from the layer after the specified time period is complete. This is generally not used.
If you want to use this animation again, you need to set this property to NO. That way, the next time you set the properties of an animation by using the-set method, it will use your animation again, not the default animation.
Speed
The default value is 1.0. This means that the animation plays at the default speed. If you change this value to 2.0, the animation will play at twice times the speed. The effect is to halve the duration of the time. If you specify a duration of 6 seconds and a speed of 2.0, the animation will play for 3 seconds---Half the duration of the time.
BeginTime
This property is useful in group animations. It specifies when the animation starts to play, based on the duration of the parent animation group. The default is 0.0. Group Animation discusses "Animation Grouping" in the next paragraph.
Timeoffset
If a time offset is set, the animation is not really visible until the time it takes to get the execution time in the parent animation group passes.
RepeatCount
The default is 0, which means that the animation will only play once. If you specify an infinitely large number of repetitions, use 1e100f. This should not be used with the Repeatdration attribute.
RepeatDuration
This property specifies how long the animation should be repeated. The animation repeats until the set time elapses. It should not be used with repeatcount.
Example code:
?
| 123456789101112131415161718192021222324252627282930313233343536 |
CGPoint fromPoint = self.testImage.center; //路径曲线controlPoint为基准点 UIBezierPath * movePath = [UIBezierPath bezierPath]; [movePath moveToPoint:fromPoint]; CGPoint toPoint = CGPointMake(300, 460); [movePath addQuadCurveToPoint:toPoint controlPoint:CGPointMake(300, 0)]; //关键帧 设置动画路径 CAKeyframeAnimation * moveAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];// moveAnimation.path = movePath.CGPath; moveAnimation.values = @[[NSValue valueWithCGPoint:CGPointMake(100, 100)],[NSValue valueWithCGPoint:CGPointMake(100, 300)],[NSValue valueWithCGPoint:CGPointMake(300, 300)],[NSValue valueWithCGPoint:CGPointMake(300, 100)]]; moveAnimation.removedOnCompletion = YES; //缩放变化 CABasicAnimation * scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform"]; scaleAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity]; scaleAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)]; scaleAnimation.removedOnCompletion = YES; // //透明度变化// CABasicAnimation * opacityAnimation = [CABasicAnimation animationWithKeyPath:@"alpha"];// opacityAnimation.fromValue = [NSNumber numberWithFloat:1.0];// opacityAnimation.toValue = [NSNumber numberWithFloat:0.1];// opacityAnimation.removedOnCompletion = YES; //旋转 CABasicAnimation * tranformAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; tranformAnimation.fromValue = [NSNumber numberWithFloat:0.f]; tranformAnimation.toValue = [NSNumber numberWithFloat:M_PI]; tranformAnimation.cumulative = YES; tranformAnimation.removedOnCompletion = YES; CAAnimationGroup*animaGroup = [CAAnimationGroup animation]; animaGroup.animations = @[moveAnimation,scaleAnimation,tranformAnimation]; animaGroup.duration = 2.f; |
You can change the animation by changing the Animationwithkeypath:
Transform.scale = Proportional Conversion
transform.scale.x = Proportional conversion of width
Transform.scale.y = high conversion of proportions
Transform.rotation.z = rotation of the plane graph
opacity = Transparency
Margin
Zposition
BackgroundColor background Color
Cornerradius rounded Corners
BorderWidth
Bounds
Contents
Contentsrect
Cornerradius
Frame
Hidden
Mask
Maskstobounds
Opacity
Position
Shadowcolor
Shadowoffset
Shadowopacity
Shadowradius
58 with the city client, Tabbar the click of the animation effect, can be set by the Cabasicanimation property to do, the individual spent one hours of time to fix, prove fully achievable,
?
| 123456789101112131415 |
CGPoint oldAnchorPoint = _homeBtn.layer.anchorPoint; _homeBtn.layer.anchorPoint = CGPointMake(0.5, 0); [_homeBtn.layer setPosition:CGPointMake(_homeBtn.layer.position.x + _homeBtn.layer.bounds.size.width * (_homeBtn.layer.anchorPoint.x - oldAnchorPoint.x), _homeBtn.layer.position.y + _homeBtn.layer.bounds.size.height * (_homeBtn.layer.anchorPoint.y - oldAnchorPoint.y))]; CABasicAnimation*shakeAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; shakeAnimation.duration = 0.07; shakeAnimation.autoreverses = YES;//当你设定这个属性为 YES 时,在它到达目的地之后,动画的返回到开始的值,代替了直接跳转到 开始的值。 shakeAnimation.repeatCount = 2; shakeAnimation.removedOnCompletion = NO; shakeAnimation.fromValue = [NSNumber numberWithFloat:-0.05]; shakeAnimation.toValue = [NSNumber numberWithFloat:0.05]; [self.homeBtn.layer addAnimation:shakeAnimation forKey:@"shakeAnimation"]; |
iOS (coreanimation core animation) Cabasicanimation animations with anchor points