CATransform3D

CATransform3D:

1、CATransform3DMakeTranslation:

/* Returns a transform that translates by '(tx, ty, tz)':
 * t' =  [1 0 0 0; 0 1 0 0; 0 0 1 0; tx ty tz 1]. */

CA_EXTERN CATransform3D CATransform3DMakeTranslation (CGFloat tx,
    CGFloat ty, CGFloat tz)
    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);

 tx:X轴偏移位置,往下为正数。
 ty:Y轴偏移位置,往右为正数。
 tz:Z轴偏移位置,往外为正数。

初始状态代码:

    //添加两个view
    UIView * view1 = [[UIView alloc] initWithFrame:CGRectMake(20, 100, 80, 80)];
    view1.backgroundColor = [UIColor redColor];
    [self.view addSubview:view1];
    
    UIView * view2 = [[UIView alloc] initWithFrame:CGRectMake(60, 140, 80, 80)];
    view2.backgroundColor = [UIColor orangeColor];
    [self.view addSubview:view2];
变换代码:

    CATransform3D catr = CATransform3DMakeTranslation(20, 0, 2);
    view1.layer.transform = catr;

初始效果和变换后效果对比:

很明显x和z均有平移效果。


/* Translate 't' by '(tx, ty, tz)' and return the result:
 * t' = translate(tx, ty, tz) * t. */

CA_EXTERN CATransform3D CATransform3DTranslate (CATransform3D t, CGFloat tx,
    CGFloat ty, CGFloat tz)
    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);

这是上面效果的叠加,t 就是CATransform3DMakeTranslation,tx、ty、tz 意义与上面一样

2、CATransform3DMakeScale

进行缩放变换

/* Returns a transform that scales by `(sx, sy, sz)':
 * t' = [sx 0 0 0; 0 sy 0 0; 0 0 sz 0; 0 0 0 1]. */

CA_EXTERN CATransform3D CATransform3DMakeScale (CGFloat sx, CGFloat sy,
    CGFloat sz)
    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);

sx:X轴缩放,代表一个缩放比例,一般都是 0 --- 1 之间的数字。

sy:Y轴缩放。

sz:暂时不知道,据说是,整体比例变换时,也就是m11(sx)== m22(sy)时,若m33(sz)>1,图形整体缩小,若0<1,图形整体放大,若m33(sz)<0,发生关于原点的对称等比变换。但是我试了下,没什么效果,可能是我测试方法有问题,求大神指教。

初始化代码:

    UIImageView * view1 = [[UIImageView alloc] initWithFrame:CGRectMake(50, 100, 80, 80)];
    view1.image = [UIImage imageNamed:@"dog.png"];
    [self.view addSubview:view1];
    
    UIImageView * view2 = [[UIImageView alloc] initWithFrame:CGRectMake(200, 100, 80, 80)];
    view2.image = [UIImage imageNamed:@"dog.png"];
    [self.view addSubview:view2];
初始效果:


加上缩放变换:



效果:


    CATransform3D catrScale = CATransform3DMakeScale(1, 1.5, 1);
    view1.layer.transform = catrScale;
效果:


/* Scale 't' by '(sx, sy, sz)' and return the result:
 * t' = scale(sx, sy, sz) * t. */

CA_EXTERN CATransform3D CATransform3DScale (CATransform3D t, CGFloat sx,
    CGFloat sy, CGFloat sz)
    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);
这个是上面效果的叠加,具体不再详细说明。

3、CATransform3DMakeRotation

旋转变换:

/* Returns a transform that rotates by 'angle' radians about the vector
 * '(x, y, z)'. If the vector has length zero the identity transform is
 * returned. */

CA_EXTERN CATransform3D CATransform3DMakeRotation (CGFloat angle, CGFloat x,
    CGFloat y, CGFloat z)
    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);
   

angle:旋转的弧度,所以要把角度转换成弧度:角度 * M_PI / 180。
x:向X轴方向旋转。值范围-1 --- 1之间
y:向Y轴方向旋转。值范围-1 --- 1之间
z:向Z轴方向旋转。值范围-1 --- 1之间

初始情况和上一个相同:

变换代码:

    CATransform3D catrScale = CATransform3DMakeRotation(60 * M_PI / 180, 1, 0, 0);
    view1.layer.transform = catrScale;

效果图:


    CATransform3D catrScale = CATransform3DMakeRotation(60 * M_PI / 180, 0, 1, 0);
    view1.layer.transform = catrScale;


    CATransform3D catrScale = CATransform3DMakeRotation(60 * M_PI / 180, 0, 0, 1);
    view1.layer.transform = catrScale;


    CATransform3D catrScale = CATransform3DMakeRotation(60 * M_PI / 180, 1, 1, 0);
    view1.layer.transform = catrScale;

/* Rotate 't' by 'angle' radians about the vector '(x, y, z)' and return
 * the result. If the vector has zero length the behavior is undefined:
 * t' = rotation(angle, x, y, z) * t. */

CA_EXTERN CATransform3D CATransform3DRotate (CATransform3D t, CGFloat angle,
    CGFloat x, CGFloat y, CGFloat z)
    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);
效果叠加。

4、CATransform3DInvert

翻转:

/* Invert 't' and return the result. Returns the original matrix if 't'
 * has no inverse. */

CA_EXTERN CATransform3D CATransform3DInvert (CATransform3D t)
    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);


    CATransform3D catrScale = CATransform3DMakeRotation(60 * M_PI / 180, 0, 0, 1);
//    catrScale = CATransform3DInvert(catrScale);
    view1.layer.transform = catrScale;
效果:


取消翻转注释,效果:



5、CATransform3DConcat

将两个效果加到一起:

/* Concatenate 'b' to 'a' and return the result: t' = a * b. */

CA_EXTERN CATransform3D CATransform3DConcat (CATransform3D a, CATransform3D b)
    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);

这里不再具体说明。

6、CATransform3D

struct CATransform3D
{
  CGFloat m11, m12, m13, m14;
  CGFloat m21, m22, m23, m24;
  CGFloat m31, m32, m33, m34;
  CGFloat m41, m42, m43, m44;
};


struct CATransform3D
{
    CGFloat     m11(x缩放),    m12(y切变),      m13(旋转),     m14();
    CGFloat     m21(x切变),    m22(y缩放),      m23(),             m24();
    CGFloat     m31(旋转),      m32( ),               m33(),               m34(透视效果,要操作的这个对象要有旋转的角度,否则没有效果。正直/负值都有意义);
    CGFloat     m41(x平移),     m42(y平移),     m43(z平移),     m44();
};

下面测试值有些可能过小不能明确展示效果,见谅。


    UIImageView * view1 = [[UIImageView alloc] initWithFrame:CGRectMake(50, 100, 80, 80)];
    view1.image = [UIImage imageNamed:@"dog.png"];
    [self.view addSubview:view1];
    
    UIImageView * view2 = [[UIImageView alloc] initWithFrame:CGRectMake(200, 100, 80, 80)];
    view2.image = [UIImage imageNamed:@"dog.png"];
    [self.view addSubview:view2];    

    CATransform3D catrScale = CATransform3DIdentity;
//    catrScale.m11 = 0.5;   
    view1.layer.transform = catrScale;


初始状态:


m11 = 0.5




m12 = 0.5



m13 = 0.5


m14 = 0.5


m21 = 0.5


m22 = 0.5


m23 = 0.5


m24 = 0.5


m31 = 0.5


m32 = 0.5


m33 = 0.5


m34 = 0.5


m41 = 0.5


m42 = 0.5


m43 = 0.5


m44 = 0.5







  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为下列代码实现可暂停效果: import UIKit class ViewController: UIViewController { private let radarAnimation = "radarAnimation" private var animationLayer: CALayer? private var animationGroup: CAAnimationGroup? private var opBtn: UIButton! override func viewDidLoad() { super.viewDidLoad() let first = makeRadarAnimation(showRect: CGRect(x: 120, y: 100, width: 100, height: 100), isRound: true) view.layer.addSublayer(first) opBtn = UIButton(frame: CGRect(x: 100, y: 450, width: 80, height: 80)) opBtn.backgroundColor = UIColor.red opBtn.clipsToBounds = true opBtn.setTitle("Hsu", for: .normal) opBtn.layer.cornerRadius = 10 view.addSubview(opBtn) let second = makeRadarAnimation(showRect: opBtn.frame, isRound: false) view.layer.insertSublayer(second, below: opBtn.layer) } @IBAction func startAction(_ sender: UIButton) { animationLayer?.add(animationGroup!, forKey: radarAnimation) } @IBAction func stopAction(_ sender: UIButton) { animationLayer?.removeAnimation(forKey: radarAnimation) } private func makeRadarAnimation(showRect: CGRect, isRound: Bool) -> CALayer { // 1. 一个动态波 let shapeLayer = CAShapeLayer() shapeLayer.frame = showRect // showRect 最大内切圆 if isRound { shapeLayer.path = UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: showRect.width, height: showRect.height)).cgPath } else { // 矩形 shapeLayer.path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: showRect.width, height: showRect.height), cornerRadius: 10).cgPath } shapeLayer.fillColor = UIColor.orange.cgColor // 默认初始颜色透明度 shapeLayer.opacity = 0.0 animationLayer = shapeLayer // 2. 需要重复的动态波,即创建副本 let replicator = CAReplicatorLayer() replicator.frame = shapeLayer.bounds replicator.instanceCount = 4 replicator.instanceDelay = 1.0 replicator.addSublayer(shapeLayer) // 3. 创建动画组 let opacityAnimation = CABasicAnimation(keyPath: "opacity") opacityAnimation.fromValue = NSNumber(floatLiteral: 1.0) // 开始透明度 opacityAnimation.toValue = NSNumber(floatLiteral: 0) // 结束时透明底 let scaleAnimation = CABasicAnimation(keyPath: "transform") if isRound { scaleAnimation.fromValue = NSValue.init(caTransform3D: CATransform3DScale(CATransform3DIdentity, 0, 0, 0)) // 缩放起始大小 } else { scaleAnimation.fromValue = NSValue.init(caTransform3D: CATransform3DScale(CATransform3DIdentity, 1.0, 1.0, 0)) // 缩放起始大小 } scaleAnimation.toValue = NSValue.init(caTransform3D: CATransform3DScale(CATransform3DIdentity, 1.5, 1.5, 0)) // 缩放结束大小 let animationGroup = CAAnimationGroup() animationGroup.animations = [opacityAnimation, scaleAnimation] animationGroup.duration = 3.0 // 动画执行时间 animationGroup.repeatCount = HUGE // 最大重复 animationGroup.autoreverses = false self.animationGroup = animationGroup shapeLayer.add(animationGroup, forKey: radarAnimation) return replicator } }
06-03

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值