ios - 求助如图所示动画怎么做

问题描述

问 题

如图，用strokeStart和strokeEnd实现不了，不知道怎么做了

解决方案

提供个思路 这个应该是用三层 第一层是一个固定的背景就是灰色的哪个。上面两个白色的覆盖层分别用strokeStart和strokeEnd实现循环的效果

#import "AnimationView.h"

@interface AnimationView ()

@property (nonatomic, strong) CAShapeLayer *path2;
@property (nonatomic, strong) CAShapeLayer *path3;
@property (nonatomic, strong) NSTimer * animationTimer;
@end

@implementation AnimationView


- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self setupLayers];
       
       self.animationTimer = [NSTimer scheduledTimerWithTimeInterval:1.113 target:self selector:@selector(loop) userInfo:nil repeats:YES];
        [[NSRunLoop currentRunLoop]addTimer:self.animationTimer forMode:NSDefaultRunLoopMode];

    }
    return self;
}

- (void)loop{
    [self.path2 addAnimation:[self path2Animation] forKey:@"path2Animation"];
    [self.path3 addAnimation:[self path3Animation] forKey:@"path3Animation"];

}


- (void)setupLayers{
    CAShapeLayer * path = [CAShapeLayer layer];
    path.frame       = CGRectMake(12.67, 11.38, 19.8, 23.25);
    path.lineCap     = kCALineCapRound;
    path.fillColor   = nil;
    path.strokeColor = [UIColor blackColor].CGColor;
    path.lineWidth   = 2;
    path.path        = [self pathPath].CGPath;
    [self.layer addSublayer:path];
    
    CAShapeLayer * path2 = [CAShapeLayer layer];
    path2.frame       = CGRectMake(12.67, 11.38, 19.8, 23.25);
    path2.lineCap     = kCALineCapRound;
    path2.fillColor   = nil;
    path2.strokeColor = [UIColor whiteColor].CGColor;
    path2.lineWidth   = 2;
    path2.path        = [self path2Path].CGPath;
    [self.layer addSublayer:path2];
    _path2 = path2;
    
    CAShapeLayer * path3 = [CAShapeLayer layer];
    path3.frame       = CGRectMake(12.67, 11.38, 19.8, 23.25);
    path3.lineCap     = kCALineCapSquare;
    path3.fillColor   = nil;
    path3.strokeColor = [UIColor whiteColor].CGColor;
    path3.lineWidth   = 2;
    path3.path        = [self path3Path].CGPath;
    [self.layer addSublayer:path3];
    _path3 = path3;
}



- (CAAnimationGroup*)path2Animation{
    CABasicAnimation * strokeStartAnim = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
    strokeStartAnim.fromValue          = @0.9;
    strokeStartAnim.toValue            = @0;
    strokeStartAnim.duration           = 1;
    strokeStartAnim.timingFunction     = [CAMediaTimingFunction functionWithControlPoints:0 :0 :0 :0];
    
    CAKeyframeAnimation * strokeEndAnim = [CAKeyframeAnimation animationWithKeyPath:@"strokeEnd"];
    strokeEndAnim.values                = @[@1, @0];
    strokeEndAnim.keyTimes              = @[@0, @1];
    strokeEndAnim.duration              = 1.01;
    strokeEndAnim.beginTime             = 0.1;
    strokeEndAnim.timingFunction        = [CAMediaTimingFunction functionWithControlPoints:0 :0 :0 :0];
    
    CAAnimationGroup *pathAnimGroup   = [CAAnimationGroup animation];
    pathAnimGroup.animations          = @[strokeStartAnim, strokeEndAnim];
    [pathAnimGroup.animations setValue:kCAFillModeForwards forKeyPath:@"fillMode"];
    pathAnimGroup.fillMode            = kCAFillModeForwards;
    pathAnimGroup.removedOnCompletion = NO;
    pathAnimGroup.duration = [self maxDurationFromAnimations:pathAnimGroup.animations];
    
    
    return pathAnimGroup;
}

- (CAAnimationGroup*)path3Animation{
    CABasicAnimation * strokeStartAnim = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
    strokeStartAnim.fromValue          = @1;
    strokeStartAnim.toValue            = @0.9;
    strokeStartAnim.duration           = 0.0785;
    strokeStartAnim.beginTime          = 1;
    strokeStartAnim.timingFunction     = [CAMediaTimingFunction functionWithControlPoints:0 :0 :0 :0];
    
    CAKeyframeAnimation * hiddenAnim = [CAKeyframeAnimation animationWithKeyPath:@"hidden"];
    hiddenAnim.values                = @[@YES, @YES, @YES, @NO];
    hiddenAnim.keyTimes              = @[@0, @0.433, @0.999, @1];
    hiddenAnim.duration              = 1.01;
    
    CAAnimationGroup *pathAnimGroup   = [CAAnimationGroup animation];
    pathAnimGroup.animations          = @[strokeStartAnim, hiddenAnim];
    [pathAnimGroup.animations setValue:kCAFillModeForwards forKeyPath:@"fillMode"];
    pathAnimGroup.fillMode            = kCAFillModeForwards;
    pathAnimGroup.removedOnCompletion = NO;
    pathAnimGroup.duration = [self maxDurationFromAnimations:pathAnimGroup.animations];
    
    
    return pathAnimGroup;
}

#pragma mark - Bezier Path

- (UIBezierPath*)pathPath{
    UIBezierPath *pathPath = [UIBezierPath bezierPath];
    [pathPath moveToPoint:CGPointMake(0, 0)];
    [pathPath addCurveToPoint:CGPointMake(0.408, 23.253) controlPoint1:CGPointMake(0, -0.115) controlPoint2:CGPointMake(0.408, 23.253)];
    [pathPath addLineToPoint:CGPointMake(19.799, 12.881)];
    [pathPath addCurveToPoint:CGPointMake(0, 0) controlPoint1:CGPointMake(19.799, 12.881) controlPoint2:CGPointMake(0, 0.116)];
    
    return pathPath;
}

- (UIBezierPath*)path2Path{
    UIBezierPath *path2Path = [UIBezierPath bezierPath];
    [path2Path moveToPoint:CGPointMake(0, 0)];
    [path2Path addCurveToPoint:CGPointMake(0.408, 23.253) controlPoint1:CGPointMake(0, -0.115) controlPoint2:CGPointMake(0.408, 23.253)];
    [path2Path addLineToPoint:CGPointMake(19.799, 12.881)];
    [path2Path addCurveToPoint:CGPointMake(0, 0) controlPoint1:CGPointMake(19.799, 12.881) controlPoint2:CGPointMake(0, 0.116)];
    
    return path2Path;
}

- (UIBezierPath*)path3Path{
    UIBezierPath *path3Path = [UIBezierPath bezierPath];
    [path3Path moveToPoint:CGPointMake(0, 0)];
    [path3Path addCurveToPoint:CGPointMake(0.408, 23.253) controlPoint1:CGPointMake(0, -0.115) controlPoint2:CGPointMake(0.408, 23.253)];
    [path3Path addLineToPoint:CGPointMake(19.799, 12.881)];
    [path3Path addCurveToPoint:CGPointMake(0, 0) controlPoint1:CGPointMake(19.799, 12.881) controlPoint2:CGPointMake(0, 0.116)];
    
    return path3Path;
}

- (CGFloat)maxDurationFromAnimations:(NSArray*)anims{
    CGFloat maxDuration = 0;
    for (CAAnimation *anim in anims) {
        maxDuration = MAX(anim.beginTime + anim.duration * (CGFloat)(anim.repeatCount == 0 ? 1.0f : anim.repeatCount) * (anim.autoreverses ? 2.0f : 1.0f), maxDuration);
    }
    if (maxDuration == INFINITY) {
        maxDuration = 1000.0f;
    }
    
    return maxDuration;
}

-(void)dealloc {

//自己取消 定时器
}

这篇关于ios - 求助如图所示动画怎么做的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！