[IOS development series] simple animation effects, ios development Animation

[IOS development series] simple animation effects, ios development Animation

CABasicAnimation has only three properties.

FromValue toValue ByValue

When you create a CABasicAnimation, you need to use-setFromValue and-setToValue to specify a start value and end value. When you add the basic animation to the layer, it starts to run. When an animation is completed with an attribute, for example, a position attribute is used as an animation, the layer immediately returns to its initial position.

Remember that when you make an animation, you must use at least two objects. These objects are all layers, objects inherited by a layer or layer, and CABasicAnimation objects you have allocated to the layer in the previous example. Because you set the final value (destination) for the animation object, but it does not mean that when the animation is completed, the attribute of the layer changes to the final value. When the animation is complete, you must display the properties of the Set layer. In this way, after the animation ends, your layer can truly reach the property value you set.

You can simply stop the animation until the animation ends, but this is just a visual effect. The actual value of the layer is still the same. To really change the internal value, as you mentioned earlier, you must set the attribute. For example, you need to call the-setPosition method in the layer to set the position attribute displayed. However, this may cause some problems.

If you use the-set Method to display the set layer attribute value, the default animation will be executed instead of the previously set animation. Note that we have created a base animation using position, but we explicitly call the-setPosition method on the layer to overwrite the animation we set, the basic animation we set is useless. If you use this code, you will see that although we put the correct position at the end of the layer, it uses the default 0.25 s, instead of displaying the set 5 seconds in the animation.

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];[animation setFromValue:[NSValue valueWithPoint:startPoint]];[animation setToValue:[NSValue valueWithPoint:endPoint]];[animation setDuration:5.0];[layer setPosition:endpoint];[layer addAnimation:animation forKey:nil];

So now the problem arises. How can you use the animation we set? Note that forKey: this parameter is set to nil. This is why the animation cannot overwrite the default animation. If you change the last line to [layer addAnimation: animation forKey: @ "position"], the animation will work at the specified time. This tells the layer to use the new animation we specify for the key path when animation is required.

 

The following are some useful attributes of inheritance:

Autoreverses

When you set this attribute to YES, after it reaches the destination, the animation returns to the starting value, instead of directly redirecting to the starting value.

Duration
You are quite familiar with the Duration parameter. It sets the time spent from the start value to the end value. It will be affected by the speed attribute. The default value of RemovedOnCompletion is YES, which means that the animation is automatically removed from the layer after the specified time period is completed. This is generally not required. If you want to use this animation again, you need to set this attribute to NO. In this way, the next time you use the-set method to set the attributes of an animation, it will use your animation again, instead of the default animation.

Speed

The default value is 1. 0. This means that the animation is played at the default speed. If you change the value to 2.0, the animation will be played at twice the speed. This effect is to reduce the duration by half. If the duration you specify is 6 seconds and the speed is 2.0, the animation will be played for 3 seconds-half of the duration.

BeginTime

This attribute is useful in group animation. It specifies the start time of the animation based on the duration of the parent animation group. The default value is 0. 0. The Group Animation will discuss "Animation Grouping" in the next section ".

TimeOffset

If a time offset is set, the animation will not be truly visible until the time obtained based on the execution time in the parent animation group passes.

RepeatCount

The default value is 0, indicating that the animation is played only once. If you specify an infinite number of repetitions, use 1e100f. This should not be used with the repeatDration attribute.

RepeatDuration

This attribute specifies how long the animation should be repeated. The animation repeats until the specified time passes. It should not be used with repeatCount.

The following is an English Excerpt from Apple's official document, which describes how to use fromValue toValue ByValue.

/* The interpolation values are used as follows: *//**  *  Both fromValue and toValue are non-nil. Interpolates between fromValue and toValue.  *  fromValue and byValue are non-nil. Interpolates between fromValue and (fromValue + byValue).  *  byValue and toValue are non-nil. Interpolates between (toValue - byValue) and toValue.  *  fromValue is non-nil. Interpolates between fromValue and the current presentation value of the property.  *  toValue is non-nil. Interpolates between the current value of keyPath in the target layer’s presentation layer andtoValue.  *  byValue is non-nil. Interpolates between the current value of keyPath in the target layer’s presentation layer and that value  *  plus byValue.  *  All properties are nil. Interpolates between the previous value of keyPath in the target layer’s presentation layer and the  * current value of keyPath in the target layer’s presentation layer.  */

/* ------------------------------------------------ * Other methods or attributes are inherited. * You can use the animation withkeypath key-value pair to change the animation. -------------------------------------------------- * // * The value of animationWithKeyPath */transform. scale // proportional conversion transform. scale. x // convert the width ratio to transform. scale. y // converts the height ratio to transform. rotation. z // map conversion margin // edge zPosition // z axis position backgroundColor // background color cornerRadius // border borderWidth // Border width bounds // border contents // content contentsRect // content rectangular frame // frame hidden // hidden mask // mask masksToBounds // mask boundary opacity // transparency position // position shadowColor // shadowColor shadowOffset // shadowOpacity/ /shadowRadius with opacity // shadowRadius

The following are some examples:

/*** Transform. scale */CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath: @ "transform. scale "]; animation. timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut]; animation. duration = 0.5 + (rand () % 10) * 0.05; animation. repeatCount = 1; animation. autoreverses = YES; animation. fromValue = [NSNumber numberWithFloat :. 8]; animation. toValue = [NSNumber numberWithFloat: 1.2]; [self. ui_View.layer addAnimation: animation forKey: nil];/*** bounds boundary */CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath: @ "bounds"]; animation. duration = 1.f; animation. fromValue = [NSValue valueWithCGRect: CGRectMake (,)]; animation. toValue = [NSValue valueWithCGRect: CGRectMake (200,200,)]; animation. byValue = [NSValue valueWithCGRect: self. ui_View.bounds]; // anim. toValue = (id) [UIColor redColor]. CGColor; // anim. fromValue = (id) [UIColor blackColor]. CGColor; animation. timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut]; animation. repeatCount = 1; animation. autoreverses = YES; [ui_View.layer addAnimation: animation forKey: nil];/*** cornerRadius Arc Radius */CABasicAnimation * animation = [CABasicAnimation radius: @ "cornerRadius"]; animation. duration = 1.f; animation. fromValue = [NSNumber numberWithFloat: 0.f]; animation. toValue = [NSNumber numberWithFloat: systf]; animation. timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut]; animation. repeatCount = CGFLOAT_MAX; animation. autoreverses = YES; [ui_View.layer addAnimation: animation forKey: @ "cornerRadius"];/*** contents content */CABasicAnimation * animation = [CABasicAnimation attributes: @ "contents"]; animation. duration = 1.f; animation. fromValue = (id) [UIImage imageNamed: @ "1.jpg"]. CGImage; animation. toValue = (id) [UIImage imageNamed: @ "2.png"]. CGImage; // animation. byValue = (id) [UIImage imageNamed: @ "3.png"]. CGImage; // animation. toValue = (id) [UIColor redColor]. CGColor; // animation. fromValue = (id) [UIColor blackColor]. CGColor; animation. timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut]; animation. repeatCount = CGFLOAT_MAX; animation. autoreverses = YES; [Export addAnimation: animation forKey: nil]; [Export setShadowOffset: CGSizeMake (2, 2)]; [Export metadata: 1]; [ui_View.layer setShadowColor: [UIColor grayColor]. CGColor];/*** shadowColor */CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath: @ "shadowColor"]; animation. duration = 1.f; animation. toValue = (id) [UIColor redColor]. CGColor; animation. fromValue = (id) [UIColor blackColor]. CGColor; animation. timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut]; animation. repeatCount = CGFLOAT_MAX; animation. autoreverses = YES; [ui_View.layer addAnimation: animation forKey: nil];/*** shadowOffset shadow offset */optional * animation = [CABasicAnimation offset: @ "shadowOffset"]; animation. duration = 1.f; animation. fromValue = [NSValue valueWithCGSize: CGSizeMake (0, 0)]; animation. toValue = [NSValue valueWithCGSize: CGSizeMake (3, 3)]; animation. timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut]; animation. repeatCount = CGFLOAT_MAX; animation. autoreverses = YES; [ui_View.layer addAnimation: animation forKey: nil];/*** shadowOpacity shadow opacity */opacity * animation = [CABasicAnimation opacity: @ "shadowOpacity"]; animation. duration = 1.f; animation. fromValue = [NSNumber numberWithFloat: 0.5]; animation. toValue = [NSNumber numberWithFloat: 1]; animation. timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut]; animation. repeatCount = CGFLOAT_MAX; animation. autoreverses = YES; [ui_View.layer addAnimation: animation forKey: nil];/*** shadowRadius shadow radius */optional * animation = [CABasicAnimation mask: @ "shadowRadius"]; animation. duration = 1.f; animation. fromValue = [NSNumber numberWithFloat: 10]; animation. toValue = [NSNumber numberWithFloat: 5]; animation. timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut]; animation. repeatCount = CGFLOAT_MAX; animation. autoreverses = YES; [ui_View.layer addAnimation: animation forKey: nil];

Below are some applications

/*** Permanently blinking animation */+ (CABasicAnimation *) opacityForever_Animation :( float) time {CALayer * scaleLayer = [[CALayer alloc] init]; scaleLayer. backgroundColor = [UIColor redColor]. CGColor; scaleLayer. frame = CGRectMake (60, 20 + kYOffset, 50, 50); scaleLayer. cornerRadius = 10; CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath: @ "opacity"]; animation. fromValue = [NSNumber numberWithFloat: 1.0]; animation. toValue = [NSNumber numberWithFloat: 0.0]; animation. autoreverses = YES; animation. duration = time; animation. repeatCount = FLT_MAX; animation. removedOnCompletion = NO; animation. fillMode = kCAFillModeForwards; return animation;}/*** animations with flashes */+ (CABasicAnimation *) opacityTimes_Animation :( float) repeatTimes durTimes :( float) time; {CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath: @ "opacity"]; animation. fromValue = [NSNumber numberWithFloat: 1.0]; animation. toValue = [NSNumber numberWithFloat: 0.4]; animation. repeatCount = repeatTimes; animation. duration = time; animation. removedOnCompletion = NO; animation. fillMode = kCAFillModeForwards; animation. timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn]; animation. autoreverses = YES; return animation;}/*** horizontal movement */+ (CABasicAnimation *) moveX :( float) time X :( NSNumber *) x {CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath: @ "transform. translation. x "]; animation. toValue = x; animation. duration = time; animation. removedOnCompletion = NO; animation. fillMode = kCAFillModeForwards; return animation;}/*** vertical movement */+ (CABasicAnimation *) moveY :( float) time Y :( NSNumber *) y {CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath: @ "transform. translation. y "]; animation. toValue = y; animation. duration = time; animation. removedOnCompletion = NO; animation. fillMode = kCAFillModeForwards; return animation;}/*** Zoom */+ (CABasicAnimation *) scale :( NSNumber *) Multiple orgin :( NSNumber *) orginMultiple durTimes :( float) time Rep :( float) repeatTimes {CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath: @ "transform. scale "]; animation. fromValue = orginMultiple; animation. toValue = Multiple; animation. duration = time; animation. autoreverses = YES; animation. repeatCount = repeatTimes; animation. removedOnCompletion = NO; animation. fillMode = kCAFillModeForwards; return animation;}/*** composite animation */+ (CAAnimationGroup *) groupAnimation :( NSArray *) animationAry durTimes :( float) time Rep :( float) repeatTimes {CAAnimationGroup * animation = [CAAnimationGroup animation]; animation. animations = animationAry; animation. duration = time; animation. repeatCount = repeatTimes; animation. removedOnCompletion = NO; animation. fillMode = kCAFillModeForwards; return animation;}/*** path animation */+ (CAKeyframeAnimation *) keyframeAniamtion :( CGMutablePathRef) path durTimes :( float) time Rep :( float) repeatTimes {CAKeyframeAnimation * animation = [CAKeyframeAnimation animationWithKeyPath: @ "position"]; animation. path = path; animation. removedOnCompletion = NO; animation. fillMode = kCAFillModeForwards; animation. timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn]; animation. autoreverses = NO; animation. duration = time; animation. repeatCount = repeatTimes; return animation;}/*** point movement */+ (CABasicAnimation *) movepoint :( CGPoint) point {CABasicAnimation * animation = [CABasicAnimation progress: @ "transform. translation "]; animation. toValue = [NSValue valueWithCGPoint: point]; animation. removedOnCompletion = NO; animation. fillMode = kCAFillModeForwards; return animation;}/*** rotate */+ (CABasicAnimation *) rotation :( float) dur degree :( float) degree ction :( int) direction repeatCount :( int) repeatCount {CATransform3D rotationTransform = convert (degree, 0, 0, ction); CABasicAnimation * animation; animation = [CABasicAnimation animation withkeypath: @ "transform"]; animation. toValue = [NSValue valueWithCATransform3D: rotationTransform]; animation. duration = dur; animation. autoreverses = NO; animation. cumulative = YES; animation. removedOnCompletion = NO; animation. fillMode = kCAFillModeForwards; animation. repeatCount = repeatCount; animation. delegate = self; return animation ;}

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.