常用简单的动效

两种加载动效

image.png
- (void)animation1
{
    CAReplicatorLayer *layer = [[CAReplicatorLayer alloc] init];
    
    [layer setBounds:CGRectMake(0, 0, 160, 60)];
    [layer setPosition:self.view.center];
    [layer setBackgroundColor:[UIColor greenColor].CGColor];
    layer.instanceCount = 4;
    layer.instanceTransform = CATransform3DMakeTranslation(40.0, 0.0, 0.0);
    layer.instanceDelay = 0.33;
//    layer.masksToBounds = YES;
    [self.view.layer addSublayer:layer];
    
    CALayer *bar = [[CALayer alloc] init];
    [bar setBounds:CGRectMake(0, 0, 8, 40)];
    [bar setPosition:CGPointMake(10, 75)];  
    [bar setCornerRadius:2];
    [bar setBackgroundColor:[UIColor redColor].CGColor];
    [layer addSublayer:bar];
    
    CABasicAnimation *moveAnim = [CABasicAnimation animationWithKeyPath:@"position.y"];
    moveAnim.toValue = @(bar.position.y - 35.0);
    moveAnim.duration = 0.5;
    moveAnim.autoreverses = YES;
    moveAnim.repeatCount = MAXFLOAT;
    [bar addAnimation:moveAnim forKey:nil];
}



image.png

- (void)animation2
{
    CAReplicatorLayer *layer = [[CAReplicatorLayer alloc] init];
    
    [layer setBounds:CGRectMake(0, 0, 200, 200)];
    [layer setPosition:self.view.center];
    [layer setBackgroundColor:[UIColor colorWithWhite:0 alpha:0.75].CGColor];
    [layer setCornerRadius:10];
    layer.instanceColor = [UIColor redColor].CGColor;

//    layer.instanceCount = 3;
//    layer.instanceTransform = CATransform3DMakeTranslation(20.0, 0.0, 0.0);
//    layer.instanceDelay = 0.33;
    layer.masksToBounds = YES;
    [self.view.layer addSublayer:layer];
    
    CALayer *dot = [[CALayer alloc] init];
    
    dot.bounds =CGRectMake(0, 0, 14, 14) ;
    dot.position = CGPointMake(100, 40);
    dot.backgroundColor = [UIColor colorWithWhite:.8 alpha:1].CGColor;
    dot.borderColor = [UIColor colorWithWhite:1 alpha:1].CGColor;
    dot.cornerRadius = 7;
    
    [layer addSublayer:dot];
    
    NSInteger nrDots = 15;
    
    CFTimeInterval duration = 1.5;

    layer.instanceCount = nrDots;
    CGFloat angle = (CGFloat)(2*M_PI) / nrDots;
    layer.instanceTransform = CATransform3DMakeRotation(angle, 0.0, 0.0, 1.0);
    layer.instanceDelay = duration/nrDots;


    
    
    CABasicAnimation *shrink = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    shrink.fromValue = @(1.0);
    shrink.toValue = @(0.1);
    shrink.duration = duration;
    shrink.repeatCount = MAXFLOAT;
    
    [dot addAnimation:shrink forKey:nil];
}

输入框抖动动效

- (void)shake {
    CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"position.x"];
    keyFrame.duration = 0.3;
    CGFloat x = self.layer.position.x;
    keyFrame.values = @[@(x - 30), @(x - 30), @(x + 20), @(x - 20), @(x + 10), @(x - 10), @(x + 5), @(x - 5)];
    [self.layer addAnimation:keyFrame forKey:@"shake"];

}

核心动效

#if 0
    //基础动画(放大缩小)
    CABasicAnimation *scaleAnimation = [CABasicAnimation new];
    scaleAnimation.fromValue = @(1.0);
    scaleAnimation.toValue = @(0.1);
    //scaleAnimation.duration = 2.0f;
    scaleAnimation.keyPath = @"transform.scale";
    
    //动画只能添加到图层之上
    //[self.imageView.layer addAnimation:scaleAnimation forKey:@"scale"];
    
    //移除动画
    //[self.imageView.layer removeAnimationForKey:@"scale"]
    
#endif
    
    
#if 0
    //(翻转)
    CABasicAnimation *rotationAnimation = [CABasicAnimation new];
    
    rotationAnimation.keyPath = @"transform.rotation";
    //旋转90读
    rotationAnimation.toValue = @(M_PI/2.0);
    //rotationAnimation.duration = 2.0f;
    
    //[self.imageView.layer addAnimation:rotationAnimation forKey:@"rotation"];
#endif
    
    
#if 0
    //平移
    CABasicAnimation *translationAnimation = [CABasicAnimation new];
    
    translationAnimation.keyPath = @"transform.translation.y";
    translationAnimation.toValue = @(200);
    //translationAnimation.duration = 2.0f;
    
    //[self.imageView.layer addAnimation:translationAnimation forKey:@"translation"];
    
#endif
    
    
#if 0
    //组合动画
    CAAnimationGroup *groupAnimation = [CAAnimationGroup new];
    
    groupAnimation.animations = @[scaleAnimation,rotationAnimation,translationAnimation];
    
    groupAnimation.repeatCount = MAXFLOAT;
    groupAnimation.duration = 2.0;
    
    [self.imageView.layer addAnimation:groupAnimation forKey:@"group"];
    
#endif
    
    
#if 0
    //关键帧动画
    CAKeyframeAnimation *keyFramAnimation = [CAKeyframeAnimation new];
    
    keyFramAnimation.keyPath = @"position";
    keyFramAnimation.duration = 3.0;
    keyFramAnimation.repeatCount = MAXFLOAT;
    
    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(100, 300)];
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(200, 300)];
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(200, 400)];
    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(100, 400)];
    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(100, 300)];
    
    //设置移动的路径
    keyFramAnimation.values = @[value1,value2,value3,value4,value5];
    //设置动画永远处于最新的状态
    keyFramAnimation.fillMode = kCAFillModeForwards;
    //动画结束后不自动移除动画
    keyFramAnimation.removedOnCompletion = NO;
    
    //设置动画节奏
    keyFramAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    
    [self.imageView.layer addAnimation:keyFramAnimation forKey:@"keyFramAnimation"];
    
#endif
    
#if 0
    //设置转圈
    CAKeyframeAnimation *keyFramAnimation = [CAKeyframeAnimation new];
    keyFramAnimation.duration = 3.0f;
    keyFramAnimation.repeatCount = MAXFLOAT;
    
    //创建一个路径
    CGPathRef path = CGPathCreateWithEllipseInRect(CGRectMake(100, 300, 200, 300), nil);
    
    //设置路径
    keyFramAnimation.path = path;
    //控制器动画的元素是位置点
    keyFramAnimation.keyPath = @"position";
    
    //设置动画永远处于最新的状态
    keyFramAnimation.fillMode = kCAFillModeForwards;
    //动画结束后不自动移除动画
    keyFramAnimation.removedOnCompletion = NO;
    
    //设置动画节奏
    keyFramAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    
    [self.imageView.layer addAnimation:keyFramAnimation forKey:@"keyFramAnimation"];
    
#endif
    
    CAKeyframeAnimation *keyFramAnimation = [CAKeyframeAnimation new];
    
    keyFramAnimation.keyPath = @"transform.rotation";
    
    NSValue *value1 = @(M_PI_4);
    NSValue *value2 = @(-M_PI_4);
    
    keyFramAnimation.values =  @[value1,value2,value1];
    keyFramAnimation.duration = 0.1f;
    keyFramAnimation.repeatCount = MAXFLOAT;
    
    //设置动画永远处于最新的状态
    keyFramAnimation.fillMode = kCAFillModeForwards;
    //动画结束后不自动移除动画
    keyFramAnimation.removedOnCompletion = NO;
    
    [self.imageView.layer addAnimation:keyFramAnimation forKey:@"rotation"];

转场动画

- (IBAction)transitionAction:(id)sender {

    /**
     * {@"cube",@"suckEffect",@"oglFlip",@"rippleEffect",@"pageCurl",@"pageUnCurl",@"cameraIrisHollowOpen",@"cameraIrisHollowClose"};
     */
    
    //转场动画
    CATransition *transition = [CATransition new];
    //设置动画类型
    transition.type = @"oglFlip";
    //transition.subtype = kCATransitionFromLeft;
    transition.duration = 2.0f;
    
    //[self.imageView.layer addAnimation:transition forKey:@"transition"];
    
    //自定义转场动画
    [self.view.superview.layer addAnimation:transition forKey:@"transition"];
    
    UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Main" bundle:nil];
    ViewControllerA *ctlA = [storyboard instantiateViewControllerWithIdentifier:@"ViewControllerA"];
    [self presentViewController:ctlA animated:NO completion:nil];
 
}

进度条动画

-(instancetype)initWithFrame:(CGRect)frame{
    _trackLayer = [CAShapeLayer new];
        _trackLayer.fillColor = nil;
        _trackLayer.frame = self.bounds;
        [self.layer addSublayer:_trackLayer];
    
        _progressLayer = [CAShapeLayer new];
        _progressLayer.fillColor = nil;
        _progressLayer.lineCap = kCALineCapSquare;
        [self.layer addSublayer:_progressLayer];

        _progressLayer.frame = self.bounds;
        self.backgroundColor = [UIColor whiteColor];
        //默认为5
        self.progressWidth = 5;
        _progress = 0.0f;
}

-(void)setTrack{

    _trackPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2) radius:(self.bounds.size.width - _progressWidth) / 2 startAngle:0 endAngle:M_PI * 2 clockwise:YES];
    _trackLayer.path = _trackPath.CGPath;

}

-(void)setProgress{
    _progressPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2) radius:(self.bounds.size.width - _progressWidth) / 2 startAngle:0 endAngle:_progress clockwise:YES];
    _progressLayer.path = _progressPath.CGPath;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容