前端实现序列帧_canvas实现序列帧动画的案例

一个canvas实现序列帧的案例-开红包动画：initCanvas(callback){

let canvas = document.querySelector('#canvas'); //获取canvas对象

canvas.width = '300';

canvas.height = '300';

let ctx = canvas.getContext('2d'); //获取2d上下文

let frame = 0 //帧数

let img = new Image(); //创建img

img.src = 'https://p5.ssl.qhimg.com/d/inn/bec43552e015/line3.png';//给img添加资源

let imgW = 8000;//整张大图的宽度

let x = 0, y = 0, w = 400, h = 400, iX = 0, iY = 0;

let animate = function() {

//定义一个帧数的变量,函数每一帧执行一次,则frame就加一次,以此记录帧数

frame++;

ctx.clearRect(0, 0, canvas.width, canvas.height)

//每过8帧执行一次 x += w 以此达到切换图片的效果

if(frame % 8 === 0 ) {

x += w

if (x >= imgW - w) { //判定当走到最后一张

callback && callback();

return;

}

//每隔一帧就执行绘画飞机的操作

ctx.drawImage(img, x, y, w, h, iX, iY, 300, 300);

//为避免frame加到太大,在这里做一个当frame加到10000时,又让它为0的操作

if(frame > 10000 ) {

frame = 0;

}

//利用requestAnimationFrame达到动画效果

requestAnimationFrame(animate);

}

img.onload = function(){

//定义变量:图片截取的位置(x,y) 图片截取的宽高(w,h), 截取的飞机在canvas中的位置(iX, iY)

animate();

}

帧图片素材

一张图片上放满每一帧的图片，eg:

欢迎转载，请注明本文的链接地址：

前端实现序列帧_canvas实现序列帧动画的案例相关推荐

小猿圈自学web前端之CSS3动画练习案例：用CSS3做个钟表
前段时间发的五子棋的游戏很多小伙伴都私聊让再做个,今天小猿圈web前端讲师为大家分享的是CSS3动画练习案例:用CSS3做个钟表,想玩的小伙伴记得自己运行一下呦. 自学CSS3属性之后,我们来用一个小 ...
【前端实例代码】霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> ...
【前端实例代码】霓虹灯按钮动画效果悬停| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> & ...
web前端技术（二）之动画进阶
web前端技术(二)之动画进阶目录 web前端技术(二)之动画进阶前言一.web前端动画是什么二.2D转换标签(transforms) 1. translate() 2.rotate() 3. ...
万彩动画大师-案例视频教程(中级)
博客笔记:万彩动画大师-零基础视频教程-笔记 -- 视频学习网址 -- 参考项目展示1.参考项目展示2 博客笔记:万彩动画大师-案例视频教程(中级) -- 视频学习网址 -- 参考项目展示工程文 ...
3dmax：3dmax动画栏之关键帧动画经典案例(弹跳小球、实活力小球(上升慢下降快)、小球跳墙、跳动越来越低的小球实例、空间跳动的小球、球跳阶梯)之详细攻略
3dmax:3dmax动画栏之关键帧动画经典案例(弹跳小球.实活力小球(上升慢下降快).小球跳墙.跳动越来越低的小球实例.空间跳动的小球.球跳阶梯)之详细攻略目录
javaScript动画项目案例
javaScript动画项目案例示例代码:我的github demo效果演示示例:我的demo网站 1.动画库编写匀速运动案例一效果:匀速运动 <!DOCTYPE html> &l ...
AEJoy —— 详解 AE 如何将 png 序列帧导出为 SVGA 动画文件
效果预览我在 PC 上用 OpenGL 实现了一个 svga 预览的程序 "闪烁"是原序列帧设计的问题 1.导入 png 序列帧至AE 从菜单栏 "导入" - ...
前端技术周刊 2019-01-07：CSS 动画
2019-01-07 前端快爆 Chrome 72 已经进入了 beta 阶段.新增:公有类成员的声明和初始化.一些 DevTools 新功能(可视化性能指标.高亮 text nodes.复制节点的 ...
web前端入门到实战：CSS动画之旋转魔方轮播
下面我将一步一步详解如何利用纯CSS实现一个旋转魔方轮播的效果. 总的来说我们需要实现以下两个主要功能: 构建一个能够旋转的立方体让立方体拥有基本轮播所具有的特性但在完成以上两点之前我们需要再次了 ...

前端实现序列帧_canvas实现序列帧动画的案例

前端实现序列帧_canvas实现序列帧动画的案例相关推荐

最新文章

热门文章