bilibili小程序

使用小贴士

bl.createAnimation

基础库版本 3.34.0 开始支持，且只支持在cover-*组件中添加animation属性生效，cover-view、cover-image、cover-input、cover-textarea、cover-label、cover-button、cover-svga。

创建一个动画实例 animation 。

参数

Object object

object 参数说明

属性名类型必填默认值说明
durationnumber否400动画持续时间（单位：ms）
timingFunctionstring否'linear'定义动画的效果
delaynumber否0动画延迟时间（单位：ms）
transformOriginstring否'50% 50% 0'动画原点位置（比如旋转的中心点）

timingFunction 有效值

值说明
linear以相同速度开始至结束
ease慢速开始，然后变快，然后慢速结束
ease-in慢速开始的过渡效果
ease-in-out动画以低速开始和结束
ease-out动画以低速结束
step-start动画第一帧就跳至结束状态直到结束，仅 iOS 支持
step-end动画一直保持开始状态，最后一帧跳到结束状态，仅 iOS 支持

返回值

Animation

示例代码

<template>
  <div class="animation-element-wrapper">
    <cover-view :animation="animationData">
      <cover-label>测试</cover-label>
    </cover-view>
  </div>
</template>
<script>
export default {
  data() {
    return{
      animationData: '',
      animation: null
    }
  },
  onLoad() {
    this.animation = bl.createAnimation({
      transformOrigin: '50% 50%',
      duration: 1000,
      timingFunction: 'ease',
      delay: 0
    });
  },
  methods: {
    setAnimationExport: function() {
      // 动画队列
      const ani = bl.createAnimation();
      ani.rotate(90).translateY(10).step();
      ani.rotate(-90).translateY(-10).step();
      this.animationData = ani.export();
    },
    setAnimationStyle: function() {
      // 动画样式设置
      this.animation.rotate(0)
          .scale(1)
          .translate(0, 0)
          .skew(0, 0)
          .width("70px")
          .height("70px")
          .backgroundColor("#2B99FF")
          .opacity(1)
          .step({
            duration: 0
          });
      this.animationData = this.animation.export();
    }
  },
  onReady() {
    this.setAnimationStyle();
  },
}
</script>
← bl.getSelectedTextRangeAnimation →