欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

阿里犸良导出的json文件怎么使用

程序员文章站 2024-03-24 08:41:28
...

犸良是什么

犸良作为一站式动效制作平台,通过海量的动效素材以及可视化编辑能力,帮助零基础的用户轻松完成动效制作 ,支持全平台iOS,Android,H5,小程序。无论是营销展位、活动页面、空状态还是产品icon,让动效更简单。官网地址: https://design.alipay.com/emotion

Lottie 是什么

Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案,设计师可以使用 Adobe After Effects 设计出漂亮的动画之后,使用 Lottic 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式,就可以直接运用在 iOS、Android、Web 和 React Native之上,无需其他额外操作。
阿里犸良导出的json文件怎么使用

在h5中怎么使用导出的json

需要使用lottie来播放动画,先install

npm install lottie-web

为了方便以后使用,封装成一个组件Lottie.vue

<template>
    <div id="lottieContainer"></div>
</template>

<script>
    import lottie from 'lottie-web'
    export default {
        name: "Lottie",
        components: {},
        props:{
            options: {
                type: Object,
                required: true
            },
        },
        data() {
            return {}
        },
        methods: {},
        mounted(){
            if (typeof(this.options.loop) != 'boolean'){
                this.options.loop = true
            }
            if (typeof(this.options.autoPlay)!='boolean') {
                this.options.autoPlay = true
            }

            console.log('lottieOptions:',this.options)
            let lottieObj = lottie.loadAnimation({
                container: document.getElementById('lottieContainer'), // the dom element that will contain the animation
                renderer: 'svg',
                loop: this.options.loop,
                autoplay: this.options.autoPlay,
                path: this.options.path // the path to the animation json
            });
			// 把lottie对象传给父组件
            this.$emit('onCreated', lottieObj)

            // lottieObj.play() lottieObj.stop() lottieObj.pause()

        }
    }
</script>

父组件:

<template>
    <div class="parent">
        <Lottie :options="{path:'http://192.168.1.210:8400/static/lottie.json',loop:true,autoPlay:true }" @onCreated="lottieCreate"></Lottie>
    </div>
</template>

<script>
    import Lottie from '../components/common/Lottie'

    export default {
        name: 'Parent',
        components: {
            Lottie,
        },
        data() {
            return {
                lottie:{}
            }
        },
        methods: {
           lottieCreate(lottie){
               // 获取lottie原生对象,通过它可以设置动画速度、播放、暂停等操作	
               this.lottie = lottie
           },
           start(){
                this.lottie.play()
            },
            stop(){
                this.lottie.stop()
            },
        },
    }
</script>

更详尽 lottie-web 的API,请移步: https://github.com/airbnb/lottie-web

其他

lottie-ios: https://github.com/airbnb/lottie-ios

lottie-android: https://github.com/airbnb/lottie-android

lottie-miniapp : https://github.com/landn172/lottie-miniapp

相关标签: lottie 犸良