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];

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

你可能感兴趣的:(iOS UIView高级动画-关键帧动画)