是否支持rotate3d，perspective等3d变换

[Crazz-Joe]

看到attrjs源码里只有translate、rotate、scale、skew、和matrix的2d变换，那么像rotate3d、translate3d、skew3d、perspective等或者rotateX，translateY等该如何实现，是只能引入threejs这样的库吗

[akira-cn]

现在spritejs是2d库，3d是不支持的，rotateX和translateX支持，因为rotate和translate的值是数组[x, y]

[Crazz-Joe]

rotateX，rotateY也是不支持的吧，我看attrjs里rotate参数只有一个是控制z轴的

[akira-cn]

哦，对，rotateX、rotateY不支持，translateX、translateY是支持的

[Crazz-Joe]

还有个问题，就是与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没有效果一样，直上直下的移动

[akira-cn]

我知道你的意思了，SpriteJS的动画标准是Web Animations API

这个本来就和css3的keyframes是不一样的

https://code.h5jun.com/yunuy/edit?html,css,js,output

你可以看这个例子，这是原生的web animations api的效果，和spriteJS一致，和css3的keyframes-animation是不一致的

[Crazz-Joe]

那有什么办法实现像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配置啊

[akira-cn]

这个有好多种实现方式的，比如最简单的是：

https://code.h5jun.com/bocin/edit?js,output

animation.finished 和 transition 都返回 promise，很容易实现这种序列的动画

[Crazz-Joe]

我知道原因了，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呢

[akira-cn]

这个特性我在下一版本加上

[Crazz-Joe]

赞

[akira-cn]

已经加上啦