<template>
  <jsv-texture-anim
    :src="lightImg"
    :animation="swipAnim"
    :width="size.width"
    :height="size.height"
    :duration="msDuration"
    :transform="transform"
    :borderRadius="borderRadius"
    :repeat="repeat"
    :autoStart="true"
    :onAnimationEnd="onAnimationEnd"
  ></jsv-texture-anim>
</template>
<script setup>
import { JsvTextureAnim } from "jsview";

const props = defineProps({
  lightImg: {
    type: String,
  },
  size: {
    type: Object,
    required: true,
  },
  borderRadius: {
    type: Number,
    default: 0,
  },
  duration: {
    //秒
    type: Number,
    default: 1,
  },
  angle: {
    //度数
    type: Number,
    default: 30,
  },
  lightWidth: {
    type: Number,
    default: 100,
  },
  repeat: {
    // 重复次数, -1 无限循环; >=0 重复次数
    type: Number,
    default: 0,
  },
  onAnimEnd: {
    type: Function,
  },
});

const msDuration = Math.round(props.duration * 1000);
const transform = `scale3d(0.5, 1, 1) rotate3d(0,0,1, ${props.angle}deg)`;
const swipAnim =
  "{from {transform: translate3d(-100%, 0, 0);} to {transform: translate3d(100%, 0, 0);}}";

function onAnimationEnd() {
  props.onAnimEnd?.();
}
</script>
