动画-关键帧动画

动画-关键帧动画

绘制波形图

关键帧动画。 动画是有一系列的静态的帧组成的连续的画面，系统会自动补齐帧与帧之间的变化，这些帧，我们就可以称之为关键帧，如果我们绘制动画，我们之需要指定一个动画生命周期内的所有关键帧对应的状态就可以了，程序运行后，系统就会自动补充中间的状态。

 

CAKeyframeAnimation 就是关键帧

anim.keyTimes = @[@(0.0), @(0.2), @(0.4), @(1.0)];

keyTimes 属性就是用来设置关键帧的时间节点，这个节点值 再 0~1之间，

但是keyTimes 比如与  anim.values 值一一对应，表示每一个帧节点，对应的状态值

然后我们将这个关键帧动画赋值给 某一个Layer对象， 然后Layer对象就会完成动画了

让我们来参考下完整的代码：

- (id)initWithFrame:(CGRect)frame

{

    self = [super initWithFrame:frame];

    if (self)

    {

        

        [self sizeToFit];

        //self.clipsToBounds = YES;

        

        float m_dur = 1.20f;

        

        NSTimeInterval beginTime = CACurrentMediaTime();

        CGFloat barWidth = CGRectGetWidth(self.bounds) / 5.0;

        

        for (NSInteger i=0; i < 5; i+=1)

        {

            CALayer *layer = [CALayer layer];

            layer.backgroundColor =[[UIColor brownColor] CGColor];

            layer.frame = CGRectMake(barWidth * i, 0.0, barWidth - 3.0, CGRectGetHeight(self.bounds));

            //layer.transform = CATransform3DMakeScale(1.0, 0.3, 0.0);

            

            CAKeyframeAnimation *anim = [CAKeyframeAnimationanimationWithKeyPath:@"transform"];

            anim.removedOnCompletion = NO;

            anim.beginTime = beginTime -m_dur + (0.2 * i);

            anim.duration = m_dur;

            anim.repeatCount = HUGE_VALF;

            

            anim.keyTimes = @[@(0.0), @(0.2), @(0.4), @(1.0)];

            

            anim.timingFunctions = @[

                                     [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],

                                     [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],

                                     [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],

                                     [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]

                                     ];

            

            anim.values = @[

                            [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 0.4, 0.0)],

                            [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 0.0)],

                            [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 0.4, 0.0)],

                            [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 0.4, 0.0)]

                            ];

            

            [self.layer addSublayer:layer];

            [layer addAnimation:anim forKey:@"spinkit-anim"];

        }

 

    }

    returnself;

}

 

 

Jason