Linear repeating animation and linear Animation

Linear repeating animation and linear Animation

Linear repeating Animation

 

Effect

 

Description

Linear repetition animation can be used in the following scenarios:

1) Linear Loading effect (e.g)

2) the download arrow appears cyclically.

 

Source code

Https://github.com/YouXianMing/Animations

/// ReplicatorLineAnimationView. h // Animations // Created by YouXianMing on 16/4/12. // Copyright©2016 YouXianMing. all rights reserved. // # import <UIKit/UIKit. h> typedef enum: NSUInteger {kReplicatorLeft, kReplicatorRight, kReplicatorUp, kReplicatorDown} Comment; @ interface ReplicatorLineAnimationView: UIView/*** Animation's direction. * // @ property (nonatomic) EReplicatorLineDirection ction;/*** Animation's speed. */@ property (nonatomic) CGFloat speed;/*** Animation's image. */@ property (nonatomic, strong) UIImage * image;/*** Start animation. */-(void) startAnimation; @ end

/// ReplicatorLineAnimationView. m // Animations // Created by YouXianMing on 16/4/12. // Copyright©2016 YouXianMing. all rights reserved. // # import "ReplicatorLineAnimationView. h "@ interface fill () {comment * _ replicatorLayer; CALayer * _ animationLayer; NSString * _ animationKeyPath; CGFloat _ animationToValue; CGFloat _ offsetX; CGFloat _ offsetY; Comment _ blank; BOOL _ startAnimation;} @ end @ implementation ReplicatorLineAnimationView-(instancetype) ini TWithFrame :( CGRect) frame {if (self = [super initWithFrame: frame]) {self. speed = 2.f; _ replicatorLayer = [CAReplicatorLayer layer]; _ replicatorLayer. frame = self. bounds; [self. layer addSublayer: _ replicatorLayer]; _ animationLayer = [CALayer layer]; _ animationLayer. frame = self. bounds; [_ replicatorLayer addSublayer: _ animationLayer]; self. layer. masksToBounds = YES; [[nsicationicationcenter defaultCent Er] addObserver: self selector: @ selector (eventDidBecomeActive :) name: UIApplicationDidBecomeActiveNotification object: nil];} return self;}-(void) startAnimation {_ startAnimation = YES; if (_ animationKeyPath. length) {[_ animationLayer removeAnimationForKey: _ animationKeyPath];} [self dealWithTheEReplicatorLineDirection]; _ replicatorLayer. instanceCount = 2; _ replicatorLayer. instanceTransform = _ inst AnceTransform; _ animationLayer. contents = (_ bridge id _ Nullable) (self. image. CGImage); CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath: _ animationKeyPath]; animation. toValue = @ (_ animationToValue); animation. duration = 1.f/self. speed; animation. timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionLinear]; animation. repeatCount = HUGE_VALF; [_ animatio NLayer addAnimation: animation forKey: _ animationKeyPath];}-(void) else {if (_ direction = kReplicatorLeft | _ direction = kReplicatorRight) {_ animationKeyPath = @ "position. x "; _ offsetX = _ direction = kReplicatorLeft? Self. frame. size. width:-self. frame. size. width; _ offsetY = 0; _ animationToValue = _ animationLayer. position. x-_ offsetX; _ instanceTransform = CATransform3DMakeTranslation (_ offsetX, 0.0, 0.0);} else if (_ direction = kReplicatorUp | _ direction = kReplicatorDown) {_ animationKeyPath = @ "position. y "; _ offsetX = 0; _ offsetY = _ direction = kReplicatorUp? Self. frame. size. height:-self. frame. size. height; _ animationToValue = _ animationLayer. position. y-_ offsetY; _ instanceTransform = CATransform3DMakeTranslation (0.0, _ offsetY, 0.0) ;}}- (void) dealloc {[[nsicationicationcenter defacenter] removeObserver: self name: Your object: nil];}-(void) eventDidBecomeActive :( id) obj {NSNotification * fication = obj; if ([fication. name isEqualToString: UIApplicationDidBecomeActiveNotification]) {if (_ startAnimation = YES) {[self startAnimation] ;}}@ end

 

Details

Linear repetition animation has a direction. It has four directions for you to use:

You need to set the direction value, speed value, and an image that can be displayed cyclically. This is also required for the image. The image can be seamlessly integrated during translation:

The related animations of CALayer are automatically removed when they enter the background. Therefore, you need to manually enable the animations when entering the foreground from the background:

The core is as follows: