Animation.matrix3d

解释: 3D转换,同transform-function matrixAnimation.matrix3d - 图1

方法参数

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

示例

在开发者工具中预览效果

扫码体验

Animation.matrix3d - 图2请使用百度APP扫码

图片示例

Animation.matrix3d - 图3

Animation.matrix3d - 图4

Animation.matrix3d - 图5

代码示例

  1. <view class="wrap">
  2. <view class="animation-element-wrapper">
  3. <view class="animation-element" animation="{{animation}}"></view>
  4. </view>
  5. <view class="card-area">
  6. <view class="top-description border-bottom">展示动画</view>
  7. <button type="primary" bindtap="matrix3d">matrix3d</button>
  8. </view>
  9. </view>
  1. Page({
  2. data:{ },
  3. onReady() {
  4. this.animation = swan.createAnimation({
  5. transformOrigin: "50% 50%",
  6. duration: 1000,
  7. timingFunction: "ease",
  8. delay: 0
  9. })
  10. },
  11. matrix3d() {
  12. this.animation.matrix3d(
  13. 1,0,0,0,
  14. 0,1,0,0,
  15. 0,0,1,0,
  16. -50,-100,0,1
  17. ).step()
  18. // 根据matrix3d(scalex,0,0,0,skewx,scaley,0,0,0,0,scalez,0,translatex,translatey,translatez,1)变化规则
  19. //上面相当于 scale3d(1,1,1) translate3d(-50, -100, 0) rotate3d(0, 0, 0, 0deg) skew(0deg, 0deg)
  20. //可写成如下形式
  21. // this.animation.scale3d(1,1,1)
  22. // .translate3d(-50, -100, 0)
  23. // .rotate3d(0, 0, 0, 0)
  24. // .skew(0, 0)
  25. // .step()
  26. this.setData({animation: this.animation.export()})
  27. }
  28. });