阅读(3541) 赞(9)

百度智能小程序 Animation

2020-08-13 15:46:52 更新

Animation

解释：动画实例可以调用以下方法来描述动画，调用结束后会返回自身，支持链式调用的写法。

属性说明

属性名	说明
Animation.matrix	同transform-function matrix
Animation.matrix3d	3D 转换，同transform-function matrix
Animation.rotate	从原点顺时针旋转一个角度
Animation.rotate3d	从固定轴顺时针旋转一个角度
Animation.rotateX	从 X 轴顺时针旋转一个角度
Animation.rotateY	从 Y 轴顺时针旋转一个角度
Animation.rotateZ	从 Z 轴顺时针旋转一个角度
Animation.scale	缩放
Animation.scale3d	缩放
Animation.scaleX	缩放 X 轴
Animation.scaleY	缩放 Y 轴
Animation.scaleZ	缩放 Z 轴
Animation.skew	对 X、Y 轴坐标进行倾斜
Animation.skewX	对 X 轴坐标进行倾斜
Animation.skewY	对 Y 轴坐标进行倾斜
Animation.translate	平移变换
Animation.translate3d	对 X、Y、Z 坐标进行平移变换
Animation.translateX	对 X 轴平移
Animation.translateY	对 Y 轴平移
Animation.translateZ	对 Z 轴平移

示例

图片示例

代码示例 1: 动画队列

在开发者工具中打开

<view class="wrap">
    <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
</view>

Page({
    data: {
        animationData: {}
    },
    startToAnimate() {
        const animation = swan.createAnimation();
        animation.rotate(90).translateY(10).step();
        animation.rotate(-90).translateY(-10).step();
        this.setData({
            animationData: animation.export()
        });
    }
});

代码示例 2: 动画样式设置

在开发者工具中打开

<view class="wrap">
    <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
</view>

Page({
    data: {
        animationData: {}
    },
    startToAnimate() {
        const animation = swan.createAnimation({
            transformOrigin: '50% 50%',
            duration: 1000,
            timingFunction: 'linear',
            delay: 0
        });
        animation.opacity(0.5);
        animation.backgroundColor('#DC143C');
        animation.rotate(90).translateY(10).step();
        animation.rotate(-90).translateY(-10).step();
        this.setData({
            animationData: animation.export()
        });
        console.log('createAnimation', animation);
    }
});

代码示例 3: 动画宽高设置

在开发者工具中打开

<view class="wrap">
    <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
</view>

Page({
    data: {
        animationData: {}
    },
    startToAnimate() {
        const animation = swan.createAnimation({
            transformOrigin: '50% 50%',
            duration: 1000,
            timingFunction: 'linear',
            delay: 0
        });
        animation.opacity(0.5);
        animation.backgroundColor('#DC143C');
        animation.width('20px');
        animation.height('70px');
        animation.top('40px');
        animation.left('90px');
        animation.bottom('60px');
        animation.right('80px');
        animation.rotate(90).translateY(10).step();
        animation.rotate(-90).translateY(-10).step();
        this.setData({
            animationData: animation.export()
        });
        console.log('createAnimation', animation);
    }
});

代码示例 4: 底部弹窗自定义动画（css 控制）

在开发者工具中打开

<button bindtap="showshadow" type="primary">点击显示底部弹框</button>

<view class="content {{click? 'showContent': 'hideContent'}} {{option? 'open': 'close'}}" hover-stop-propagation="true">
    <!-- 内容 -->
    <view class="content-top" s-for="item in list">
      {{item}}
    </view>
</view>

Page({
    data: {
        click: false, // 是否显示弹窗内容
        option: false, // 是否显示弹窗或关闭弹窗的操作动画
        list: ['列表一','列表二','列表三','列表四']
    },
    showshadow() {
        if (!this.data.click) {
            this.setData({
                click: true,
            })
        }
        if (this.data.option) {
            this.setData({
                option: false,
            })
            // 关闭显示弹窗动画的内容，若不设则点击任何地方，都会出现弹窗
            setTimeout(() => {
                this.setData({
                    click: false,
                })
            }, 500)
        } else {
            this.setData({
                option: true
            })
        }
    }
});

.content {
    width: 100%;
    position: absolute;
    bottom: 0;
    box-shadow: 0 0 10rpx #333;
    height: 0;
    z-index: 999;
    font-size: 28.99rpx;
}

.showContent {
    display: block;
}

.hideContent {
    display: none;
}

/* 显示或关闭内容时动画 */
.open {
    animation: slideContentUp 0.5s ease-in both;
}

.close {
    animation: slideContentDown 0.5s ease-in both;
}

/* 弹出或关闭动画来动态设置内容高度 */
@keyframes slideContentUp {
    from {
        height: 0;
    }

    to {
        height: 800rpx;
    }
}

@keyframes slideContentDown {
    from {
        height: 800rpx;
    }

    to {
        height: 0;
    }
}

代码示例 5: 底部弹窗自定义动画（API 控制）

在开发者工具中打开

<view class="wrap">
    <button bindtap="showShadow" type="primary">点击显示底部弹框</button>

    <!-- 遮罩层 -->
    <view class="shadow" s-if="{{chooseSize}}" bindtap="hideModal"></view>
    <!-- 上滑高度 -->
    <view class="choosen" s-if="{{chooseSize}}" animation="{{animationData}}">
    <!-- 内容 -->
    <view class="content-top" s-for="item in list">
        {{item}}
    </view>
</view>

Page({
    data:{
        chooseSize: false,
        list: ['列表一','列表二','列表三','列表四']
    },
    showShadow(e){
        this.data.chooseSize ? this.hideModal() : this.chooseSezi();
    },
    chooseSezi() {
        // 创建一个动画实例
        let animation = swan.createAnimation({
            transformOrigin: "50% 50%",
            duration: 1000,
            timingFunction: "ease",
            delay: 0
        });

        animation.translateY(1000).step();
        this.setData({
            animationData: animation.export(),
            chooseSize: true
        })
        // 设置setTimeout来改变y轴偏移量，实现有感觉的滑动 滑动时间
        setTimeout(() => {
            animation.translateY(0).step();
            this.setData({
                animationData: animation.export(),
                clearcart: false
            })
        }, 100);
    },
    // 隐藏
    hideModal(e) {
        let animation = swan.createAnimation({
            transformOrigin: "50% 50%",
            duration: 1000,
            timingFunction: "ease",
            delay: 0
        })

        animation.translateY(700).step();
        this.setData({
            animationData: animation.export()
        })
        setTimeout(() => {
            animation.translateY(0).step();
            this.setData({
                animationData: animation.export(),
                chooseSize: false
            })
        }, 500);
    }
});

代码示例 6: 弹出菜单特效的实现

在开发者工具中打开

<view>
    <image src="/images/ai.png" class="image" animation="{{animFavor}}"></image>
    <image src="/images/basecontent.png" class="image" animation="{{animShare}}"></image>
    <image src="/images/canvas.png" class="image" animation="{{animWrite}}"></image>
    <image src="/images/interface.png" class="image-plus" animation="{{animPlus}}" bindtap="isPopping"></image>
</view>

Page({
    data: {
        isPopping: false,
        animPlus: {},
        animFavor: {},
        animShare: {},
        animWrite: {},
    },
    isPopping () {
        if (this.data.isPopping) {
            this.pop();
            this.setData({
                isPopping: false
            })
        } else {
            this.popBack();
            this.setData({
                isPopping: true
            })
        }
    },
    pop() {
        let animationPlus = swan.createAnimation({
            duration: 500,
            timingFunction: 'ease-out'
        })
        let animFavor = swan.createAnimation({
            duration: 500,
            timingFunction: 'ease-out'
        })
        let animShare = swan.createAnimation({
            duration: 500,
            timingFunction: 'ease-out'
        })
        let animWrite = swan.createAnimation({
            duration: 500,
            timingFunction: 'ease-out'
        })
        animationPlus.rotateZ(180).step();
        animFavor.translate(-100, -100).rotateZ(180).opacity(1).step();
        animShare.translate(-140, 0).rotateZ(180).opacity(1).step();
        animWrite.translate(-100, 100).rotateZ(180).opacity(1).step();
        this.setData({
            animPlus: animationPlus.export(),
            animFavor: animFavor.export(),
            animShare: animShare.export(),
            animWrite: animWrite.export()
        })
    },
    popBack() {
        let animationPlus = swan.createAnimation({
            duration: 500,
            timingFunction: 'ease-out'
        })
        let animFavor = swan.createAnimation({
            duration: 500,
            timingFunction: 'ease-out'
        })
        let animShare = swan.createAnimation({
            duration: 500,
            timingFunction: 'ease-out'
        })
        let animWrite = swan.createAnimation({
            duration: 500,
            timingFunction: 'ease-out'
        })
        animationPlus.rotateZ(0).step();
        animFavor.translate(0, 0).rotateZ(0).opacity(0).step();
        animShare.translate(0, 0).rotateZ(0).opacity(0).step();
        animWrite.translate(0, 0).rotateZ(0).opacity(0).step();
        this.setData({
            animPlus: animationPlus.export(),
            animFavor: animFavor.export(),
            animShare: animShare.export(),
            animWrite: animWrite.export()
        })
    }
})

.image {
    height: 150rpx;
    width: 150rpx;
    position: absolute;
    bottom: 250rpx;
    right: 100rpx;
    opacity: 0;
}

.image-plus {
    height: 150rpx;
    width: 150rpx;
    position: absolute;
    bottom: 250rpx;
    right: 100rpx;
    z-index: 100;
}

← 百度智能小程序创建animation

百度智能小程序延迟执行 →