缓动函数

链接

欢迎大家访问我的个人网站四度空间

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衰减系数刹车,动画持续的时间和时间的缓动函数由衰减系数决定
  • 自定义动画

自定义动画?

方法一:
  1. 自定义动画第一步需要自定义时间的缓动函数曲线。
  2. 实现POPCustomAnimation类的Block代码块参数。每次CADisplayLink定时器触发时也就是每一帧动画都会调用我们定义好的Block。
  3. 记录动画开始时的基准时间、X轴的时间进度[0-1]百分比、调用缓动函数ElasticEaseOut对应的C语言函数(参照JS函数表)计算出Y值进度[0-1]百分比、根据缓动函数输出的Y值计算动画插值赋值给UI对象、判断如果Y值进度小于1继续动画
方法二:(有局限,只适用于较简单的动画)
  1. 移动两个坐标点随意构建缓动函数曲线
  2. 获取两个坐标点坐标。为什么POP动画的自定义换动函数API只能输入两个坐标点,原来贝塞尔曲线真的是通过两个坐标点构建的(当然这里排除(0,0)和(1,1)这两个坐标)。在动画执行之前就把缓动函数构建完成,这样就不用每一帧动画都计算一次缓动函数下一坐标点了,当然在动画开始之前就构建出完整的缓动函数曲线在精度是比不上每一帧都调用曲线的C语言函数这个方法的。
  3. 自定义缓动函数完成之后,更可以把自定义曲线的名字和两个坐标点以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;

            }

        });

});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容