类似3D效果_CGAffineTransformScale

1️⃣CGAffineTransformMakeTranslation (相对平移)假设是一个视图,那么它的起始位置 x 会加上tx , y 会加上 ty 2️⃣CGAffineTransformScale 为一个Transformation再加上缩放 3️⃣CGAffineTransformIdentity 单位矩阵变换,一般用于仿射变换的初始化或者还原。

本文将用以上方法做如下gif效果

gif有点卡顿,坑

这并不是一个真正的3D效果,但它看起来非常接近

一、创建变换的label

1、在storyboard创建一个label,text为"我是肥仔"。

2、先创一个动画方向的枚举

typedef enum _AnimationDirection {
    positive  = 1,
    negative = -1,
} AnimationDirection;

3、创建一个方法

- (void)cubeTransitionWithLab:(UILabel *)label text:(NSString *)text direction:(AnimationDirection)direction

方法中,先添加一下代码

    UILabel *auxLabel = [[UILabel alloc] initWithFrame:label.frame];
    auxLabel.text = text;
    auxLabel.font = label.font;
    auxLabel.textAlignment = label.textAlignment;
    auxLabel.textColor = label.textColor;
    auxLabel.backgroundColor = label.backgroundColor;
    auxLabel.backgroundColor = [UIColor redColor];
    //offset
    CGFloat auxLabelOffset = (CGFloat)direction *
    auxLabel.frame.size.height/2.0;
    auxLabel.transform = CGAffineTransformScale(CGAffineTransformMakeTranslation(0.0, auxLabelOffset), 1.0, 0.1);
    [label.superview addSubview:auxLabel]; //在label的所在view添加auxLabel,即auxLabel在label的上面覆盖着

上面代码创建了auxLabel,以及设置一些常用属性,auxLabel.transform = CGAffineTransformScale(CGAffineTransformMakeTranslation(0.0, auxLabelOffset), 1.0, 0.1);这句代码是auxLabel在y轴上偏移auxLabelOffset,同时会高度缩小为原来的0.1倍。如图:

image.png

4、在cubeTransitionWithLab继续以下代码:

[UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
    auxLabel.transform = CGAffineTransformIdentity;
    label.transform =  CGAffineTransformScale(CGAffineTransformMakeTranslation(0.0, -auxLabelOffset), 1.0, 0.1);
} completion:^(BOOL finished) {
    label.text = auxLabel.text;
    label.transform = CGAffineTransformIdentity;
    [auxLabel removeFromSuperview];
}];

把auxLabel还原成为变换之前的样子,过渡持续时间是1.5秒,延迟0秒,效果为UIViewAnimationOptionCurveEaseOut淡出,同时把故事版中的label在y轴与auxLabel反向平移相同的距离,从而造成很微妙的效果(有点像翻页效果)。如图:

完成后,把label的文字设置与auxLabel一样,把label还原为刚开始的样子,并把auxLabel从Superview移除

现在从上往下翻页的效果已经出来了,但是看起来怪怪的,我们要做的是一个类似的3D效果,所以得做循环,且一次从上往下,一次从下往上。

二、设置循环

1、在viewDidLoad中,声明属性_direction为positive,并调用即将创建的changeFlight方法

- (void)viewDidLoad {
    [super viewDidLoad];
    _direction = positive;
    [self changeFlight];
}

创建changeFlight方法,并添加一下代码

_direction = (CGFloat)(_direction != positive) ? positive : negative;
CGFloat direction = _direction;
NSString *str = @"我是靓仔";
if (_direction != positive) {
    str = @"我不靓仔";
}

以上代码用了三木运算符,控制不同的_direction,并初始化str

2、接着,调用cubeTransitionWithLab并传所需参数

[self cubeTransitionWithLab:self.lab text:str direction: direction];

3、最后,运用GCD方法,延迟标签(label和auxLabel)上下变换变换的时间,并调用自身

double delayInSeconds = 3.0;
__block ViewController* bself = self;
dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delayInSeconds * NSEC_PER_SEC));

dispatch_after(popTime, dispatch_get_main_queue(), ^(void){
    [bself changeFlight];
});

这样就搞定了!大伙可以试试。变换方法比较简单,难的主要是里面的逻辑

10.27

添加新功能:关键帧动画 之前的文章说过UIView.animate这个方法,把多个动画链接在一起,可能你会想到在这方法里面嵌套多个这个方法,达到多个动画链接。但是这样复杂一点的动画,你会崩溃。。 所以我们可以将整个动画分成几个不同的阶段,或者关键帧,然后将单个的关键帧组合成一个关键帧动画。

关键帧动画
- (void)planeDepart {
    
    CGPoint originalCenter = self.planeImage.center;
    [UIView animateKeyframesWithDuration:1.5 delay:0.0 options:UIViewKeyframeAnimationOptionLayoutSubviews animations:^{
        [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.25 animations:^{
            CGPoint center = self.planeImage.center;
            center.x -= 80;
            center.y += 10;
            self.planeImage.center = center;
//            self.planeImage.center.x += 80;
        }];
        
        [UIView addKeyframeWithRelativeStartTime:0.1 relativeDuration:0.4 animations:^{
            self.planeImage.transform = CGAffineTransformMakeRotation(-M_PI / 8);
        }];
        
        [UIView addKeyframeWithRelativeStartTime:0.25 relativeDuration:0.25 animations:^{
            CGPoint center = self.planeImage.center;
            center.x -= 100;
            center.y -= 50;
            self.planeImage.center = center;
            self.planeImage.alpha = 0.0;
        }];
        
        [UIView addKeyframeWithRelativeStartTime:0.51 relativeDuration:0.01 animations:^{
            self.planeImage.transform = CGAffineTransformIdentity;
            
            CGPoint center = self.planeImage.center;
            center.x = 0.0;
            center.y = originalCenter.y;
            self.planeImage.center = center;
            
        }];
        
        
        [UIView addKeyframeWithRelativeStartTime:0.55 relativeDuration:0.45 animations:^{
            self.planeImage.alpha = 1.0;
            CGPoint center = self.planeImage.center;
            center = originalCenter;
            self.planeImage.center = center;
        }];
        
    } completion:nil];
    
}

代码解析: 开始时间和持续时间是0.0和1.0之间的值,指定时间和持续时间是相对于关键帧动画的整个时间的,例如,0.1是10%,0.25是25%,而1.0是整个持续时间的100%。

效果如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏非著名程序员

基础篇章:关于 React Native 之 Slider 组件的讲解

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 来,讲这个组件之前,我们先学习一下英文单词,...

31580
来自专栏一“技”之长

iOS开发CoreGraphics核心图形框架之二——深入理解图形上下文

      在上一篇博客中,介绍了有关CGPath绘制路径的相关方法,其中在View视图的drawRect方法中,已经使用过上下文将Path路径绘制到当前视图上...

20620
来自专栏hbbliyong

代码创建 WPF 旋转、翻转动画(汇总)

先建立一个button <Button Width="80" Height="60" Content="旋转" Name="trans" Cl...

32840
来自专栏Python疯子

Python 简单实现标签词云

基于Python的词云生成类库,很好用,而且功能强大.博主个人比较推荐 github:https://github.com/amueller/word_clo...

58110
来自专栏电光石火

HTML条件注释判断浏览器及检验

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE可识别 <![endif]--> ...

43590
来自专栏黒之染开发日记

【easeljs】显示对象基础 DisplayObject 类

DisplayObject is an abstract class that should not be constructed directly. Inst...

11030
来自专栏向治洪

FLAnimatedImage -ios gif图片加载框架介绍

简介 FLAnimatedImage 是 Flipboard 团队开发的在它们 App 中渲染 GIF 图片使用的库。 后来 Flipboard 将 FLAni...

1.1K90
来自专栏HTML5学堂

一步步教你弹性框架-下篇

HTML5学堂:本文继续为大家讲解弹性框架,在前两篇文章当中,我们从最基本的来回运动,讲解到缓冲运动、有摩擦力的运动。基本实现了弹性动画效果。今天我们主要来进行...

37740
来自专栏落影的专栏

iOS开发-OpenGLES进阶教程4

教程 OpenGLES入门教程1-Tutorial01-GLKit OpenGLES入门教程2-Tutorial02-shader入门 OpenGLES入门...

28440
来自专栏Objective-C

Swift-图像的性能优化

31370

扫码关注云+社区

领取腾讯云代金券