链接
欢迎大家访问我的个人网站四度空间
Fuse?
很多时候，设计师设计一个特效动画出来，用静态的UE是很难向开发者描述动效的具体样式的，于是需要借助一些UX交互设计工具。
当前用的较多的UX交互设计工具是Fuse软件了，Fuse软件要求设计师懂一些Html语言和JS语言语言，Html写UI，JS跑逻辑，大大提高沟通效率，同时会省却开发者很多时间，因为在设计者写好动画特效之后，直接就可以通过Fuse软件导出iOS或Android原型，直接发布都可以，就拿iOS举例，导出的Xcode工程，确实运行没有问题，但是内存超大，而且显得特别冗余，因此如果把Fuse导出的这个工程直接融合进项目之中实在不划算。
开发者自己来写动画特效唯一的问题就是如何保证开发者自己写的动画特效跟设计师想要的动画特效是完全一致的，一个动画就主要两方面，一是UI二是特效，UI自然不在话下，只要参数一致，肯定是满足设计者要求的，关键是特效。这就不得不引入一个影响动画特效的关键因素缓动函数。
缓动函数，顾名思义，就是决定动画效果运动快慢的函数。详细说就是定义不同曲线的数据公式，描述每一帧动画回调时需要改变的图形参数属性的幅度，从而达到均匀、先快后慢、先慢后快，甚至先超出起始值和结束值再慢慢恢复的各种动画特效。
因为大多数动画特效都是模仿现实生活中的情形，时而加速时而减速。动画特效直接受到缓动函数的影响，自然可以通过设置缓动函数进而实现不同的动画效果。设计师使用Fuse软件设计出动画特效时，里面必不可少的步骤就是设置UI动画的缓动函数类型，当然Css的缓动函数名称跟Java或OC的缓动函数名称有些不同，看图就一目了然，只要知道设计师使用的缓动函数，找到相应的坐标图，就顺势找出了OC中对应的缓动函数名称。
典型的线性kCAMediaTimingFunctionLinear、渐快kCAMediaTimingFunctionEaseIn、渐慢kCAMediaTimingFunctionEaseOut、先快后慢kCAMediaTimingFunctionEaseInEaseOut都是动画本身就自带的函数类型，这也是最简单的动画特效。不是我们重点讨论的内容，我们重点讨论设计师设计的复杂缓动函数构建的动画特效。
复杂缓动函数曲线通常都是需要开发者自定义，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动画是一个更好的选择。
动画分类？
- 基本动画：线性
kCAMediaTimingFunctionLinear、渐快kCAMediaTimingFunctionEaseIn、渐慢kCAMediaTimingFunctionEaseOut、先快后慢kCAMediaTimingFunctionEaseInEaseOut共四种时间缓动函数。 - 弹簧动画：
springBounciness[0-20]弹力越大则震动幅度越大、springSpeed[0-20]速度越大则动画结束越快、dynamicsFriction摩擦、dynamicsMass质量，动画持续的时间和时间的缓动函数由以上几个参数决定。 - 阻尼动画：
deceleration衰减系数刹车，动画持续的时间和时间的缓动函数由衰减系数决定 - 自定义动画
自定义动画？
方法一：
- 自定义动画第一步需要自定义时间的缓动函数曲线。
- 实现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 < 1/d1){
return n1*x*x;
} else if(x < 2/d1){
return n1*(x-=(1.5/d1))*x + .75;
} else if(x < 2.5/d1){
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 < 0.5?
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 < 0.5?
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 < 0.5?
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 < 0.5?
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?0 : pow(2,10 * x - 10);
},
easeOutExpo: function(x){
return x === 1?1 : 1 - pow(2,-10 * x);
},
easeInOutExpo: function(x){
return x === 0?0 : x === 1?1 : x < 0.5?
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 < 0.5?
(1 - sqrt(1 - pow(2 * x,2)))/ 2 :
(sqrt(1 - pow(-2 * x + 2,2))+ 1)/ 2;
},
easeInElastic: function(x){
return x === 0?0 : x === 1?1 :
-pow(2,10 * x - 10)* sin((x * 10 - 10.75)* c4);
},
easeOutElastic: function(x){
return x === 0?0 : x === 1?1 :
pow(2,-10 * x)* sin((x * 10 - 0.75)* c4)+ 1;
},
easeInOutElastic: function(x){
return x === 0?0 : x === 1?1 : x < 0.5?
-(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 < 0.5?
(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 < 0.5?
(1 - bounceOut(1 - 2 * x))/ 2 :
(1 + bounceOut(2 * x - 1))/ 2;
}
});
});
网友评论