wenyiweb / Canvaskeyframes
最简单的序列帧动画canvas插件
Stars: ✭ 83
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Canvaskeyframes
Knowledge
文档着重构建一个完整的「前端技术架构图谱」,方便 F2E(Front End Engineering又称FEE、F2E) 学习与进阶。
Stars: ✭ 1,620 (+1851.81%)
Mutual labels: canvas, dom
Disintegrate
A small JS library to break DOM elements into animated Canvas particles.
Stars: ✭ 251 (+202.41%)
Mutual labels: canvas, dom
Html To Image
✂️ Generates an image from a DOM node using HTML5 canvas and SVG.
Stars: ✭ 595 (+616.87%)
Mutual labels: canvas, dom
Online Privacy Test Resource List
Privacy Online Test and Resource Compendium (POTARC) 🕵🏻
Stars: ✭ 185 (+122.89%)
Mutual labels: canvas, dom
Curtainsjs
curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.
Stars: ✭ 1,039 (+1151.81%)
Mutual labels: canvas, dom
Siriwave
The Apple® Siri wave-form replicated in a JS library.
Stars: ✭ 1,186 (+1328.92%)
Mutual labels: canvas
Icon Machine
Web application for randomly generating pixel art icons.
Stars: ✭ 73 (-12.05%)
Mutual labels: canvas
Merge Images
Easily compose images together without messing around with canvas
Stars: ✭ 1,172 (+1312.05%)
Mutual labels: canvas
React Faux Dom
DOM like structure that renders to React (unmaintained, archived)
Stars: ✭ 1,226 (+1377.11%)
Mutual labels: dom
Shadertoy React
6kB "Shadertoy" like react component letting you easily render your fragment shaders in your React web projects, without having to worry about implementing the WebGL part.
Stars: ✭ 74 (-10.84%)
Mutual labels: canvas
Sauron
Sauron is an html web framework for building web-apps. It is heavily inspired by elm.
Stars: ✭ 1,217 (+1366.27%)
Mutual labels: dom
Phaser Ce
Phaser CE is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.
Stars: ✭ 1,186 (+1328.92%)
Mutual labels: canvas
Touchable
Flutter library to add gestures and animations to each Shape you draw on your canvas in your CustomPainter
Stars: ✭ 82 (-1.2%)
Mutual labels: canvas
React Ape
🦍• [Work in Progress] React Renderer to build UI interfaces using canvas/WebGL
Stars: ✭ 1,183 (+1325.3%)
Mutual labels: canvas
Ditherjs
A javascript library which dithers an <img> using a fixed palette
Stars: ✭ 76 (-8.43%)
Mutual labels: canvas
Udoit
The Universal Design Online content Inspection Tool, or UDOIT (pronounced, “You Do It”) enables faculty to identify accessibility issues in Canvas by Instructure. It will scan a course, generate a report, and provide resources on how to address common accessibility issues.
Stars: ✭ 80 (-3.61%)
Mutual labels: canvas
CanvasKeyFrames - HTML5 Canvas 图片序列帧播放工具
CanvasKeyFrames
图片序列帧播放工具,用canvas操作图片动画,封装了常用方法。
- el [canvas容器,必须是DOM对象]
- type [图片模式,'array'和 'sprite'模式,array是图片对象数组,sprite是基于宽度扩展的单张雪碧图]
- imgs [图片帧对象数组或单图,对应不同模式]
- options {
cover: 10, //指定封面帧,默认是0
fps: 30, //默认是24
loop: 10 //初始化默认的循环次数,可以手动设置大于等于1的整数。在formTo中可以设置。默认是infinite。
width: 300, //注意,隐藏元素是拿不到宽度的,所以特殊情况下需要指定宽度
height: 300,
_iw: 300, // 雪碧图中单个图片的宽度
_ih: 300, // 雪碧图中单个图片的高度
framesCount: 10 // 雪碧图帧数
}
API
CanvasKeyFrames(el, type, imgs, options)
-
el
canvas容器,必须是DOM对象 -
type
图片模式,'array'和 'sprite'模式,array是图片对象数组,sprite是基于宽度扩展的单张雪碧图 -
imgs
图片帧对象数组或单图,对应不同模式 -
options
-
cover
指定封面帧,默认是0 -
fps
默认是24 -
loop
初始化默认的循环次数,可以手动设置大于等于1的整数。在formTo中可以设置。默认是infinite。 -
width
隐藏元素是拿不到宽度的,所以特殊情况下需要指定宽度 -
height
隐藏元素是拿不到宽度的,所以特殊情况下需要指定宽度 -
_iw
雪碧图中单个图片的宽度 -
_ih
雪碧图中单个图片的高度 -
framesCount
雪碧图帧数
-
Install
- base
your html
<script src="canvas-keyframes.js"></script>
- npm
npm i canvaskeyframes
your app.js
import CanvasKeyFrames from 'canvaskeyframes'
方法介绍
goto(n) 跳转到某一帧
next() 下一帧
prev() 上一帧
fromTo(from, to, loop, callback)
from [启始帧(从0开始)] to [结束帧数] loop [循环次数,默认是infiniten] callback [回调函数]
toFrom(to, from, loop, callback)
to [启始帧(从高位开始)] from [结束帧数(从低位结束)] loop [循环次数,默认是infiniten] callback [回调函数]
repeatplay(from, to, loop, callback)
fromto正着播一遍,然后回调fromBack,倒着播一遍,然后再回调toBack,进行逻辑判断 from [启始帧(从0开始)] to [结束帧数] loop [循环次数,默认是infinite正播过去,再倒播回来] callback [回调函数]
from(from, loop, callback)
from [启始帧(从0开始)] loop [循环次数,默认是infinite] callback [回调函数]
to(to, loop, callback)
to [结束帧数] loop [循环次数,默认是infinite] callback [回调函数]
pause() 暂停动画
stop() 停止并回到第一帧或cover帧
play() 从当前位置播放动画,会继承上次使用fromTo、form或to的属性
destroy() 销毁对象
前端学习交流群,QQ群 : 692337464
觉得有用,请我喝杯咖啡吧~
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].