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({
        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();
            // 根据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()});
        }
    });