iOS开发之常见动画

动画效果方法
animateWithDuration:time(时间)animation:^{

}
复制代码

加特效

    [UIView animateWithDuration:1 delay:0.5 usingSpringWithDamping:0.5 initialSpringVelocity:15 options:UIViewAnimationOptionCurveEaseOut animations:^{

    } completion:nil];
复制代码

切换VC时翻页效果

    // 创建UINavigationController
    UINavigationController *vc = [[UINavigationController alloc]initWithRootViewController:[[CYXTabBarController alloc]init]];
    
    // 切换窗口的根控制器进行跳转
    [UIApplication sharedApplication].keyWindow.rootViewController = vc;
    
    CATransition *anim = [CATransition animation];
    anim.type = @"pageCurl";
    anim.duration = 1;
    [[UIApplication sharedApplication].keyWindow.layer addAnimation:anim forKey:nil];
复制代码

图标抖动

- (IBAction)beginButn:(id)sender {

    //创建动画
    CAKeyframeAnimation * keyAnimaion = [CAKeyframeAnimation animation];
    keyAnimaion.keyPath = @"transform.rotation";
    keyAnimaion.values = @[@(-10 / 180.0 * M_PI),@(10 /180.0 * M_PI),@(-10/ 180.0 * M_PI)];//度数转弧度

    keyAnimaion.removedOnCompletion = NO;
    keyAnimaion.fillMode = kCAFillModeForwards;
    keyAnimaion.duration = 0.3;
    keyAnimaion.repeatCount = MAXFLOAT;
    [self.iconImageView.layer addAnimation:keyAnimaion forKey:nil];

}
复制代码

改变frame

-(void)changeFrame{

    CGRect originalRect = self.anView.frame;
    CGRect rect = CGRectMake(self.anView.frame.origin.x-20, self.anView.frame.origin.y-120, 160, 80);

    [UIView animateWithDuration:1 animations:^{
        self.anView.frame = rect;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:1 animations:^{
            self.anView.frame = originalRect;
        }];

    }];
}
复制代码

拉伸动画

-(void)changeBounds{

    CGRect originalBounds = self.anView.bounds;
    //尽管这个rect的x,y跟原始的不同,动画也只是改变了宽高
    CGRect rect = CGRectMake(0, 0, 300, 120);

    [UIView animateWithDuration:1 animations:^{
    self.anView.bounds = rect;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:1 animations:^{
            self.anView.bounds = originalBounds;
        }];

    }];
}
复制代码

位移动画

-(void)changeCenter{

    CGPoint originalPoint = self.anView.center;
    CGPoint point = CGPointMake(self.anView.center.x, self.anView.center.y-170);

    [UIView animateWithDuration:0.3 animations:^{
        self.anView.center = point;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:1 animations:^{
            self.anView.center = originalPoint;
        }];

    }]; 
}
复制代码

旋转动画

-(void)transform{
    CGAffineTransform originalTransform = self.anView.transform;
    [UIView animateWithDuration:2 animations:^{
        //self.anView.transform = CGAffineTransformMakeScale(0.6, 0.6);//缩放
        //self.anView.transform = CGAffineTransformMakeTranslation(60, -60);
        self.anView.transform = CGAffineTransformMakeRotation(4.0f);

    } completion:^(BOOL finished) {
        [UIView animateWithDuration:2 animations:^{
            self.anView.transform = originalTransform;

        }];
    }];
}
复制代码

翻转动画

-(void)transitionAnimation{
    [UIView transitionWithView:self.anView duration:2.0 options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{
        //self.anView.backgroundColor = [UIColor blueColor];
    } completion:^(BOOL finished) {
        [UIView transitionWithView:self.anView duration:2.0 options:UIViewAnimationOptionTransitionFlipFromRight animations:^{
        //self.anView.backgroundColor = [UIColor greenColor];
        } completion:^(BOOL finished) {

        }];
    }];
}
复制代码

透明度动画

-(void)alpha{
    [UIView animateWithDuration:2 animations:^{
        self.anView.alpha = 0.3;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:2 animations:^{
            self.anView.alpha = 1;
        }];

    }];
}
复制代码

背景变化

-(void)changeBackground{

    [UIView animateKeyframesWithDuration:9.0 delay:0.f options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{
        [UIView addKeyframeWithRelativeStartTime:0.f relativeDuration:1.0 / 4 animations:^{
            self.anView.backgroundColor = [UIColor colorWithRed:0.9475 green:0.1921 blue:0.1746 alpha:1.0];
        }];
        [UIView addKeyframeWithRelativeStartTime:1.0 / 4 relativeDuration:1.0 / 4 animations:^{
            self.anView.backgroundColor = [UIColor colorWithRed:0.1064 green:0.6052 blue:0.0334 alpha:1.0];
        }];
        [UIView addKeyframeWithRelativeStartTime:2.0 / 4 relativeDuration:1.0 / 4 animations:^{
            self.anView.backgroundColor = [UIColor colorWithRed:0.1366 green:0.3017 blue:0.8411 alpha:1.0];
        }];
        [UIView addKeyframeWithRelativeStartTime:3.0 / 4 relativeDuration:1.0 / 4 animations:^{
            self.anView.backgroundColor = [UIColor colorWithRed:0.619 green:0.037 blue:0.6719 alpha:1.0];
        }];
        [UIView addKeyframeWithRelativeStartTime:3.0 / 4 relativeDuration:1.0 / 4 animations:^{
            self.anView.backgroundColor = [UIColor whiteColor];
        }];
    } completion:^(BOOL finished) {
        NSLog(@"动画结束");
    }];
}
复制代码

自作旋转动画

// 设置动画的延迟及类型
        NSTimeInterval animationDuration = 1;
        CAMediaTimingFunction *linearCurve = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
        
        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
        // 注意value类型为id类型
        animation.fromValue = (id) 0;
        animation.toValue = @(M_PI*2);
        animation.duration = animationDuration;
        animation.timingFunction = linearCurve;
        // 这个参数不要忘了,是在昨晚动画之后保持动画完成的状态
        animation.removedOnCompletion = NO;
        animation.repeatCount = INFINITY;
        animation.fillMode = kCAFillModeForwards;
        animation.autoreverses = NO;
        // 将动画加到mask上
        [_indefiniteAnimatedLayer.mask addAnimation:animation forKey:@"rotate"];

// 添加到动画组
// 创建动画组,并设置相关属性
        CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
        animationGroup.duration = animationDuration;
        animationGroup.repeatCount = INFINITY;
        animationGroup.removedOnCompletion = NO;
        animationGroup.timingFunction = linearCurve;

        // strokeStart动画
        CABasicAnimation *strokeStartAnimation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
        strokeStartAnimation.fromValue = @0.015;
        strokeStartAnimation.toValue = @0.515;

        // strokeEnd动画
        CABasicAnimation *strokeEndAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
        strokeEndAnimation.fromValue = @0.485;
        strokeEndAnimation.toValue = @0.985;

        // 将动画加到动画组
        animationGroup.animations = @[strokeStartAnimation, strokeEndAnimation];
        [_indefiniteAnimatedLayer addAnimation:animationGroup forKey:@"progress"];


复制代码

imageView动画

// 动画图片
NSArray *myImages = [NSArray arrayWithObjects: [UIImage imageNamed:@"icon_3"],[UIImage imageNamed:@"icon_1"],[UIImage imageNamed:@"icon_2"],[UIImage imageNamed:@"icon_3"],nil];
        
_animationView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 30, 30)];
_animationView.animationImages = myImages;
_animationView.animationDuration = 1;
_animationView.animationRepeatCount = 0;   //动画重复次数,0表示无限循环

// _animationView放入父控件
[self.view addSubview:_animationView];   

#开始动画
[self.animationView startAnimating];
#结束动画
[self.animationView stopAnimating];
复制代码

view旋转

CABasicAnimation *animation =  [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    //默认是顺时针效果,若将fromValue和toValue的值互换,则为逆时针效果
    animation.fromValue = [NSNumber numberWithFloat:M_PI *2];
    animation.toValue =  [NSNumber numberWithFloat: 0.f];
    animation.duration  = 1.5;                  //一次时间
    animation.autoreverses = NO;                         //是否自动回倒
    animation.fillMode =kCAFillModeForwards;
    animation.removedOnCompletion = NO;           //设置进入后台动画不停止
    animation.repeatCount = CGFLOAT_MAX ;            //重复次数
    animation.delegate = self;                    //动画代理
    [gifImageView.layer addAnimation:animation forKey:nil];
复制代码

VC跳转动画

// modal方式
    TestViewController *vc = [[TestViewController alloc] init];
    vc.view.backgroundColor = [UIColor redColor];
    vc.modalTransitionStyle = UIModalTransitionStyleCoverVertical;
    [self presentViewController:vc animated:YES completion:nil];

// push方式
    TestViewController *vc = [[TestViewController alloc] init];
    vc.view.backgroundColor = [UIColor redColor];
    [UIView beginAnimations:@"View Flip" context:nil];
    [UIView setAnimationDuration:0.80];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.navigationController.view cache:NO];
    [self.navigationController pushViewController:vc animated:YES];
    [UIView commitAnimations];

复制代码

www.jianshu.com/p/77847c002…
www.jianshu.com/p/92532c2b1…

有用资料

github.com/airbnb/lott… *

www.jianshu.com/c/080cc1641…

www.jianshu.com/p/7384c0c93…

www.jianshu.com/p/ede91913c…

www.cnblogs.com/fengmin/p/6…

github.com/ameizi/awes…

www.jianshu.com/p/cfde1c242…

www.jianshu.com/p/a138a8832…

www.jianshu.com/p/406a14e5d…

www.jianshu.com/p/b660eb8b8…

github.com/xiaochaofei… *有趣

贝塞尔曲线
www.jianshu.com/p/c883fbf52…

蚂蚁森林
www.jianshu.com/p/540a7e6f7…

tableview动画
www.jianshu.com/p/65b251c62…

转场动画
www.jianshu.com/p/802d47f0f…

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享