IOS those simple animations (not regularly updated)

About Core Animation

Core Animation is a very powerful set of animation processing API, using it to make a lot of elegant animation effects. There are 4 subclasses of animation classes available: CABasicAnimation, CAKeyframeAnimation, CATransition, and CAAnimationGroup

Development steps:

Initialize an animated object (CAAnimation) and set up some animation related attributes. Add animation objects to the layer (CALayer), began to implement animation. Many properties in CALayer can be achieved through the CAAnimation animation, including opacity, position, transform, bounds, contents, specifically in the API document search by calling CALayer the increase of addAnimation:forKey: animation to the layer (CALayer), which can trigger animation. By calling the removeAnimationForKey: layer can stop the animation.

Note: the animation execution of Core Animation is performed in the background without blocking the main thread

The attributes you might use when creating an animation

attribute unscramble
Autoreverses When this property is set to YES, after it reaches the destination, the animation returns to the initial value instead of the direct jump to the beginning of the value, and the transition is smooth
Duration Set the time at which the start value ends. The period will be affected by the attributes of speed
RemovedOnCompletion This property defaults to YES, and the animation is automatically removed from the layer after the specified period of time is finished.
FillMode This property is commonly used in conjunction with RemovedOnCompletion to maintain animation status. Where kCAFillModeForwards, when the animation is finished, layer will maintain the final state of the animation. At this point, RemovedOnCompletion is set to NO
Speed The default value is 1.0.. If you change the value to 2, the animation will be played at 2 times the speed. The effect is to halve the duration. If you specify a duration of 6 seconds, and the speed is 2, the animation will play 3 seconds, or half of the duration.
RepeatCount The default is 0, and the animation will only be played once. If you specify an infinite number of repetitions, use MAXFLOAT. This should not be used with the repeatDration attribute
RepeatDuration This property specifies how long the animation should be repeated. The animation will be repeated until the set time runs out. Ditto, it should not be used with repeatCount
FromValue Sets the initial value of the animation
ToValue Sets the animation’s value of arrival
TimingFunction Control of animation operation rhythm. KCAMediaTimingFunctionLinear (linear): uniform, give you a relatively static feeling kCAMediaTimingFunctionEaseIn (gradual): animation slowly into and leave the kCAMediaTimingFunctionEaseOut acceleration (fade out): animation into full, and then slow to arrive at the destination kCAMediaTimingFunctionEaseInEaseOut (gradually progressive): slow animation into intermediate acceleration then, the speed to reach the destination. This is the default animation behavior.
BeginTime Can be used to set the animation delay execution time. If you want to delay 1s, set it to CACurrentMediaTime () +1, CACurrentMediaTime () as the current time of the layer

The clever use of these attributes makes great animation effects, such as the following: animations implemented in CABasicAnimation

CABasicAnimation animation

Simple breathing and rocking animation

IOS those simple animations (not regularly updated)

simple code

1 *animation =[CABasicAnimation animationWithKeyPath:@ respiratory animation CABasicAnimation "Opacity"]; animation.fromValue [NSNumber = numberWithFloat:1.0f]; animation.toValue = [NSNumber numberWithFloat:0.0f]; animation.autoreverses = YES; / / return (reversible cyclic animation, animation) animation.duration = 1.0F; animation.repeatCount = MAXFLOAT; animation.removedOnCompletion = NO; animation.fillMode = kCAFillModeForwards; //removedOnCompletion, fillMode with animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn] animation keep complete effect; [self.alphaTagButton.layer addAnimation:animation forKey:@ "aAlpha"]; 2 swing animation / / set rotation origin self.shark TagButton.layer.anchorPoint = CGPointMake (0.5, 0); CABasicAnimation* rotationAnimation = [CABasicAnimation animationWithKeyPath:@ "transform.rotation.z"]; / / angle radian (here in 1, -1 simply deal with it) [rotationAnimation.toValue = NSNumber numberWithFloat:1]; rotationAnimation.fromValue [NSNumber = numberWithFloat:-1]; rotationAnimation.duration = 1.0F; rotationAnimation.repeatCount = MAXFLOAT; rotationAnimation.removedOnCompletion = NO; rotationAnimation.autoreverses = YES; rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut] rotationAnimation.fillMode = kCAFillModeForwards; [self.sharkTagButton.layer; addAnimation:rotationAnima Tion, forKey:@, "revItUpAnimation"];

The gyroscope & the animation of the accelerometer

Ps: well, this is a mess, and the swing animation above almost effect, but this is manual, ha ha

3, the accelerometer gyroscope & self.motionManager = [[CMMotionManager alloc] init] animation; self.motionManager.deviceMotionUpdateInterval = 1.0f/100.0f; / / 1 100 self.sharkTagButton.layer.anchorPoint = CGPointMake (0.5, 0); [self.motionManager startDeviceMotionUpdatesToQueue:[NSOperationQueue currentQueue] withHandler:^ (CMDeviceMotion *motion, NSError *error) {if (Fabs (motion.attitude.roll) < 1.0F) {[UIView animateWithDuration:0.6 animations:^{= CATransform3DMakeRotation (- self.sharkTagButton.layer.transform (motion.attitude.roll), 0, 0, 1);}];}else if (Fabs (motion.attitude.roll) < 1.5f) {[UIView animateWithDuration:0.6 animations:^{ Int s; if (motion.attitude.roll> 0) {s=-1;}else {s} = 1; self.sharkTagButton.layer.transform = CATransform3DMakeRotation (s*M_PI_2, 0, 0, 1);}]}; if ((motion.attitude.pitch) < 0) {[UIView animateWithDuration: 0.6 animations:^{self.sharkTagButton.layer.transform = CATransform3DMakeRotation (M_PI, 0, 0, 1);}];}]};

Demo address:

CATransition’s simple transition animation

CAAnimation subclass, used to do transition animations, can provide layers for moving out of the screen and moving into the screen’s animation effects.

attribute unscramble
Type Animation transition type
Subtype Animation transition direction
  • Common animation types:
Value of type unscramble Corresponding constant
Fade Fade in KCATransitionFade
Push Push KCATransitionPush
Reveal Open KCATransitionReveal
MoveIn cover KCATransitionMoveIn
Cube Cube Private API
SuckEffect Suck Private API
OglFlip Flip Private API
RippleEffect Ripple Private API
PageCurl Reverse page Private API
CameraIrisHollowOpen Lens Private API
CameraIrisHollowClose Turn off Private API

Note: private API can only be used by strings

  • Transition direction parameter:
Value of subtype unscramble
KCATransitionFromRight Right transition
KCATransitionFromLeft Transition from left
KCATransitionFromBottom Down field
KCATransitionFromTop Transition field

Simple CATransition animation,

IOS those simple animations (not regularly updated)
- (void) animationWithType: (NSString*) type {//- create a transition Animation: CATransition *transition [CATransition = animation]; transition.repeatCount = 5; / / - determine the type of animation: transition.type = type; / / - identified sub type (direction) transition.subtype = kCATransitionFromLeft; / / - Determination of animation time transition.duration = 1; / / add animation [self.imageView.layer addAnimation:transition forKey:nil];}

Just use the type of animation you want to use, and private API can only be used by strings.

[self animationWithType:self.dataArray[indexPath.row]];

DEMO address:

—20160908 update


Core Animation is a very powerful set of animation processing API, using it to make a lot of elegant animation effects. There are 4 subclasses of animation classes available: CABasicAnimation, CAKeyframeAnimation, CATransition, and CAAnimationGroup
  • 1 Introduction CAKeyframeAnimation is a subclass of CApropertyAnimation, with the CABasicAnimation difference is: CABasicAnimation only from a numerical (fromValue) to another number (toValue), and CAKeyframeAnimation will use a NSArray to save the values, is a more flexible way of animation.
  • 2. property introduction
attribute unscramble
Values NSArray objects, the elements inside are called key frames (keyframe). The animation object displays each key frame in the values array in turn at the specified time (duration)
Path You can set a CGPathRef/CGMutablePathRef that lets the layer move along the path. Path works only for position’s anchorPoint and CALayer. If you set up path, then values will be ignored
KeyTimes You can specify the time points for the corresponding key frames, its range is [0,1], every time keyTimes values corresponding to each frame in values. When keyTimes is not set when each key frame time is money
  • 3. to achieve the 3.1 values way to achieve

    CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];

    animation.keyPath = @"position";

    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(50, 50)];

    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(kWindowWidth - 50, 50)];

    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(kWindowWidth - 50, kWindowHeight-50)];

    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(50, kWindowHeight-50)];

    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(50, 50)];

    animation.values = @[value1,value2,value3,value4,value5];
    animation.repeatCount = MAXFLOAT;

    animation.removedOnCompletion = NO;

    animation.fillMode = kCAFillModeForwards;

    animation.duration = 6.0f;

    animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    [self.keyButton.layer addAnimation:animation forKey:@"values"];

  • 3.2 path mode implementation
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];

    animation.keyPath = @"position";

    CGMutablePathRef path = CGPathCreateMutable();

    CGPathAddRect(path, NULL, CGRectMake(50,50, kWindowWidth - 100,kWindowHeight - 100));



    animation.repeatCount = MAXFLOAT;

    animation.removedOnCompletion = NO;

    animation.fillMode = kCAFillModeForwards;

    animation.duration = 10.0f;

    animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    [self.keyButton.layer addAnimation:animation forKey:@"path"];

  • 3.3 keyTimes demo

    CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
//    animation.keyPath = @"transform.translation.x";
    animation.keyPath = @"position.x";
    animation.values = @[@0, @20, @-20, @20, @0];
    animation.keyTimes = @[ @0, @(1 / 6.0), @(3 / 6.0), @(5 / 6.0), @1 ];
    animation.duration = 0.5;
    animation.additive = YES;
    [self.sharkTagButton.layer addAnimation:animation forKey:@"keyTimes"];





IOS those simple animations (not regularly updated)




    CABasicAnimation * animationScale = [CABasicAnimation animation];
    animationScale.keyPath = @"transform.scale";
    animationScale.toValue = @(0.1);

    CABasicAnimation *animationRota = [CABasicAnimation animation];
    animationRota.keyPath = @"transform.rotation";
    animationRota.toValue = @(M_PI_2);

    CAAnimationGroup * group = [[CAAnimationGroup alloc] init];
    group.duration = 3.0;
    group.fillMode = kCAFillModeForwards;
    group.removedOnCompletion = NO;
    group.repeatCount = MAXFLOAT;

    group.animations = @[animationScale,animationRota];
    [self.groupButton.layer addAnimation:group forKey:nil];



attribute unscramble
Transform.rotation.x Turn around the X axis. Y, Z same argument: angle
Transform.rotation Defaults around the Z axis
Transform.scale.x X direction zoom. Y, Z, the same
Transform.scale Zoom in all directions
Transform.translation.x X axis direction, parameter: coordinates on the X axis. Y, Z, the same
Transform.translation Moving point
ZPosition Plane position
Opacity transparency
BackgroundColor Background color parameter: color (ID) [[UIColor redColor] CGColor]
CornerRadius Layer fillet
BorderWidth Border width
Bounds Size parameter: CGRect
Contents Content parameter: CGImage
ContentsRect Visual content parameter: the CGRect value is a decimal between 0~1
Position Position, effect is similar to transform.rotation
ShadowColor Shadow color
ShadowOffset Shadow offset
ShadowOpacity Shadow transparency
ShadowRadius Shadow angle

或者关注 我的专题 每周至少5篇更新,多谢支持哈。