动画转盘抽奖

转盘计算奖品旋转位置

computingAngle(awards) {
  const CIRCLE_ANGLE = 360;
  const average = CIRCLE_ANGLE / awards.length;
  awards.forEach((item, i) => {
    const angle = -(i * average);
    item.angle = angle;
    item.style = `
      -webkit-transform: rotate(${angle}deg);
      transform: rotate(${angle}deg);
    `;
  });
  return awards;
},

文字弯曲效果

定义方法

/**
 * 传入数组使字符出现弯曲效果，需控制字数调整显示效果（待完善）
 * @param data {
 *  text: Array,
 *  rLen: Number, // 旋转角度
 *  xLen: Number, // 位移 x
 *  yLen: Number, // 位移 y
 * }
 */
wordCurveHandle(data) {
  const {
    text, rLen = 8, xLen = 2, yLen = 2,
  } = data;
  if (!text) return [];
  const words = [];
  const len = text.length;
  const isEven = len % 2 === 0;
  const midIndex = isEven ? len / 2 - 1 : (len - 1) / 2;
  text.forEach((word, i) => {
    let style = '';
    let index = 0;
    // 偶数
    if (isEven) {
      const condition = [
        { flag: i < midIndex, value: (i - midIndex) - 1 },
        { flag: i > midIndex, value: (i - midIndex) },
        { flag: i === midIndex, value: -1 },
      ];
      index = condition[condition.findIndex((item) => item.flag)].value;
    }
    // 奇数
    if (!isEven) {
      index = i - midIndex;
    }
    style = `
      display: inline-block;
      -webkit-transform-origin: 50% 100%;
      transform-origin: 50% 100%;
      -webkit-transform: rotate(${index * rLen}deg) translate(${index * xLen}px, ${Math.abs(index) * yLen}px);
      transform: rotate(${index * rLen}deg) translate(${index * xLen}px, ${Math.abs(index) * yLen}px);
    `;
    words.push({ word, style });
  });
  return words;
}

/**
 * 字符串截取 & 转换数组
 */
cutStr(str, maxLen, ellipsis) {
  const len = str.length;
  const newStr = len > maxLen ? str.substring(0, maxLen) : str;
  const newArr = newStr.split('');
  if (ellipsis && len > maxLen) {
    newArr.push('...');
  }
  const words = this.wordCurveHandle({
    text: newArr,
    rLen: 4,
    xLen: 2,
    yLen: 2,
  });
  return words;
},

示例

const str = '五四三贰壹贰三四五';
this.words = this.cutStr(str, 7, true);

this.words = this.wordCurveHandle(['哈', '哈', '哈', '哈']);