百度智能小程序 动画

animation-view Lottie 动画

解释：仅支持 Lottie 动画的客户端原生组件，使用时请注意相关限制，动画资源地址可到 lottie 的官方库进行查询。Lottie 使用入门，详见官方介绍；设计师精彩示例及动效文件，设计社区。

属性说明

action 有效值

示例 

在开发者工具中打开

代码示例 1： 动画资源地址在本地，path 为相对路径

<view class="wrap">
    <view class="card-area">
        <animation-view 
            class="controls" 
            path="{{path}}" 
            loop="{{loop}}" 
            autoplay="{{autoplay}}" 
            action="{{action}}" 
            hidden="{{hidden}}" 
            bindended="lottieEnd">
        </animation-view>
        <button bindtap="playLottie" type="primary">{{status}}lottie动画</button>
    </view>
</view>

Page({
    data: {
        path: '/anims/lottie_example_one.json',
        loop: true,
        autoplay: true,
        action: 'play',
        hidden: false,
        status: '暂停'
    },
    onShow() {
        console.log(' 百度APP版本11.3以上才可使用');
    },
    playLottie() {
        // 切换播放状态
        let action = this.data.action;
        action = action === 'pause' ? 'play' : 'pause';
        let status = action === 'pause' ? '播放' : '暂停';
        this.setData({
            action,
            status
        });
    },
    lottieEnd() {
        console.log('自然播放结束会触发回调，循环播放结束及手动停止动画不会触发。');
    }
});

代码示例 2： 动画资源地址在服务器上存放

此种使用方式建议在真机查看完整效果，注意 path 属性仅可在组件初始化时传入，不支持用 setData 方法后续动态传入。

在开发者工具中打开

<view class="wrap">
    <view class="card-area">
        <view class="animation-view-area">
            <animation-view 
                s-if="{{shouldShow}}" 
                class="controls" 
                path="{{path}}" 
                loop="{{loop}}" 
                autoplay="{{autoplay}}" 
                action="{{action}}" 
                hidden="{{hidden}}" 
                bindended="lottieEnd">
            </animation-view>
        </view>
        <button bindtap="playLottie" type="primary">{{status}}lottie动画</button>
    </view>
</view>

Page({
    data: {
        path: '',
        loop: true,
        autoplay: true,
        action: 'play',
        hidden: false,
        status: '暂停',
        shouldShow: ''
    },
    onShow() {
        console.log(' 百度APP版本11.3以上才可使用');
        swan.downloadFile({
            url: 'https://b.bdstatic.com/miniapp/images/lottie_example_one.json',
            header: {
                'content-type': 'application/json'
            },
            success: res => {
                const filePath = res.tempFilePath;
                this.setData({
                    shouldShow: true,
                    path: filePath
                });
            }
        });
    },
    playLottie() {
        // 切换播放状态
        let action = this.data.action;
        action = action === 'pause' ? 'play' : 'pause';
        let status = action === 'pause' ? '播放' : '暂停';
        this.setData({
            action,
            status
        });
    },
    lottieEnd() {
        console.log('自然播放结束会触发回调，循环播放结束及手动停止动画不会触发。');
    }
});

Bug & Tip

• Tip：animation-view 组件的位置信息、padding 值以 path 里传的 json 文件里的 left、top、padding 值为准。
• Tip：animation-view 组件不支持原生组件嵌套。
• Tip：为避免出现 iOS 中画面被拉伸的情况，建议将 animation-view 组件的长宽比设置的与动画长宽比一致。
• Tip：path 暂不支持远程路径，原因是端上暂不支持解析远程路径的 json 文件, 如果不想将 json 文件放在小程序包内，可以通过 API swan.downloadFile 将文件下载到本地，具体可参考上方代码示例 2。
• Tip：在保证产品体验流畅，不能影响性能的同时，建议在刷新、加载、运营 banner、按钮、图标等场景中适时适度的使用动效。
• Tip：互动型动画-建议不自动播放；展示型动画-建议自动播放。