学习动画——变换CGAffineTransform和CATransform3D

CGAffineTransform 仿射变形

cg:Core Graphics核心图形

Affine:仿射的;Transform:改变,使…变形;转换。

~~~~这些东西你注意过么~~~~~

NS:next step.一般是指数据,如NSObject、NSString。

CG:一般用于渲染,画图等。如CGAffine。

UI:一般用于普通的视图和控制器,

在objective-c中,CF、CA、CG、UI各指的是core foundation(核心基础) , core animation(核心动画), core graphic(核心图形) , user interface(用户界面)的缩写。

~~~~这些东西你注意过么~~~~~

CGAffineTransform中涉及到了CGPoint和矩阵的内容,CGAffineTransform是一个可以和二维空间向量(例如CGPoint)做乘法的3X2的矩阵。CGAffineTransform是一个可以和二维空间向量(例如CGPoint)做乘法的3X2的矩阵。当对图层应用变换矩阵,图层矩形内的每一个点都被相应地做变换,从而形成一个新的四边形的形状。CGAffineTransform中的“仿射”的意思是无论变换矩阵用什么值,图层中平行的两条线在变换之后任然保持平行,CGAffineTransform可以做出任意符合上述标注的变换。

~~~~~~~~@—@!我是分割线哈哈!@—@~~~~~~~~~~~

创建一个CGAffineTransform

如下几个函数都创建了一个CGAffineTransform实例:CGAffineTransformMakeRotation(CGFloat angle)

CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)

CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty);

CALayer同样也有一个transform属性,但它的类型是CATransform3D,而不是CGAffineTransform,本章后续将会详细解释。CALayer对应于UIView的transform属性叫做affineTransform.

    UIView *trans = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 200, 200)];
    [self.view addSubview:trans];
    trans.backgroundColor = [UIColor lightGrayColor];

    CALayer *lay = [CALayer layer];
    lay.contents = (__bridge id _Nullable)([UIImage imageNamed:@"logo-60"].CGImage);
    lay.frame = CGRectMake(25, 25, 150, 150);
    [trans.layer addSublayer:lay];
    //    trans.transform =  CGAffineTransformMakeRotation(M_PI_4);
    trans.layer.affineTransform =CGAffineTransformMakeRotation(M_PI_4);//两个一样

混合变换

之前是单一变化,现在也可以混合变化;

Core Graphics提供了一系列的函数可以在一个变换的基础上做更深层次的变换,如果做一个既要缩放又要旋转的变换,这就会非常有用了。例如下面几个函数:CGAffineTransformRotate(CGAffineTransform t, CGFloat angle)

CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy)

CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty)

当操纵一个变换的时候,初始生成一个什么都不做的变换很重要–也就是创建一个CGAffineTransform类型的空值,矩阵论中称作单位矩阵,Core Graphics同样也提供了一个方便的常量:CGAffineTransformIdentity

接下来我们先旋转30 再平移动100,再缩小50%

    CGAffineTransform affine = CGAffineTransformIdentity;
    affine = CGAffineTransformRotate(affine,M_PI / 180.0 * 30.f);
    affine = CGAffineTransformTranslate(affine, 100, 0);
    affine = CGAffineTransformScale(affine, 0.5, 0.5);

    trans.transform = affine;

很清楚的发现图片往下方移动了,这就出现了一个问题,就是在混合变换的时候,改变的内容之前的一项汇影响到之后改变项,所以在先旋转的时候那么之后的平移也会先选择30度,就相当于向斜下方移动,而且如果先进行缩放的话,移动的距离也会改变的。

//改变变换顺序
    affine = CGAffineTransformRotate(affine,M_PI / 180.0 * 30.f);
    affine = CGAffineTransformScale(affine, 0.5, 0.5);
    affine = CGAffineTransformTranslate(affine, 100, 0);

剪切变换

这个不是常用,CGAffineTransform没有直接提供函数,它的效果叫倾斜更好,就是设置 CGAffineTransform 的 c 和d 属性。

    CGAffineTransform affine = CGAffineTransformIdentity;
    affine.c = 1;
    affine.d = 1;

3D变化

CGAffineTransform仅仅对2D变换有效,为了在3D空间内移动或者旋转,通过transform属性(CATransform3D类型)可以真正做到这点。CATransform3D是一个可以在3维空间内做变换的4x4的矩阵。

3D的效果很简单,就是多了个z轴的处理,所以之前的评议旋转和缩放就变成了CATransform3DMakeRotation(CGFloat angle, CGFloat x, CGFloat y, CGFloat z)

CATransform3DMakeScale(CGFloat sx, CGFloat sy, CGFloat sz)

CATransform3DMakeTranslation(Gloat tx, CGFloat ty, CGFloat tz)

//简单的一个旋转效果
    CATransform3D affine = CATransform3DMakeRotation(M_PI_4, 1, 1, 0);
    trans.layer.transform = affine;

透视投影

在真实世界中,当物体远离我们的时候,由于视角的原因看起来会变小,理论上说远离我们的视图的边要比靠近视角的边跟短,但实际上并没有发生,而我们当前的视角是等距离的,也就是在3D变换中任然保持平行,和之前提到的仿射变换类似。

在CATransform3D的透视效果通过一个矩阵中一个很简单的元素来控制:m34。m34用于按比例缩放X和Y的值来计算到底要离视角多远。m34的默认值是0,我们可以通过设置m34为-1.0 / d来应用透视效果,d代表了想象中视角相机和屏幕之间的距离,以像素为单位,通常500-1000。

    CATransform3D  affine = CATransform3DIdentity;
    affine.m34 = -1.0 / 500.0;

    affine = CATransform3DRotate(affine, M_PI_4, 0, 1, 0);
    trans.layer.transform = affine;
    ![这里写图片描述](http://img.blog.csdn.net/20160405145156397)
时间: 2024-10-09 13:08:01

学习动画——变换CGAffineTransform和CATransform3D的相关文章

AngularJS学习--- 动画操作 (Applying Animations) ngAnimate step 12

1.切换目录 git checkout step-12 npm start 2.效果图 这里在点击右边的缩略图时,会有一个很明显的从下向上的动画过程. 3.代码实现: step11和step12之间的代码差异:https://github.com/angular/angular-phonecat/compare/step-11...step-12 Dependencies(依赖的js库): bower.json { "name": "angular-seed", &

iOS动画详解(学习动画看这一篇就够了)

iOS动画详解(学习动画看这一篇就够了) 一.基础知识 CAAnimation.png 二.CABasicAnimation 1. 动画的属性和解释 2.属性值的解释 repeatCount : 如果在swift中需要一直不断重复:Float.infinity,OC:HUGE_VALF timingFunction: timingFunction.png kCAMediaTimingFunctionLinear--在整个动画时间内动画都是以一个相同的速度来改变.也就是匀速运动.一个线性的计时函数

CGAffineTransform与CATransform3D

CGAffineTransform 1.CG的前缀告诉我们,CGAffineTransform类型属于Core Graphics框架,Core Graphics实际上是一个严格意义上的2D绘图API,并且CGAffineTransform仅仅对2D变换有效.实际上UIView的transform属性是一个CGAffineTransform类型,用于在二维空间做旋转,缩放和平移.CGAffineTransform是一个可以和二维空间向量(例如CGPoint)做乘法的3X2的矩阵(见图5.1). U

[Canvas学习]动画

学习目的:通过JavaScript操控<canvas>对象,实现交互动画. 动画的基本步骤 1. 清空canvas,使用clearRect方法 2. 保存canvas状态 3. 绘制动画图形 4. 恢复canvas状态 操控动画Controlling an animation setInterval(function, delay) setTimeout(function, delay) requestAnimationFrame(callback) 太阳系运动的小例子 <canvas

IOS学习动画一之 UIKit动画

IOS的 普通动画可使用UIKit提供的动画方式: 复杂动画可使用Core Animation. 1. 通过动画上下文使用UIKit动画 -(void)animationOfUIKit  {       UIView *redView=[[UIView alloc]initWithFrame:CGRectMake(10, 10, 100, 100)];              [self.view addSubview:redView];       //开始动画       [UIView 

ios 学习动画的套路 (一)

你也肯定喜欢炫酷的动画! 在APP中,动画就是一个点睛之笔!可以给用户增加一些独特的体验感,估计也有许多的和我一样的,看着那些觉得不错的动画,也就只能流口水的孩子,毕竟~不知道从哪里下手去写!会连续的发两篇博客,总结一下iOS中动画的一个学习套路或者说是一个自己的学习的过程,以及当中出现的一些问题也会和大家分享. 一:从那里开始?这里 Quartz2D! 在我的学习过程中,我是先从 Quartz2D 开始学习的,它里面的贝塞尔曲线在我们创造精美的动画的过程中是必不可少的,Quartz 2D 它首

【总结整理】JQuery基础学习---动画

jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的style属性,这里jQuery提供了一个快捷的方法.hide()来达到这个效果 $elem.hide() 提供参数: .hide( options ) 当提供hide方法一个参数时,.hide()就会成为一个动画方法..hide()方法将会匹配元素的宽度,高度,以及不透明度,同时进行动画操作 快捷参数

2016-1-10 组动画学习 动画实例

// // ViewController.m // 车晓迪demo // // Created by Mac on 16/1/11. // Copyright © 2016年 Mac. All rights reserved. // #import "ViewController.h" @interface ViewController () @property (weak, nonatomic) IBOutlet UIImageView *circleView; @end @impl

jQuery学习——动画效果

动画效果 基本动画效果 隐藏匹配元素 $("img").hide(300);//将img隐藏300ms 显示匹配元素 $("img").show(300);//在300ms内显示img 元素状态切换 $(document).ready(function(){ $("input[type='button']").click(function() { $("div").toggle();//若果元素可见,切换为隐藏,如果元素隐藏,