Animation.matrix3d
解释: 3D转换,同transform-function matrix。
方法参数
Number a1,Number b1,Number c1,Number d1,Number a2,Number b2,Number c2,Number d2,Number a3,Number b3,Number c3,Number d3,Number a4,Number b4,Number c4,Number d4
示例
扫码体验
请使用百度APP扫码
图片示例
代码示例
<view class="wrap">
<view class="animation-element-wrapper">
<view class="animation-element" animation="{{animation}}"></view>
</view>
<view class="card-area">
<view class="top-description border-bottom">展示动画</view>
<button type="primary" bindtap="matrix3d">matrix3d</button>
</view>
</view>
Page({
data:{ },
onReady() {
this.animation = swan.createAnimation({
transformOrigin: "50% 50%",
duration: 1000,
timingFunction: "ease",
delay: 0
})
},
matrix3d() {
this.animation.matrix3d(
1,0,0,0,
0,1,0,0,
0,0,1,0,
-50,-100,0,1
).step()
// 根据matrix3d(scalex,0,0,0,skewx,scaley,0,0,0,0,scalez,0,translatex,translatey,translatez,1)变化规则
//上面相当于 scale3d(1,1,1) translate3d(-50, -100, 0) rotate3d(0, 0, 0, 0deg) skew(0deg, 0deg)
//可写成如下形式
// this.animation.scale3d(1,1,1)
// .translate3d(-50, -100, 0)
// .rotate3d(0, 0, 0, 0)
// .skew(0, 0)
// .step()
this.setData({animation: this.animation.export()})
}
});