Comments (11)
现在spritejs是2d库,3d是不支持的,rotateX和translateX支持,因为rotate和translate的值是数组[x, y]
from spritejs.
rotateX,rotateY也是不支持的吧,我看attrjs里rotate参数只有一个是控制z轴的
from spritejs.
哦,对,rotateX、rotateY不支持,translateX、translateY是支持的
from spritejs.
还有个问题,就是与css3 keyframe渲染不一致的问题,同样的参数下
@keyframes imgCustom1524134370590 { 0% { transform: translateX(0px) translateY(0px)} 20% { transform: translateX(0px) translateY(50px} 40% { transform: translateX(0px) translateY(100px} 60% { transform: translateX(0px) translateY(150px)} 80% { transform: translateX(0px) translateY(200px)} 100% { transform: translateX(0px) translateY(0px)} }
和spirtejs
el.animate([ { translate: [0, 0], offset: 0}, { translate: [0, -50], offset: 0.2 }, { translate: [0, -100], offset: 0.4 }, { translate: [0, -150], offset: 0.6 }, { translate: [0, -200], offset: 0.8 }, { translate: [0, 0], offset: 1 }, ], { duration: 5000, fill: "both", easing: "ease" })
两者的实际效果不一致,css3会根据百分比断断续续的上移,而spritejs则仿佛offset没有效果一样,直上直下的移动
from spritejs.
我知道你的意思了,SpriteJS的动画标准是Web Animations API
这个本来就和css3的keyframes是不一样的
https://code.h5jun.com/yunuy/edit?html,css,js,output
你可以看这个例子,这是原生的web animations api的效果,和spriteJS一致,和css3的keyframes-animation是不一致的
from spritejs.
那有什么办法实现像css3 keyframe 那样的效果吗?如果用spritejs的话应该如何配置出那种效果
anchor: [0, 0], x: 0, y: 0, opacity: 1, width: '', height: '', bgcolor: '', rotate: 0, scale: [1, 1], translate: [0, 0], skew: [0, 0], transform: 'matrix(1,0,0,1,0,0)', transformOrigin: '', transformMatrix: [1, 0, 0, 1, 0, 0], border: { width: 0, color: 'rgba(0,0,0,0)', style: 'solid', }, // border: [0, 'rgba(0,0,0,0)'], borderRadius: 0, dashOffset: 0, display: '', padding: [0, 0, 0, 0], zIndex: 0, offsetRotate: 'auto', gradients: {}, offsetDistance: 0, filter: '', // filter: {blur, ...} shadow: ''
应该是keyframe只支持attrjs里的这些配置吧,那是不是也不可以给每个keyframe单独写easing配置啊
from spritejs.
这个有好多种实现方式的,比如最简单的是:
https://code.h5jun.com/bocin/edit?js,output
animation.finished 和 transition 都返回 promise,很容易实现这种序列的动画
from spritejs.
我知道原因了,web animation api 是支持给每一段keyframe配置easing属性的,而spriejs是不支持的,
https://code.h5jun.com/pizi/edit?html,css,js,output 这个demo我试着给每一个关键帧都加上了easing参数然后效果就和css3 keyframe的效果是一样的了,看样子默认情况下css3 keyframe是将easing应用在了每一个关键帧上,每个关键帧动画都重新计算easing而web animation api是默认easing在这个动画区间生效,需要手动指定在每个关键帧内的easing才能应用到每一帧上,所以。。。这里是spritejs与web animation api 有点出入啊, 是不是可以考虑加一下在每一帧上配置easing呢
from spritejs.
这个特性我在下一版本加上
from spritejs.
赞
from spritejs.
已经加上啦
from spritejs.
Related Issues (20)
- 动画问题着急!!!!项目应用
- 小程序 canvas 2d 真机闪退
- 使用path或Polyline绘制路径,绘制的路径有问题 HOT 3
- 请问怎么给圆环添加圆角效果?
- 请问下:实例化多个 Path, 并且每个 Path 的 点位有几千个,通过 layer.append 批量添加,会导致卡顿,这种情况下要怎么处理呢? HOT 2
- Scene长度超出6000+,整个界面就会拉长没有按比例去绘制
- 想实现一个放烟花的效果,但是无从入手,求指点 HOT 1
- 模块“"spritejs"”没有导出的成员“ProtonRenderer” HOT 1
- SpriteSvg 在vue中传入一个本地svg文件加载不出来 HOT 2
- 未来有支持 webGPU的计划吗? HOT 1
- sprite.js label标签在win11上渲染异常 HOT 6
- 如何实现矩形框的拉大和缩小
- 如何实现放大缩小的效果 HOT 3
- 请问如何实现限定范围绘制,超出部分隐藏 HOT 1
- 中文文档中例子链接访问时会不断重定向 HOT 2
- server render with typescript
- Gradient的vector 怎么用啊
- 文字换行的最佳实践是啥?What is the best practice for wrapping text? HOT 2
- 依赖的css-select版本过低存在漏洞风险
- 如何监听组件的生命周期以及支持哪些事件?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from spritejs.