Animation.matrix3d

Animation.matrix3d

解釋： 3D 轉換，同transform-function matrix。

方法參數(shù)

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

示例 

在開發(fā)者工具中打開

圖片示例

代碼示例

<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({
    onLoad() {
        this.animation = swan.createAnimation({
            duration: 1000,
            timingFunction: 'ease',
            delay: 0,
            transformOrigin: '50% 50%'
        });
    },
    matrix3d() {
        this.animation.matrix3d(
            1, 0, 0, 0,
            0, 1, 0, 0,
            0, 0, 1, 0,
            -50, -100, 0, 1
        ).step();
        // 根據(jù)matrix3d(
            // scalex,0,0,0,
            // skewx,scaley,0,0,
            // 0,0,scalez,0,
            // translatex,translatey,translatez,1
        // ) 的變化規(guī)則
        // 上面相當于 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()});
    }
});