iOS UIView高级动画 关键帧动画

关键帧动画

任何动画要表现运动或变化，至少前后要给出两个不同的关键状态，而中间状态的变化和衔接电脑可以自动完成，表示关键状态的帧动画叫做关键帧动画。 所谓关键帧动画，就是给需要动画效果的属性，准备一组与时间相关的值，这些值都是在动画序列中比较关键的帧中提取出来的，而其他时间帧中的值，可以用这些关键值，采用特定的插值方法计算得到，从而达到比较流畅的动画效果。 下面我们就来看看如何创建一个关键帧动画

创建一个关键帧动画

首先我们需要用到下面的一个方法，为动画设置一些时长还有是否需要延迟，等属性。

• duration：动画的总时长
• delay：延迟启动动画的时间
• options：选择动画的效果。
• animations ：需要执行的动画，里面可以是多个关键帧动画

+(void)animateKeyframesWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay
 options:(UIViewKeyframeAnimationOptions)options animations:(void (^)(void))animations 
completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);
复制代码

添加关键帧动画的方法

• frameStartTime:当前帧动画开始的时间 = 第几个帧/动画的总时长。
• relativeDuration一帧的时长 = 总帧数 / 总时长。 在block函数中可以对当前帧的动画做一些其他的设置，比如位置上的改变。

+(void)addKeyframeWithRelativeStartTime:(double)frameStartTime relativeDuration:
(double)frameDuration animations:(void (^)(void))animations NS_AVAILABLE_IOS(7_0);
复制代码

##示例代码 添加一个关键帧动画

[UIView animateKeyframesWithDuration:6.0 delay:0.0 
options:UIViewKeyframeAnimationOptionBeginFromCurrentState animations:^{
    [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.1 animations:^{
        self.redView.frame = CGRectMake(200, 100, 100, 100);
    }];
} completion:^(BOOL finished) {
}];
复制代码

创建一个四帧的动画

-(void)kryFramAnimation{
    void (^keyFram)(void) = ^(){
        for (int i = 0; i < 4; i ++) {
           __block CGRect redFram = self.redView.frame;
         [UIView addKeyframeWithRelativeStartTime:i / 4.0 relativeDuration:1 / 4.0 animations:^{
            switch (i) {
                case 0:
                    redFram.origin.x += 100;
                    self.redView.frame = redFram;
                    break;
                case 1:
                    redFram.origin.y += 100;
                    self.redView.frame = redFram;
                    break;
                case 2:
                    redFram.origin.x -= 100;
                    self.redView.frame = redFram;
                    break;
                case 3:
                    redFram.origin.y -= 100;
                    self.redView.frame = redFram;
                    break;
                default:
                    break;
            }
         }];
           
        }
    };
    [UIView animateKeyframesWithDuration:4.0 delay:0.0 options:UIViewKeyframeAnimationOptionBeginFromCurrentState 
animations:keyFram completion:nil];
复制代码

以上就是一个关键帧动画的简单使用了。

转载于:https://juejin.im/post/5c1a0dfee51d454827179d0a