STM32学习笔记十六：WS2812制作像素游戏屏

STM32学习笔记十六：WS2812制作像素游戏屏

插值算法可以在两个值之间插入一系列连续的值，tick时间段越小，则输出数值越平滑。插值动画一般用于放大缩小旋转等。

之前我们的大飞机直接冲出来，然后急停，不太顺滑。我们应该让他快速冲出来，逐渐减速，直到速度为0。这个速度用插值来处理，就可以做到均匀减速了。

1、我们先定义一个插值动画类，并实现它：

ContinuousAnimation.h

/** ContinuousAnimation.h**  Created on: Dec 25, 2023*      Author: YoungMay*/#ifndef SRC_ANICOMP_CONTINUOUSANIMATION_H_
#define SRC_ANICOMP_CONTINUOUSANIMATION_H_
#include "Animation.h"class ContinuousAnimation: public Animation {
public:ContinuousAnimation();virtual ~ContinuousAnimation();int tick(uint32_t t);
};#endif /* SRC_ANICOMP_CONTINUOUSANIMATION_H_ */

ContinuousAnimation.cpp

/** ContinuousAnimation.cpp**  Created on: Dec 25, 2023*      Author: YoungMay*/#include "ContinuousAnimation.h"ContinuousAnimation::ContinuousAnimation() {// TODO Auto-generated constructor stub}ContinuousAnimation::~ContinuousAnimation() {// TODO Auto-generated destructor stub
}int ContinuousAnimation::tick(uint32_t t) {totalTick += t;if (((AnimationData*) dataList->prev->data)->time < totalTick) {isValid = 0;if (bindAddress != NULL)*bindAddress = ((AnimationData*) dataList->prev->data)->value;return ((AnimationData*) dataList->prev->data)->value;}if (((AnimationData*) dataList->next->data)->time > totalTick) {if (bindAddress != NULL)*bindAddress = ((AnimationData*) dataList->next->data)->value;return ((AnimationData*) dataList->next->data)->value;}ListNode *node = dataList->next;while (((AnimationData*) node->next->data)->time < totalTick) {node = node->next;}int st = ((AnimationData*) node->data)->time;int et = ((AnimationData*) node->next->data)->time;int sv = ((AnimationData*) node->data)->value;int ev = ((AnimationData*) node->next->data)->value;double per = (double) (totalTick - st) / (et - st);int val = sv + (ev - sv) * per;if (bindAddress != NULL)*bindAddress = val;return val;
}

 2、只有大飞机需要这个效果，所以我们只修改大飞机类，添加 startSpeedAnimation：

class EnemyT2: public EnemyBase {
public:EnemyT2();~EnemyT2();uint8_t tick(uint32_t t);void init();uint8_t show(void);uint8_t hitDetect(int x, int y, int damage);bool sharp[5][5] = { { 0, 1, 1, 1, 0 }, { 0, 0, 1, 0, 0 },{ 1, 1, 1, 1, 1 }, { 0, 1, 0, 1, 0 }, { 0, 1, 0, 1, 0 } };
private:ContinuousAnimation startSpeedAnimation;IntervalAniTimer_t fireTimer = { 2000, 6000 };void createBulletObject();
};

 3、在init函数中灌入数据

void EnemyT2::init() {damageAnimation.addItem(0, 0xa02000);damageAnimation.addItem(1000, 0x406000);explodeAnimation.addItem(0, 1);explodeAnimation.addItem(200, 2);explodeAnimation.addItem(400, 3);explodeAnimation.addItem(600, 4);explodeAnimation.addItem(800, 5);explodeAnimation.addItem(1000, 6);explodeAnimation.addItem(1200, 7);explodeAnimation.addItem(1400, 100);startSpeedAnimation.addItem(0, 100);startSpeedAnimation.addItem(3000, 5);startSpeedAnimation.bindAddress = &baseInfo.speed;ListPushBack(animationList, (LTDataType) &startSpeedAnimation);startSpeedAnimation.start();
}

这样，大飞机的tick函数就不需要对Y进行特殊的判断了。

我们可以LOG一下 速度的变化情况。

17:49:45.609 t=41, st=0, et=3000, sv=100, ev=1, val=99
17:49:45.648 t=82, st=0, et=3000, sv=100, ev=1, val=98
17:49:45.687 t=122, st=0, et=3000, sv=100, ev=1, val=96
17:49:45.730 t=163, st=0, et=3000, sv=100, ev=1, val=95
17:49:45.769 t=204, st=0, et=3000, sv=100, ev=1, val=94
17:49:45.812 t=244, st=0, et=3000, sv=100, ev=1, val=92
17:49:45.851 t=285, st=0, et=3000, sv=100, ev=1, val=91
17:49:45.894 t=326, st=0, et=3000, sv=100, ev=1, val=90
17:49:45.933 t=367, st=0, et=3000, sv=100, ev=1, val=88
17:49:45.972 t=407, st=0, et=3000, sv=100, ev=1, val=87
17:49:46.015 t=448, st=0, et=3000, sv=100, ev=1, val=86
17:49:46.054 t=489, st=0, et=3000, sv=100, ev=1, val=84
17:49:46.097 t=530, st=0, et=3000, sv=100, ev=1, val=83
17:49:46.136 t=570, st=0, et=3000, sv=100, ev=1, val=82
17:49:46.175 t=611, st=0, et=3000, sv=100, ev=1, val=80
17:49:46.218 t=652, st=0, et=3000, sv=100, ev=1, val=79
17:49:46.257 t=693, st=0, et=3000, sv=100, ev=1, val=78
17:49:46.300 t=733, st=0, et=3000, sv=100, ev=1, val=76
17:49:46.339 t=774, st=0, et=3000, sv=100, ev=1, val=75
17:49:46.382 t=815, st=0, et=3000, sv=100, ev=1, val=74
17:49:46.421 t=855, st=0, et=3000, sv=100, ev=1, val=72
17:49:46.460 t=896, st=0, et=3000, sv=100, ev=1, val=71
17:49:46.503 t=937, st=0, et=3000, sv=100, ev=1, val=70
17:49:46.542 t=978, st=0, et=3000, sv=100, ev=1, val=68
17:49:46.585 t=1018, st=0, et=3000, sv=100, ev=1, val=67
17:49:46.625 t=1059, st=0, et=3000, sv=100, ev=1, val=66
17:49:46.667 t=1100, st=0, et=3000, sv=100, ev=1, val=64
17:49:46.707 t=1141, st=0, et=3000, sv=100, ev=1, val=63
17:49:46.746 t=1181, st=0, et=3000, sv=100, ev=1, val=62
17:49:46.789 t=1222, st=0, et=3000, sv=100, ev=1, val=60
17:49:46.828 t=1263, st=0, et=3000, sv=100, ev=1, val=59
17:49:46.871 t=1304, st=0, et=3000, sv=100, ev=1, val=57
17:49:46.910 t=1344, st=0, et=3000, sv=100, ev=1, val=56
17:49:46.953 t=1385, st=0, et=3000, sv=100, ev=1, val=55
17:49:46.992 t=1426, st=0, et=3000, sv=100, ev=1, val=53
17:49:47.031 t=1466, st=0, et=3000, sv=100, ev=1, val=52
17:49:47.074 t=1507, st=0, et=3000, sv=100, ev=1, val=51
17:49:47.113 t=1548, st=0, et=3000, sv=100, ev=1, val=49
17:49:47.156 t=1589, st=0, et=3000, sv=100, ev=1, val=48
17:49:47.195 t=1629, st=0, et=3000, sv=100, ev=1, val=47
17:49:47.238 t=1670, st=0, et=3000, sv=100, ev=1, val=45
17:49:47.277 t=1711, st=0, et=3000, sv=100, ev=1, val=44
17:49:47.316 t=1752, st=0, et=3000, sv=100, ev=1, val=43
17:49:47.359 t=1792, st=0, et=3000, sv=100, ev=1, val=41
17:49:47.398 t=1833, st=0, et=3000, sv=100, ev=1, val=40
17:49:47.441 t=1874, st=0, et=3000, sv=100, ev=1, val=39
17:49:47.480 t=1915, st=0, et=3000, sv=100, ev=1, val=37
17:49:47.523 t=1955, st=0, et=3000, sv=100, ev=1, val=36
17:49:47.562 t=1996, st=0, et=3000, sv=100, ev=1, val=35
17:49:47.601 t=2037, st=0, et=3000, sv=100, ev=1, val=33
17:49:47.644 t=2077, st=0, et=3000, sv=100, ev=1, val=32
17:49:47.683 t=2118, st=0, et=3000, sv=100, ev=1, val=31
17:49:47.726 t=2159, st=0, et=3000, sv=100, ev=1, val=29
17:49:47.765 t=2200, st=0, et=3000, sv=100, ev=1, val=28
17:49:47.808 t=2240, st=0, et=3000, sv=100, ev=1, val=27
17:49:47.847 t=2281, st=0, et=3000, sv=100, ev=1, val=25
17:49:47.886 t=2322, st=0, et=3000, sv=100, ev=1, val=24
17:49:47.929 t=2363, st=0, et=3000, sv=100, ev=1, val=23
17:49:47.968 t=2403, st=0, et=3000, sv=100, ev=1, val=21
17:49:48.011 t=2444, st=0, et=3000, sv=100, ev=1, val=20
17:49:48.050 t=2485, st=0, et=3000, sv=100, ev=1, val=18
17:49:48.093 t=2526, st=0, et=3000, sv=100, ev=1, val=17
17:49:48.132 t=2566, st=0, et=3000, sv=100, ev=1, val=16
17:49:48.171 t=2607, st=0, et=3000, sv=100, ev=1, val=14
17:49:48.214 t=2648, st=0, et=3000, sv=100, ev=1, val=13
17:49:48.253 t=2688, st=0, et=3000, sv=100, ev=1, val=12
17:49:48.296 t=2729, st=0, et=3000, sv=100, ev=1, val=10
17:49:48.335 t=2770, st=0, et=3000, sv=100, ev=1, val=9
17:49:48.378 t=2811, st=0, et=3000, sv=100, ev=1, val=8
17:49:48.417 t=2851, st=0, et=3000, sv=100, ev=1, val=6
17:49:48.457 t=2892, st=0, et=3000, sv=100, ev=1, val=5
17:49:48.500 t=2933, st=0, et=3000, sv=100, ev=1, val=4
17:49:48.539 t=2974, st=0, et=3000, sv=100, ev=1, val=2

匀速变化的做好了， 相同方法，还可以做一些加减速插值的。

STM32学习笔记十七：WS2812制作像素游戏屏-飞行射击游戏（7）探索动画之故事板