canvas 动画循环

Posted 2023-03-26

参考技术A 动画的绘制就是一个重复的过程，其原理就是重复的绘制和清除，就如同下面这张图形

主要有三种：

[图片上传中...(QQ20171228-194308-HD.gif-2daec8-1514461554620-0)]
[图片上传中...(QQ20171228-194308-HD.gif-9c4529-1514461563882-0)]

我们在进行绘图时需要给定图形的位置和宽高.在进行直线运动的时候，我们更改横向或纵向的位置即可

下面我们来写一个直线运动的动画，当方块触碰到边框时，运动方向改变，简称碰壁反弹

最后显示：

如果需要图形按圆周运动，需要通过三角函数计算图形的位置。

我们来模仿写一个球绕中心点的旋转，有三种方式

最后效果：

通过改变坐标系实现小球做圆周运动的效果,坐标系在上一次改变基础上变化

通过显示圆的不同小段边框显示圆周运动

通过三角函数改变球的x，y的值

有时候我们需要背景视图滚动的效果，例如微信的打飞机

我们绘制图片一定要预加载

最后效果：

c_cpp 使用Canvas永远循环动画（hacky方式）

#import "CSLoopingAnimationView.h"

@implementation CSLoopingAnimationView

- (void)startCanvasAnimation {

    [super startCanvasAnimation];

    [NSObject cancelPreviousPerformRequestsWithTarget:self
                                             selector:@selector(startCanvasAnimation)
                                               object:nil];
    [self performSelector:@selector(startCanvasAnimation)
               withObject:nil
               afterDelay:self.duration];
}

@end

#import <UIKit/UIKit.h>
#import "CSAnimation.h"
#import "CSAnimationView.h"

@interface CSLoopingAnimationView : CSAnimationView

@end