IOS的几种动画及其简单应用

最新推荐文章于 2021-03-11 14:39:45 发布

一大波酸奶来袭

最新推荐文章于 2021-03-11 14:39:45 发布

阅读量1.2k

点赞数 1

分类专栏： IOS实战文章标签： ios 动画弹簧转场帧动画

IOS实战专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了iOS中的三种动画：弹簧动画、转场动画和帧动画。弹簧动画通过设置duration、delay、usingSpringWithDamping和initialSpringVelocity参数实现弹性效果。转场动画通过view、options等属性实现视图的添加、移除和替换。帧动画则利用startTime和relativeDuration控制多组动画的衔接。这些动画效果在实际开发中有着广泛应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文地址: http://blog.youkuaiyun.com/l_nn

弹簧动画

[UIView animateWithDuration:1 delay:0.5 usingSpringWithDamping:0.2 initialSpringVelocity:0 options:UIViewAnimationOptionAllowUserInteraction animations:^{
        ······
    } completion:nil];

duration：动画执行时间
delay：推迟执行时间
usingSpringWithDamping：弹簧动画的阻尼值范围在0到1之间，数值越小弹动效果越明显，为1时会出现不弹动的现象
initialSpringVelocity：弹簧的拉力，值越大拉伸幅度越大，有值是弹动时间根据阻尼值和拉力计算，为0时忽略拉力
animations：动画执行闭包（执行动画写在这里）
completion：完成动画闭包

eg：实现按钮的弹动效果

[UIView animateWithDuration:1 delay:0.5 usingSpringWithDamping:0.2 initialSpringVelocity:0 options:UIViewAnimationOptionAllowUserInteraction animations:^{
        CGPoint center = button.center;
        center.y = button.center.y - 10.0;
        button.center = center; 
    } completion:nil];

转场动画

[UIView transitionWithView:view duration:1 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
        ······
    } completion:nil];

view：作用视图
options：转场动画执行效果

eg：实现添加，移除视图等

[UIView transitionWithView:view duration:1 options:UIViewAnimationOptionTransitionFlipFromBottom animations:^{
        [backgroundV addSubview:view];
    } completion:nil];

[UIView transitionFromView:fromView toView:toView duration:1 options:UIViewAnimationOptionTransitionCrossDissolve completion:^(BOOL finished) {
    if (finished) {
        ······          
    }
}];

fromView：起始视图
toView：替换视图

eg：实现替换视图，动态转换等

[UIView animateWithDuration:1.0 delay:0 options:UIViewAnimationOptionAllowUserInteraction animations:^{
        [view setFrame:backgroundV.frame];
    } completion:^(BOOL finished) {
        if (finished) {
            [UIView transitionFromView:ipadBgV toView:sIpadL duration:0.33 options:UIViewAnimationOptionTransitionCrossDissolve completion:^(BOOL finished) {
                if (finished) {
                    [self flipAnimation];
                }
            }];
        }
    }];

帧动画

[UIView animateKeyframesWithDuration:2 delay:0 options:UIViewKeyframeAnimationOptionAllowUserInteraction animations:^{
        [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.5 animations:^{
            view.cent
        }];
    [UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.5 animations:^{
                    ······
        }];
    } completion:nil];

startTime：帧动画开始时间(相对整个动画执行时间)，值在0到1之间
relativeDuration：帧动画持续时间(相对整个动画执行时间)

eg：多组动画的衔接效果

[UIView animateKeyframesWithDuration:2 delay:0 options:UIViewKeyframeAnimationOptionAllowUserInteraction animations:^{
        [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.5 animations:^{
            CGPoint center = button.center;
        center.y = button.center.y - 10.0;
        button.center = center;
        }];
        [UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.5 animations:^{
            CGPoint center = button.center;
        center.x = button.center.x - 10.0;
        button.center = center;
        }];
    } completion:nil];

注：常用动画枚举

UIViewAnimationOptionLayoutSubviews            //提交动画的时候布局子控件，表示子控件将和父控件一同动画。
UIViewAnimationOptionAllowUserInteraction      //动画时允许用户交流，比如触摸
UIViewAnimationOptionBeginFromCurrentState     //从当前状态开始动画
UIViewAnimationOptionRepeat                    //动画无限重复

UIViewAnimationOptionTransitionNone            //无转场动画
UIViewAnimationOptionTransitionFlipFromLeft    //转场从左翻转
UIViewAnimationOptionTransitionFlipFromRight   //转场从右翻转
UIViewAnimationOptionTransitionCurlUp          //上卷转场
UIViewAnimationOptionTransitionCurlDown        //下卷转场
UIViewAnimationOptionTransitionCrossDissolve   //转场交叉消失
UIViewAnimationOptionTransitionFlipFromTop     //转场从上翻转
UIViewAnimationOptionTransitionFlipFromBottom  //转场从下翻转