【macOS】NSTransitiion实现NSView切换动画

目标

尝试NSTransition应用在NSBox setContentView:时的各种转场效果。下面是一个示例:


    CATransition* transitionMoveIn = [CATransition animation];
    transitionMoveIn.duration = 0.75f;
    transitionMoveIn.type = kCATransitionMoveIn;
    transitionMoveIn.subtype = kCATransitionFromLeft;

    [self.contentBoxView.layer addAnimation:transitionMoveIn forKey:nil];
    [self.contentBoxView setContentView:viewToSelect];

类型

我们可以通过设置type和subtype来尝试所有的转场效果。主要有:

  1. type为给定枚举常量
    a. kCATransitionFade淡出
    CATransition* transitionFade = [CATransition animation];
    transitionFade.duration = 2;
    transitionFade.type = kCATransitionFade;
    transitionFade.subtype = kCATransitionFromLeft;

请添加图片描述
b. kCATransitionMoveIn覆盖原图

    CATransition* transitionMoveIn = [CATransition animation];
    transitionMoveIn.duration = 1;
    transitionMoveIn.type = kCATransitionMoveIn;
    transitionMoveIn.subtype = kCATransitionFromLeft;

请添加图片描述
c. kCATransitionPush推出

    CATransition* transitionPush = [CATransition animation];
    transitionPush.duration = 1;
    transitionPush.type = kCATransitionPush;
    transitionPush.subtype = kCATransitionFromLeft;

在这里插入图片描述
当然也可以设置从右边出来。transitionPush.subtype = kCATransitionFromRight;
在这里插入图片描述
d. kCATransitionReveal底部显出

    CATransition* transitionReveal = [CATransition animation];
    transitionReveal.duration = 2;
    transitionReveal.type = kCATransitionReveal;
    transitionReveal.subtype = kCATransitionFromLeft;

在这里插入图片描述
让我们看看从底部出来的效果。transitionReveal.subtype = kCATransitionFromBottom;
在这里插入图片描述
2. type为字符串量。如setType [animation setType:@“suckEffect”],这里的suckEffect就是效果名称。
e pageCurl 向上翻一页

    CATransition* transitionPageCurl = [CATransition animation];
    transitionPageCurl.duration = 2;
    transitionPageCurl.type = @"pageCurl";
    transitionPageCurl.subtype = kCATransitionFromLeft;

在这里插入图片描述
从右边出来的效果如下:
在这里插入图片描述
f. pageUnCurl 向下翻一页

    CATransition* transitionPageUnCurl = [CATransition animation];
    transitionPageUnCurl.duration = 2;
    transitionPageUnCurl.type = @"pageUnCurl";
    transitionPageUnCurl.subtype = kCATransitionFromLeft;

在这里插入图片描述
g. rippleEffect 滴水效果

    CATransition* transitionRippleEffect = [CATransition animation];
    transitionRippleEffect.duration = 2;
    transitionRippleEffect.type = @"rippleEffect";
    transitionRippleEffect.subtype = kCATransitionFromLeft;

在这里插入图片描述
h. suckEffect 收缩效果,如一块布被抽走

    CATransition* transitionSuckEffect = [CATransition animation];
    transitionSuckEffect.duration = 2;
    transitionSuckEffect.type = @"suckEffect";
    transitionSuckEffect.subtype = kCATransitionFromLeft;

在这里插入图片描述
i. cube 立方体效果

    CATransition* transitionCube = [CATransition animation];
    transitionCube.duration = 2;
    transitionCube.type = @"cube";
    transitionCube.subtype = kCATransitionFromLeft;

在这里插入图片描述
j. oglFlip 上下翻转效果

    CATransition* transitionOglFlip = [CATransition animation];
    transitionOglFlip.duration = 2;
    transitionOglFlip.type = @"oglFlip";
    transitionOglFlip.subtype = kCATransitionFromLeft;

在这里插入图片描述


参考

Iphone翻页动画效果–CATransition实现

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值