12.动画

  • 学习人数 15K+
  • 适合有C语言基础人群学习
avatar
林耿亮

你好编程主讲老师

1. 怎样实现动画

相信大家已经对动画的原理已经不陌生了。想要目标物体动起来,只需要逐个播放目标物体每一时刻位置的图片。只要播放的速度足够快,人们就会在视觉上认为目标物体动起来了。一般来说电视每秒会播放24帧静态画面,而游戏则更高。

我们先从绘制一个圆形开始。

创建一个800 * 600的窗体。坐标系原点在窗体中心,X轴正方向向右,Y轴正方向向上。背景色设置为RGB(164, 225, 202),最后调用cleardevice函数,使用背景色清空整个窗体。

将填充颜色设置为白色,并在(-400, 0)的位置,绘制半径为50的填充圆。

#include <easyx.h>
#include <stdio.h>

int main()
{
    initgraph(800, 600);
    //  坐标系原点在窗体中心,X轴正方向向右,Y轴正方向向上
    setorigin(400, 300);
    setaspectratio(1, -1);
    //  设置背景色
    setbkcolor(RGB(164, 225, 202));
    //  使用背景色清空窗体
    cleardevice();
    //  设置填充颜色为白色WHITE
    setfillcolor(WHITE);
    //  在(-400, 0)的位置绘制一个半径为50的填充圆
    solidcircle(-400, 0, 50); 

    getchar();
    closegraph();
    return 0;
}

第一帧

这就是圆的初始位置(-400, 0)。现在我们希望这个圆形能够向右边移动,那么我们需要先把之前的圆清空掉。再在稍微靠右一点的位置,比如向右移动25像素,以圆心(-375, 0)绘制一个圆。重复这个步骤,就能绘制出圆在每一时刻位置的静态画面。每一张静态画面被称作动画的一帧。

#include <easyx.h>
#include <stdio.h>

int main()
{
    initgraph(800, 600);
    setorigin(400, 300);
    setaspectratio(1, -1);
    setbkcolor(RGB(164, 225, 202));
    cleardevice();
    setfillcolor(WHITE);

    int x, y = 0;
    for (x = -400; x <= 400; x += 25)
    {
        //  清空屏幕
        cleardevice();
        //  在(x, y)的位置绘制一个半径为50的填充圆
        solidcircle(x, y, 50);
        //  按回车键后,继续绘制下一帧
        getchar();
    }

    getchar();
    closegraph();
    return 0;
}

目前代码中,由于getchar函数的阻塞作用,在每一次绘制完一帧画面后,都需要按下回车键,才能清空屏幕并绘制下一帧画面。

作为动画当然能够自己动起来啦,将getchar替换为Sleep函数。Sleep函数可以让程序休眠一段时间,单位为毫秒。比如Sleep(200),在程序运行到这里时,将会休眠200毫秒,再运行其后的语句。

#include <easyx.h>
#include <stdio.h>

int main()
{
    initgraph(800, 600);
    setorigin(400, 300);
    setaspectratio(1, -1);
    setbkcolor(RGB(164, 225, 202));
    cleardevice();
    setfillcolor(WHITE);

    int x, y = 0;
    for (x = -400; x <= 400; x += 25)
    {
        cleardevice();
        solidcircle(x, y, 50);
        //  绘制一帧画面后,让画面停留200毫秒
        Sleep(200);
    }

    getchar();
    closegraph();
    return 0;
}

每秒5帧,相邻帧之间圆形移动25像素