zoukankan      html  css  js  c++  java
  • 实现动画的一种思路

    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是不行的!!!
     
     
     
  • 相关阅读:
    es6 javascript对象方法Object.assign()
    在vue中使用axios实现跨域请求并且设置返回的数据的格式是json格式,不是jsonp格式
    Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理
    nvm、nzm、npm 安装和使用详解
    Win7系统出现提示: “Windows已遇到关键问题,将在一分钟后自动重新启动......
    npm安装/删除/发布/更新/撤销发布包
    web前端性能优化总结
    一道经典面试题-----setTimeout(function(){},0)和引发发的其它面试题
    渐进增强和优雅降级之间的区别在哪里?
    大学物理(上)期中考试参考答案
  • 原文地址:https://www.cnblogs.com/Phelthas/p/4610229.html
Copyright © 2011-2022 走看看