动画CATransform3D —— 声波

我们先以一个声波样式的动画效果来进行学习,我们先从CATransform3D开始吧,嘻嘻,先啃最难的。

在此之前我们先来看一下CATransform3D这个结构体:

     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();
     };
以及CATransform3D常用效果:

(1)CATransform3DIdentity 是单位矩阵,该矩阵没有缩放,旋转,歪斜,透视。该矩阵应用到图层上,就是设置默认值。

(2)CATransform3DMakeTranslation (CGFloat tx,
CGFloat ty, CGFloat tz) 对应矩阵 [1 0 0 0; 0 1 0 0; 0 0 1 0; tx ty tz 1] ,tx 、ty、tz分别是向x,y,z轴平移;

(3)CATransform3DMakeScale (CGFloat sx, CGFloat sy,
CGFloat sz) 对应矩阵 [sx 0 0 0; 0 sy 0 0; 0 0 sz 0; 0 0 0 1] ,tx 、ty、tz分别是x,y,z轴缩放;

(4)CATransform3DMakeRotation (CGFloat angle, CGFloat x,
CGFloat y, CGFloat z) 旋转效果,angle旋转角度,x,y,z组合控制旋转的方向。

(5)CATransform3DTranslate (CATransform3D t, CGFloat tx,
CGFloat ty, CGFloat tz) 效果同(2)一样,不同的是它可以在上一个CATransform3D 效果上叠加。

(6)CATransform3DScale (CATransform3D t, CGFloat sx,
CGFloat sy, CGFloat sz) 效果同(3)一样,不同的是它可以在上一个CATransform3D 效果上叠加。

(7)CATransform3DRotate (CATransform3D t, CGFloat angle,
CGFloat x, CGFloat y, CGFloat z) 效果同(4)一样,不同的是它可以在上一个CATransform3D 效果上叠加。

(8)CATransform3DConcat (CATransform3D a, CATransform3D b) 让两个 a ,b 的效果叠加。

(9)CATransform3DInvert (CATransform3D t) 让 t的效果反转;

以上就是系统给的常用的关于CATransform3D的动画效果,做一下简单的说明。

在实现声波动画时,会用到的动画效果缩放CATransform3DMakeScale ,透明度opacity,上代码:

    //创建两个基础动画关键字分别为transform , opacity
    CABasicAnimation * basicAnimation =  [CABasicAnimation animationWithKeyPath:@"transform"];
    basicAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(4, 4, 1)];
    
    CABasicAnimation * opacity = [CABasicAnimation animationWithKeyPath:@"opacity"];
    opacity.fromValue = @0.75;
    opacity.toValue = @0;

在这里顺带贴一下整理的动画关键字表:

动画CATransform3D —— 声波_第1张图片
屏幕快照 2017-03-31 17.29.16.png

接着创建动画组CAAnimationGroup 加入写好的两个基础动画:

    CAAnimationGroup * group = [CAAnimationGroup animation];
   // 动画的时间 INTERVAL_TIME 声波发射定时  NUMBER_OF_PLIES 同时存在的波数
    group.duration = INTERVAL_TIME * NUMBER_OF_PLIES ;
    group.animations = @[basicAnimation,opacity];
    group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    group.delegate =self;
    [group setValue:layer forKey:@"layerkey"];
    [layer addAnimation:group forKey:@"group"];

具体效果如下:

动画CATransform3D —— 声波_第2张图片
wave_gif.gif

附上项目地址:https://github.com/BlueSkyInwind/SoundWave
最后希望大家看后多多指教。

你可能感兴趣的:(动画CATransform3D —— 声波)