实现动画的一种思路

gitHub上看到个不错的动画 https://github.com/KittenYang/KYBezierBounceView 

 

没看他代码之前，我想了半天应该怎么实现这个效果：

这个蓝色的view拉了之后是个不规则的形状，虽然只有一边是不规则的，但是也不能直接用frame动画来做了，

那就只能用CAShapeLayer来自己画形状了，要画一个这样的形状，还不能直接用 UIBezierPath已经提供的方便的类方法来画，

只能用 Path construction的方法来画；但是如果用Path construction的方法来画的话，动画做起来就麻烦了，

因为path的动画不太好控制，只写好path的初始值和最终值，不知道系统会怎么样给动画插值；

在这里因为只有一个边在动，所以还能控制，那剩下的问题就是怎么让动画跟着手势变动。

这个就只能写个以位移为参数的生成当时整个形状的贝塞尔曲线的函数。。。。

然后以手势移动量来设置path就行了。

 

问题是解决了，但是实现起来好麻烦。。。所以这个方案也就仅停留在理论阶段了。

 

然后看了作者代码，发现他的实现比我想的简单的多：

在这个蓝色的view上覆盖一个CAShaperLayer，将其填充色设置为其他颜色，然后只需要写在动的一边的贝塞尔曲线就行了！

 

这样的效果看起来就像是你在拖动一个矩形的某一边，但实际上你只是拖动了在屏幕外的一条线，拖出来一个新的layer覆盖住了原来的view。

 

同样的效果，看起来完全一样，但是实现方法的难易程度却差了很多，再考虑到之前的另外一个例子：http://www.cnblogs.com/Phelthas/p/4523328.html

 

让我发现了一个看似简单但很容易忽略的事实：

 

眼睛看到的动画效果可以用 跟它看上去不一样的方式甚至完全相反的方式来实现，而且实现起来说不定更简单~~

 

就比如说上面提到的这个动画，看起来是拖动了蓝色的view，其实是拖动了看不到的一个layer。。。

 

 

另：

iOS7已经提供了UIView的弹簧动画：

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);

但是像path动画这种貌似还是得用keyFrameAnimation的方式来实现，具体就是要设置keyFrame动画的几个关键帧

keyFrameAnimation.values = @[(id)path1, (id)path2, (id)path3, (id)path4, (id)path5, (id)path1];

其中path1，path2。。。分别是那几个关键帧的layer的具体的位置。

 

iOS7也提供了新的关键帧动画api：

+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewKeyframeAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);
+ (void)addKeyframeWithRelativeStartTime:(double)frameStartTime relativeDuration:(double)frameDuration animations:(void (^)(void))animations NS_AVAILABLE_IOS(7_0); // start time and duration are values between 0.0 and 1.0 specifying time and duration relative to the overall time of the keyframe animation

 

需要两个方法配合使用，例子：

[UIViewanimateKeyframesWithDuration:0.25 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeCubic animations:^{

        [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:2/3.0 animations:^{
            self.label.transform = CGAffineTransformMakeScale(1.5, 1.5);
        }];
        [UIView addKeyframeWithRelativeStartTime:2/3.0 relativeDuration:1/3.0 animations:^{

            self.label.transform=CGAffineTransformMakeScale(1.0,1.0);

        }];
    } completion:^(BOOL finished) {
       

    }];

里面的方法是添加某一个关键帧，startTime和duration都是从0-1的相对与外面的Duration的时间，注意这两个参数都是小数，直接1/2是不行的！！！