复杂缓动函数曲线通常都是需要开发者自定义，iOS的原生动画框架对自定义缓动函数曲线支持不是很好，所以这也是FaceBook开源的POP动画框架大受欢迎的原因。
POP动画框架就是通过改变视图模型层Model Layer状态来实现动画，原生Core Animation的是通过改变渲染层Render Layer实现动画，所以Core Animation动画会在动画结束后回到起始位置和无法实现UILable的Text属性动画效果，POP动画框架不止于此，更可以创建动画框架没有的时间缓动函数曲线进而构建特别的动画特效，本质上来说，POP动画框架的本质是CADisplayLink定时器(屏幕刷新率：60帧/S)每触发一次屏幕刷新的方法就执行一帧动画，根据设定的缓动函数Time Function来计算每一帧动画的插值，进而赋值给视图或图层的属性(Center、Frame、Text)形成动画效果。
对于POP动画框架来说，设置缓动函数曲线主要两种方法，具体哪一种方法视缓动函数曲线的复杂度而定。
第一种方法较为简单，只适用于通过两个构建点就能构建的缓动函数曲线、获取两个构建点的坐标，作为参数传入POP动画框架的API。
第二种方法就需要理解POP的原理才能完成，POPCustomAnimation类的Block代码块在CADisplayLink定时器每一次触发方法是都会调用，前提必须知道缓动函数曲线对应的C语言计算函数JS查询表，每一帧动画都需要计算一次，就是说，缓动函数曲线的每一个坐标点都是通过C语言计算函数实时计算构建出来的，计算频率与CADisplayLink一致，这样无论多复杂的缓动函数曲线都可以更具具体的函数实时构建出来。因为本质定时器，自然POP动画是在主线层执行的，消耗CPU较严重，所以如果只是简单的动画使用分线程执行的UIView的Block动画是一个更好的选择。
动画分类/p>
基本动画：线性kCAMediaTimingFunctionLinear、渐快kCAMediaTimingFunctionEaseIn、渐慢kCAMediaTimingFunctionEaseOut、先快后慢kCAMediaTimingFunctionEaseInEaseOut共四种时间缓动函数。
弹簧动画：springBounciness[0-20]弹力越大则震动幅度越大、springSpeed[0-20]速度越大则动画结束越快、dynamicsFriction摩擦、dynamicsMass质量，动画持续的时间和时间的缓动函数由以上几个参数决定。
阻尼动画：deceleration衰减系数刹车，动画持续的时间和时间的缓动函数由衰减系数决定
自定义动画
自定义动画/p>
方法一：
自定义动画第一步需要自定义时间的缓动函数曲线。
实现POPCustomAnimation类的Block代码块参数。每次CADisplayLink定时器触发时也就是每一帧动画都会调用我们定义好的Block。
记录动画开始时的基准时间、X轴的时间进度[0-1]百分比、调用缓动函数ElasticEaseOut对应的C语言函数(参照JS函数表)计算出Y值进度[0-1]百分比、根据缓动函数输出的Y值计算动画插值赋值给UI对象、判断如果Y值进度小于1继续动画
方法二：(有局限，只适用于较简单的动画)
移动两个坐标点随意构建缓动函数曲线
获取两个坐标点坐标。为什么POP动画的自定义换动函数API只能输入两个坐标点，原来贝塞尔曲线真的是通过两个坐标点构建的(当然这里排除(0,0)和(1,1)这两个坐标)。在动画执行之前就把缓动函数构建完成，这样就不用每一帧动画都计算一次缓动函数下一坐标点了，当然在动画开始之前就构建出完整的缓动函数曲线在精度是比不上每一帧都调用曲线的C语言函数这个方法的。
自定义缓动函数完成之后，更可以把自定义曲线的名字和两个坐标点以Json数据的格式导入到库之中，不仅仅起到保存的功能哟，更可以去除来加以比较，进行微调，简直棒到没朋友呀！
贝塞尔曲线的数学公式参考实现(JS版)
(function(factory){
if(typeof define === “function” && define.amd){
define([‘jquery’],function($){
return factory($);
});
} else if(typeof module === “object” && typeof module.exports === “object”){
exports = factory(require(‘jquery’));
} else {
factory(jQuery);
}
})
(function($){
$.easing[‘jswing’]= $.easing[‘swing’];
var pow = Math.pow,
sqrt = Math.sqrt,
sin = Math.sin,
cos = Math.cos,
PI = Math.PI,
c1 = 1.70158,
c2 = c1 * 1.525,
c3 = c1 + 1,
c4 =(2 * PI)/ 3,
c5 =(2 * PI)/ 4.5;
function bounceOut(x){
var n1 = 7.5625,
d1 = 2.75;
if(x
return n1*x*x;
} else if(x
return n1*(x-=(1.5/d1))*x + .75;
} else if(x
return n1*(x-=(2.25/d1))*x + .9375;
} else {
return n1*(x-=(2.625/d1))*x + .984375;
}
}
$.extend($.easing,
{
def: ‘easeOutQuad’,
swing: function(x){
return $.easing[$.easing.def](x);
},
easeInQuad: function(x){
return x * x;
},
easeOutQuad: function(x){
return 1 -(1 – x)*(1 – x);
},
easeInOutQuad: function(x){
return x
2 * x * x :
1 – pow(-2 * x + 2,2)/ 2;
},
easeInCubic: function(x){
return x * x * x;
},
easeOutCubic: function(x){
return 1 – pow(1 – x,3);
},
easeInOutCubic: function(x){
return x
4 * x * x * x :
1 – pow(-2 * x + 2,3)/ 2;
},
easeInQuart: function(x){
return x * x * x * x;
},
easeOutQuart: function(x){
return 1 – pow(1 – x,4);
},
easeInOutQuart: function(x){
return x
8 * x * x * x * x :
1 – pow(-2 * x + 2,4)/ 2;
},
easeInQuint: function(x){
return x * x * x * x * x;
},
easeOutQuint: function(x){
return 1 – pow(1 – x,5);
},
easeInOutQuint: function(x){
return x
16 * x * x * x * x * x :
1 – pow(-2 * x + 2,5)/ 2;
},
easeInSine: function(x){
return 1 – cos(x * PI/2);
},
easeOutSine: function(x){
return sin(x * PI/2);
},
easeInOutSine: function(x){
return -(cos(PI * x)- 1)/ 2;
},
easeInExpo: function(x){
return x === 0 : pow(2,10 * x – 10);
},
easeOutExpo: function(x){
return x === 1 : 1 – pow(2,-10 * x);
},
easeInOutExpo: function(x){
return x === 0 : x === 1 : x
pow(2,20 * x – 10)/ 2 :
(2 – pow(2,-20 * x + 10))/ 2;
},
easeInCirc: function(x){
return 1 – sqrt(1 – pow(x,2));
},
easeOutCirc: function(x){
return sqrt(1 – pow(x – 1,2));
},
easeInOutCirc: function(x){
return x
(1 – sqrt(1 – pow(2 * x,2)))/ 2 :
(sqrt(1 – pow(-2 * x + 2,2))+ 1)/ 2;
},
easeInElastic: function(x){
return x === 0 : x === 1 :
-pow(2,10 * x – 10)* sin((x * 10 – 10.75)* c4);
},
easeOutElastic: function(x){
return x === 0 : x === 1 :
pow(2,-10 * x)* sin((x * 10 – 0.75)* c4)+ 1;
},
easeInOutElastic: function(x){
return x === 0 : x === 1 : x
-(pow(2,20 * x – 10)* sin((20 * x – 11.125)* c5))/ 2 :
pow(2,-20 * x + 10)* sin((20 * x – 11.125)* c5)/ 2 + 1;
},
easeInBack: function(x){
return c3 * x * x * x – c1 * x * x;
},
easeOutBack: function(x){
return 1 + c3 * pow(x – 1,3)+ c1 * pow(x – 1,2);
},
easeInOutBack: function(x){
return x
(pow(2 * x,2)*((c2 + 1)* 2 * x – c2))/ 2 :
(pow(2 * x – 2,2)*((c2 + 1)*(x * 2 – 2)+ c2)+ 2)/ 2;
},
easeInBounce: function(x){
return 1 – bounceOut(1 – x);
},
easeOutBounce: bounceOut,
easeInOutBounce: function(x){
return x
(1 – bounceOut(1 – 2 * x))/ 2 :
(1 + bounceOut(2 * x – 1))/ 2;
}
});
});
文章知识点与官方知识档案匹配，可进一步学习相关知识Java技能树首页概览91268 人正在系统学习中 相关资源：实例讲解分布式缓存软件Memcached的Java客户端使用-其它代码类…
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！