嘟嘟云A sass ui框架

# 说明

Lottie (opens new window) （设计请进这个链接 (opens new window)） 是一个适用于Android，iOS，Web和Windows的库，它可以使用Bodymovin解析以json格式导出的Adobe After Effects动画，并在移动设备和Web上原生呈现它们！ 本插件是基于Lottie二次封装，用起来更为简洁清爽点

# 基础用法

通过添加 container append的节点和AE生成的动画JSON 即可完成一个动画加载

<template>
  <div class="lottie" ref="lottie"></div>
</template>
<script>
// const { Lottie } = require('db-tidy-ui/index');
// const loading = require('../.vuepress/public/lottieJson/loading2.json');
export default {
  mixins: [require('@public/mixin/animation/lottie').demo1], // vuepreess兼容写法项目勿用
  data () {
    return {
      show: false,
      anim: null
    }
  },
  // mounted() {
  //   this.anim = new Lottie({ // new 一个新的会返回当前的动画实例 可以执行lottie插件的所有api 具体请看http://airbnb.io/lottie/#/web
  //     container: this.$refs.lottie,
  //     animationData: loading,
  //     loop: true
  //   })
  // },
}
</script>
Expand Copy

# 使用线上链接

通过添加 path 指定链接

<template>
  <div class="lottie3" ref="lottie"></div>
</template>
<script>
// const { Lottie } = require('db-tidy-ui/index');
export default {
  mixins: [require('@public/mixin/animation/lottie').demo2], // vuepreess兼容写法项目勿用
  data () {
    return {
      show: false,
      anim: null
    }
  },
  // mounted() {
  //   this.anim = new Lottie({ // new 一个新的会返回当前的动画实例 可以执行lottie插件的所有api 具体请看http://airbnb.io/lottie/#/web
  //     container: this.$refs.lottie,
  //     path: '/lottieJson/lottie2.json',
  //     loop: true
  //   })
  // },
}
</script>
Expand Copy

# 进阶版

通过定义一些动作我们可以把整段动画进行分块，在指定的时间进行触发动作从而可以达到完美的交互体验。

  • 通过APi中的createAction 创建动作。他会直接绑定在当前的原型上, 可以以链式调用的方式创建多个。 创建完成的动作通过.的方式进行使用和访问。注：由于是通过action为Key所以名称不能相同不然会被覆盖
<template>
  <div class="lottie2" ref="lottie" @click="onClickLottie"></div>
</template>
<script>
// const { Lottie } = require('db-tidy-ui/index');
// const fight = require('../.vuepress/public/lottieJson/fight.json');
export default {
  mixins: [require('@public/mixin/animation/lottie').demo3], // vuepreess兼容写法项目勿用
  data () {
    return {
      show: false,
      anim: null
    }
  },
  methods: {
    onClickLottie(e) {
      const {
        offsetWidth
      } = this.$refs.lottie
      const {
        offsetX
      } = e
      offsetX >= offsetWidth / 2
       ? this.anim.hitRight()
       : this.anim.hitLeft()
    }
  },
  // mounted() {
  //   this.anim = new Lottie({ // new 一个新的会返回当前的动画实例 可以执行lottie插件的所有api 具体请看http://airbnb.io/lottie/#/web
  //     container: this.$refs.lottie,
  //     animationData: fight,
  //     loop: true
  //   }).createAction ({ // 创建动作后可以在当前对象  
  //     action: 'startAnimation',
  //     list: [
  //       [0, 65],
  //       [65, 75] // list可以多个会进行连续的播放动画 最后一个为停滞的动画执行 比如这边会停留在 65 - 75 循环
  //     ]
  //   }).createAction ({
  //     action: 'hitLeft',
  //     list: [
  //       [95, 115],
  //       [65, 75]
  //     ]
  //   }).createAction ({
  //     action: 'hitRight',
  //     list: [
  //       [75, 95],
  //       [65, 75]
  //     ]
  //   })
  //   this.anim.startAnimation()
  // },
}
</script>
Expand Copy

# 属性

# anim options

  • anim.play（）
  • anim.stop（）
  • anim.pause（）
  • anim.setLocationHref（locationHref） -一个参数通常以形式传递location.href。当您在Safari中的网址没有#符号的情况下遇到掩码问题时，它很有用。
  • anim.setSpeed（speed） -一个参数速度（1是正常速度）
  • anim.goToAndStop（value，isFrame）第一个参数是一个数值。第二个参数是一个布尔值，它定义第一个参数的时间或帧
  • anim.goToAndPlay（value，isFrame）第一个参数是一个数值。第二个参数是一个布尔值，它定义第一个参数的时间或帧
  • anim.setDirection（direction） -一个参数方向（1是法线方向。）
  • anim.playSegments（segments，forceFlag） -第一个参数是单个数组或两个值分别为（fromFrame，toFrame）的多个数组，第二个参数是一个布尔值，用于立即强制新段
  • anim.setSubframe（flag） -如果为false，它将遵循原始的AE fps。如果为true，它将尽可能更新。（默认为true
  • anim.destroy（）

# 实例的options

属性 说明 类型 可选值 默认值 版本
animationData 具有导出的动画数据的Object Object 1.0.0
path 动画对象的相对路径 Sting 1.0.0
loop 循环 Boolean true / false 1.0.0
autoplay 自动播放 Boolean true / false 1.0.0
name 动画名称 String 1.0.0
renderer 渲染模式 String svg / canvas / html 1.0.0
container dom元素 element 1.0.0

← wave 波动画指令 →