您的位置: 首页  >  文章  >  算法动画 - 理解函数曲线

算法动画 - 理解函数曲线

分类: 文章 • 2025-04-01 18:23:21

这篇梳理一些有关算法动画的生成思路。

用算法生成动画，大致可分成两类。一类是基于时间( time-based )，一类是基于帧( frame-based )。其中有何区别，我们先通过两段 Processing 代码去理解。

代码 01（ 基于帧 ）

算法动画 - 理解函数曲线



float x;
void setup(){
 size(600,200);
 x = 100;
}
void draw(){
 background(239,234,228);
 if(x < 500){
     x += 5;
 }
 fill(50,120,133);
 noStroke();
 ellipse(x,height/2,50,50);
}


代码浅析：


  • 代码中创建了一个变量 x 表示圆的横坐标。数值初始化为 100。而draw 函数中 x 每次累加 5，直到 500 停止累加。因此 x 的数值变化范围则是从 100 到 500，实现了小球从左到右的运动


代码 02 （ 基于时间 ）


算法动画 - 理解函数曲线




float time;
void setup(){
 size(600,200);
 time = 3;
}
void draw(){
 background(239,234,228);
 float x = min(500,map(millis()/1000.0,0,time,100,500));
 fill(50,120,133);
 noStroke();
 ellipse(x,height/2,50,50);
}


代码浅析：


    

  • 代码中创建了一个变量 time ，表示圆从左侧运动到右侧的时间
    • 

  • millis() 表示毫秒，因而 millis()/1000.0 表示秒。通过 map 函数，将时间从 0 到 time 的变化，映射为从 100 到 500 的变化。随着时间的递增，实现了小球从左到右的运动
    • 

  • min 函数用于限定 x 的大小，让数值不超过 500
    • 



简单比较


通过对比两段代码可以发现，虽然最终结果是近似的（小球从 100 匀速运动到 500），但决定运动的条件是不同的。前者限定了每次小球每次递增的距离，后者限定了整个运动的时间。


条件的不同，决定了在某些场景下，某种方法会比另一种方法使用起来更便利。例如要绘制一个运行速度恒定的小车，使用基于帧的算法写起来会更简便。若希望小车从 A 点运行到 B 点的时间是固定值，又或者实现时间间隔固定的淡入淡出效果（将数值变化映射到颜色变化），基于时间的算法则更合适。


除此之外，它们两者间还有一个更重要的区别。使得自己在制作动画时，更倾向使用基于时间的思路。


前面的例子中，由于绘制的都是一些非常简单的图形，所以程序运行必然非常流畅平稳的，维持在 60 fps。但如果程序有复杂的场景切换。某些场景绘制的元素多，占用更多计算资源。就会导致某个时间段运行帧率变慢。


我们可以设想下这个情况。假如小车每帧往前移动 1 个单位，第一秒内如果程序的帧率正常（60fps），这一秒小车就会移动 60 个单位。到第二秒开始，若场景里出现很多元素，导致程序帧率变成 20 fps了，由于小车每帧累加的值是固定的，所以这一秒，小车就只移动了 20 个单位。合起来，在两秒的时间中，小车只移动了 80 个单位。相比帧率恒定的情况下移动 120 个单位，小车移动的距离明显变小了。而且整个动画连起来看，小车做的就不再是匀速运动，出现先快后慢的结果。


为了避免这种情况，如果用基于时间的写法，效果就大有不同。因为这时小车的位置是根据时间的流逝多少决定的。它能保证在相应时间内，小车的位置都在“正确”的地方。只是帧率低的时候，画面运动的流畅度降低而已，整体小车的运行速度并没有变化。


基于这种特性。游戏中的运动基本是采用基于时间的算法去实现的。毕竟不同玩家的电脑配置可能有很大的区别，如果开发一个赛场游戏，汽车运动算法是基于帧的。那电脑配置高的玩家，车的速度就变快，这显然是不合理的。


运动的自然之道 - 使用函数曲线


算法动画 - 理解函数曲线


我们再来看前面写的小球动画。虽然它是动起来了，但显得很呆板。为何会产生这种感觉？这是因为违背了人的视觉经验。在日常生活中，我们很难看见一个物体从完全静止的状态突然变成匀速运动的状态，也很难看到一个运动中的物体瞬间静止。


要改善这种状况，一个简单的方式是引入“力”。比如下面的例子，实现了小球从静止到加速。


代码 03 ( 加速运动 )


算法动画 - 理解函数曲线




float posX;
float acc;
float vel;
void setup(){
 size(600,200);
 posX = 100;
}
void draw(){
 background(239,234,228);
 acc = 0.5;
 vel += acc;
 posX += vel;
 if(posX > 500){
   posX = 500;
 }
 fill(50,120,133);
 noStroke();
 ellipse(posX,height/2,50,50);
}


如果希望上面的小球在快接近目标的时候有减速的效果，就需要在上面增加一些属性或是添加判定条件。这样的做法显然有些繁琐，而且仍旧是“基于帧”的。如果我们希望准确地控制小球的运动时间，仅用上面代码是无法做到的。


有更简便的方式吗？函数曲线此时就可以派上用场。


函数曲线


我们先选一个典型的数学函数 sin


算法动画 - 理解函数曲线


再结合图像理解下面代码


代码 04 ( 加速到减速 )


算法动画 - 理解函数曲线




float time;
void setup(){
 size(600,200);
 time = 3;
}
void draw(){
 background(239,234,228);
 float sinInput = map(min(time,millis()/1000.0),0,time,-PI/2,PI/2);
 float x = map(sin(sinInput),-1,1,100,500);
 fill(50,120,133);
 noStroke();
 ellipse(x,height/2,50,50);
}


代码浅析：


    

  • 相比代码 03，例子 04 并没有用到速度，加速度等变量。但仍然可以看到小球有加速，减速的运动变化，而且可以通过 time 变量去控制小球的运动时间
    • 

  • 虽然运动并不严格遵循牛顿力学，但整体效果还是比较自然的。它很巧妙地利用了 sin 函数曲线的变化来映射小球的位置变化。具体的操作，是在 x 方向上截取一段合适的区间，然后将对应函数值 y 的变化，映射到我们需要的变化区间之内。若有模糊的地方，可以对照下图去理解
    • 



算法动画 - 理解函数曲线


    

  • 蓝线可以看成是“时间”（时间流逝速率恒定）。请脑补一个动画，蓝线以恒定的速度从 -0.5 π 的位置从左往右移动到 0.5 π 的位置。它与函数曲线的交点为 A。此时 A 点的 y 坐标就表示函数的输出值。可以看出在这个区间内移动，sin 函数的输出值就会从 -1 变化到 1。但这个输出的变化值我们不能直接使用，需要通过 map 函数，将它映射到在我们想要的范围内变化。
    • 

  • sin 函数在这里其实就是一个中转站。只是使用它前，需要将输入值和输出值做两次处理 （调用两次 map）。第一次调用 map 函数，就是将时间从 0 到 time 的变化，映射为 -PI/2 到 PI／2 之间的变化，再传入函数中。第二次调用 map，则是函数的输出值映射为我们需要的位置数值。
    • 



算法动画 - 理解函数曲线


  • 同一个函数，选择的输入区间不同。得出的结果也不同。假如选择从 A 点到 B 点作为变化区间，整体的运动速率就是先慢后快的加速过程。如果选择从 B 点到 C 点，则整体的运动速率就是先快后快的减速过程。要判断是加速还是减速，可以对照函数曲线。越平的地方，就代表运动越慢，越陡峭，就表明运动变化越快。


指数函数


当理解了上面的思路。现在数学函数就可以成为你的创作素材。常用的数学函数除了三角函数 sin，cos。还有指数函数。


一般地，y = a^x函数(a为常数且以a>0，a≠1)叫做指数函数。下图是 y=2^x 的图像。


算法动画 - 理解函数曲线


指数函数在 Processing 中写作




pow(a,b)


其中 a 表示底数，b 表示指数。pow(2,2) 表示 2 的 3 次方，结果为 8。


有关指数函数的用法就不再展开，与上面例子是类似,找准输入输出区间再作映射即可。函数曲线的使用是非常灵活的。不仅可以单独使用，还可以组合使用。例如两个基本函数进行相加和相成，都会得到意想不到的效果。


延展


现在仅仅靠指数函数与三角函数，就可以产生各种不同的函数曲线。下面代码就是指数函数与三角函数的叠加，它使得小球加速靠近的同时，能有一个来回的摆动。最终产生了带弹性的动画效果。




float inputVal = min(map(millis()/1000.0,0,time,0,1),1);
 float x = map(cos(inputVal * 20) * pow(2,-10.0 * inputVal),1,0,100,500);


( 替换例 04 的运动算法 )


算法动画 - 理解函数曲线


总结


要尽可能理解函数曲线的特性。就需要多加实验。函数曲线可不仅仅只能用在运动动画上。下面用了 5 种常用函数输出了几组 gif。分别控制图形的位置，颜色，旋转角度，大小。可以去从中感受不同函数曲线的个性。


    

  • 【 1 】线性递增(匀速变化)
    • 

  • 【 2 】sin 函数（区间 -PI/2 到 PI/2，从加速到减速）
    • 

  • 【 3 】指数函数(减速)
    • 

  • 【 4 】指数函数叠加 cos 函数(整体减速)
    • 

  • 【 5 】sin 函数(往复)
    • 



算法动画 - 理解函数曲线


（ 控制位置 ）


算法动画 - 理解函数曲线


（ 控制透明度 ）


算法动画 - 理解函数曲线


（ 控制旋转角度 ）


算法动画 - 理解函数曲线


（ 控制大小 ）


最后附上一张由 Kynd 整理的一张图，里面的函数曲线都很实用，有兴趣可以到此地址下载高清大图，了解更多函数曲线  ( http://thebookofshaders.com/05/kynd.png )


算法动画 - 理解函数曲线


算法动画 - 理解函数曲线





补充


函数曲线非常实用，但如果在程序中每次使用都要考虑各种映射关系，显然有点繁琐。更好的做法是把一些常用的函数曲线用一个类把它封装起来。


下面分享一段自己创作时常用到的类（代码基于C++，框架 openframeworks）




class WenzyAni{
public:
float ratio; // 内部表示完成进度 （范围一般为 0 到 1）
float startVal,endVal; // 开始的数值，结束的数值
float val; // 当前的数值
float time; // 完成整个动画所需的时间
int aniMode; // 决定数值的变化曲线类型
bool startMoving; // 是否开始运动
float startTick; // 开始的时刻记录
WenzyAni(){
}
WenzyAni(float time_,float startVal_,float endVal_,int mode_ = 0){
   time = time_;
   startVal = startVal_;
   endVal = endVal_;
   aniMode = mode_;
   startMoving = false;
   val = startVal_;
}
void update(){
   if(startMoving){
       ratio = MIN(time,ofGetElapsedTimef() - startTick)/time;
       if(aniMode == 0){
           // 匀速平滑过渡
           val = ofMap(ratio,0,1,startVal,endVal);
       }else if(aniMode == 1){
           // 先加速后减速（经过 sin 函数处理）
           float ratio2 = ofMap(sin(ofMap(ratio,0,1,-PI/2,PI/2)),-1,1,0,1);
           val = ofMap(ratio2,0,1,startVal,endVal);
       }else if(aniMode == 2){
           // 持续减速（指数衰减）
           val = ofMap(pow(2,-10 * ratio),1,0,startVal,endVal);
       }else if(aniMode == 3){
           // 弹簧效果
           val = ofMap(cos(ratio * 20) * pow(2,-10 * ratio),1,0,startVal,endVal);
       }else if(aniMode == 4){
           // cos 式往复
           float n = 2; // n 表示往复次数
           val = ofMap(cos(ratio * n * 2 * PI + PI),1,-1,startVal,endVal);
       }
   }
}
void start(){
   startMoving = true;
   startTick = ofGetElapsedTimef();
}
};


应用范例 01


ofApp.h 内 —-




#include “WenzyAni.h”
...
WenzyAni ani;
ofEasyCam cam;


ofApp.cpp 内 —-




void ofApp::setup(){
   ofSetWindowShape(1000,500);
   ofBackground(3,27,93);
   ani = WenzyAni(1, -300, 300,3);
}
void ofApp::update(){
   ani.update();
}
void ofApp::draw(){
   cam.begin();
   ofSetColor(233,60,37);
   ofDrawBox(ani.val,0,0,100);
   cam.end();
}
void ofApp::keyPressed(int key){
   if(key == '1'){
       ani.start();
   }
   if(key == '2'){
       ani = WenzyAni(1, -300, 300,3);
       ani.start();
   }
   if(key == '3'){
       ani = WenzyAni(1, 300, -300,3);
       ani.start();
   }
   if(key == '4'){
        ani = WenzyAni(1, -300, 300,0);
       ani.start();
    }
   if(key == '5'){
       ani = WenzyAni(1, -300, 300,1);
       ani.start();
   }
   if(key == '6'){
       ani = WenzyAni(1, -300, 300,2);
       ani.start();
   }
}





算法动画 - 理解函数曲线


代码浅析：


    

  • 

    start 函数为触发动画的函数。运行程序后按数字键 1 即开始执行，可以看到正方体将从左运动到右，并且带一点弹性动画。这是因为 setup 中有一句
    

    

      ani = WenzyAni(1, -300, 300,3)
    

    它将 ani 对象初始化时。第一个参数表示整个动画的运行时间，第二个参数表示初始的数值，第三个参数表示结束时的数值。第四个参数表示选择应用的曲线类型
    

    • 

  • draw 函数通过 ani.val 来表示正方体的横坐标
    • 

  • 每按下一次数字键 1 执行 start 函数时，正方体的运动都会从左变化到右。这是因为 startVal 与 endVal 的值在初始化时已经确定。如果希望正方形实现从右到左的运动，则需要重新初始化。按下数字键 3 就能实现这一效果。而来回按数字键 2，3 则能实现往复运动。
    • 



算法动画 - 理解函数曲线


  • 按数字键 4，5，6 可以切换不同的曲线


(数字键 4)


算法动画 - 理解函数曲线


(数字键 5)
算法动画 - 理解函数曲线
(数字键 6）


算法动画 - 理解函数曲线




应用范例 02


下面再附上上篇文章中展示的几个 gif 源码，还是使用同样的类


ofApp.h 内 —-




#include “WenzyAni.h”
...
vector<WenzyAni> ani;
int showMode;


ofApp.cpp 内 —-




void ofApp::setup(){
   ofSetWindowShape(1920,1080);
   ofBackground(239,234,228);
   for(int i = 0;i < 5;i++){
       ani.push_back(WenzyAni(2,0,1,i));
   }
   showMode = 0;
}
void ofApp::update(){
   for(int i = 0;i < ani.size();i++){
       ani[i].update();
   }
}
void ofApp::draw(){
   ofColor myColor(50,120,133);
   ofSetColor(myColor);
   ofSetCircleResolution(50);
   if(showMode == 0){
       int num = ani.size();
       float spaceRatio = 0.8; // 计算间隙占方块的大小比
       float rectW = ofGetHeight() / (num + (num + 1) * spaceRatio);
       float space = rectW * spaceRatio;
       int interval = (ofGetHeight() - space) / num;
       ofSetLineWidth(5);
       float startPos = ofGetWidth() * 0.1;
       float endPos = ofGetWidth() - startPos;
       for(int i = 0;i < num;i++){
           ofSetColor(myColor);
           float x = ofMap(ani[i].val,0,1,startPos,endPos);
           float y = space/2 + (i + 0.5)* interval;
           ofDrawCircle(x,y,25);
           ofDrawLine(startPos,y,endPos,y);
       }
   }else if(showMode == 1){
       int num = ani.size();
       float spaceRatio = 0.4; // 计算间隙占方块的大小比
       float rectW = ofGetWidth() / (num + (num + 1) * spaceRatio);
       float space = rectW * spaceRatio;
       float rectY = ofGetHeight() * 0.5;
       int interval = (ofGetWidth() - space) / num;
       for(int i = 0;i < num;i++){
           ofPushMatrix();
           float x = space/2 + (i + 0.5) * interval;
           ofTranslate(x, ofGetHeight()/2);
           ofSetColor(myColor,ofMap(ani[i].val,0,1,255,0));
           ofDrawCircle(0,0,rectW/2);
           ofPopMatrix();
       }
   }else if(showMode == 2){
       int num = ani.size();
       float spaceRatio = 0.4; // 计算间隙占方块的大小比
       float rectW = ofGetWidth() / (num + (num + 1) * spaceRatio);
       float space = rectW * spaceRatio;
       float rectY = ofGetHeight() * 0.5;
       int interval = (ofGetWidth() - space) / num;
       ofSetLineWidth(4);
       for(int i = 0;i < num;i++){
           ofSetColor(myColor);
           ofPushMatrix();
           float x = space/2 + (i + 0.5) * interval;
           ofTranslate(x, ofGetHeight()/2);
           ofRotate(ofMap(ani[i].val,0,1,0,180));
           ofDrawLine(0,rectW/2,0,-rectW/2);
           ofDrawCircle(0,rectW/2,30);
           ofDrawCircle(0,-rectW/2,30);
           ofPopMatrix();
       }
   }else if(showMode == 3){
       int num = ani.size();
       float spaceRatio = 0.4; // 计算间隙占方块的大小比
       float rectW = ofGetWidth() / (num + (num + 1) * spaceRatio);
       float space = rectW * spaceRatio;
       float rectY = ofGetHeight() * 0.5;
       int interval = (ofGetWidth() - space) / num;
       for(int i = 0;i < num;i++){
           ofPushMatrix();
           float x = space/2 + (i + 0.5) * interval;
           ofTranslate(x, ofGetHeight()/2);
           ofSetColor(myColor);
           float w = ofMap(ani[i].val,0,1,0,rectW);
           ofDrawCircle(0,0,w/2);
           ofPopMatrix();
       }
   }
   ofSetColor(0);
   ofDrawBitmapString("ShowMode:" + ofToString(showMode),50,50);
}
void ofApp::keyPressed(int key){
   if(key == 'r'){
       for(int i = 0;i < ani.size();i++){
           ani[i].start();
       }
   }
   if(key == OF_KEY_DOWN){
       showMode--;
       showMode = MAX(0,showMode);
   }
   if(key == OF_KEY_UP){
       showMode++;
       showMode = MIN(3,showMode);
   }
}


运行效果：



算法动画 - 理解函数曲线


算法动画 - 理解函数曲线


算法动画 - 理解函数曲线


算法动画 - 理解函数曲线


代码浅析：


    

  • 按 r 键开始动画，按方向键上下切换不用的模式
    • 

  • 模块中只列举了少数函数曲线，根据个人需要可以拓展补充
    • 



End


个人日常中还是倾向于通过自定义函数来使用曲线。如果你不想过于深究各类函数曲线的性质，只希望实现具体的效果。也有办法可以直接采用别人定制好的各类运动曲线。最后再推荐两个插件


OF 插件 - ofxAnimatable


算法动画 - 理解函数曲线


下载地址：https://github.com/armadillu/ofxAnimatable


附带的范例：


算法动画 - 理解函数曲线


Processing 插件 - Ani


在 IDE 的 Libraries 菜单中输入 “animation”


算法动画 - 理解函数曲线


又或是通过以下链接手动下载：


http://www.looksgood.de/libraries/Ani/


算法动画 - 理解函数曲线




算法动画 - 理解函数曲线





：）


∑编辑 | Gemini


来源 | InsLab


算法动画 - 理解函数曲线


算法数学之美微信公众号欢迎赐稿


稿件涉及数学、物理、算法、计算机、编程等相关领域，经采用我们将奉上稿酬。


投稿邮箱：[email protected]


															

																					

								

									相关推荐