vue+css3实现转盘抽奖的示例代码

  发布时间:2019-06-25 15:04:10   作者:mirari   我要评论

这篇文章主要介绍了vue+css3实现转盘抽奖的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

最近有个转盘抽奖的需求,搜了一下现有的轮子,有的是用jquery的动画函数实现的,有的是用canvas绘图然后再用高频率的settimeout调用旋转方法,前者太老了没法简单移植到vue项目,后者感觉性能表现可能不会太好。也有一些用css动画的方案,设计了加速-匀速-减速三个动画,再计算偏转角度让三个动画尽可能无缝衔接,但我感觉绕了大远路,应该有更简单轻量的实现方案。个人更倾向于用transition来实现,不过网上的例子感觉还不够好,有的倾斜文字都没有对齐,最后还是自己手写了一个。

无需jquery,不用js脚本实现动画细节,动画效果完全连续无需衔接,支持动态设置2个以上任意数量的奖项。

核心思路是用transition以及rotate实现旋转动画,使用transition-origin和rotate绘制出定位较为精确的轮盘奖项。

代码及实例展示

<script src="//unpkg.com/vue/dist/vue.js"></script>
<span id="app">
  <span>prize number: {{ prizenumber }}</span>
  <button type="button" @click="!rolling && prizenumber < 8 && (prizenumber++)" :disabled="rolling || prizenumber === 8">add</button>
  <button type="button" @click="!rolling && prizenumber > 2 && (prizenumber--)" :disabled="rolling || prizenumber === 2">remove</button>
   <div class="wheel-wrapper">
    <div
      class="wheel-pointer"
      @click="onclickrotate"
    >
      start
    </div>
    <div
      class="wheel-bg"
      :class="{freeze: freeze}"
      :style="`transform: rotate(${wheeldeg}deg)`"
    >
      <div class="prize-list">
        <div
          class="prize-item-wrapper"
          v-for="(item,index) in prizelist"
          :key="index"
        >
          <div
            class="prize-item"
            :style="`transform: rotate(${(360/ prizelist.length) * index}deg)`"
          >
            <div class="prize-name">
              {{ item.name }}
            </div>
            <div class="prize-icon">
              <img :src="item.icon">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
html {
   background: #dd7c7d;
}.wheel-wrapper {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }  .wheel-pointer {
    width: 60px;
    height: 60px;
    border-radius: 1000px;
    background: yellow;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 60px;
    z-index: 10;
  }
  .wheel-bg {
    width: 100%;
    height: 100%;
    border-radius: 1000px;
    overflow: hidden;
    transition: transform 4s ease-in-out;
    background: #7eef97;
    
    &.freeze {
      transition: none;
      background: red;
    }
  }  .prize-list {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
  }  .prize-item-wrapper {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translatex(-50%);
    width: 150px;
    height: 150px;
  }  .prize-item {
    width: 100%;
    height: 100%;
    transform-origin: bottom;    .prize-name {
      padding: 16px 0;
    }    .prize-icon {}
  }
var main = {
  data() {
    return {
      freeze: false,
      rolling: false,
      wheeldeg: 0,
      prizenumber: 8,
      prizelistorigin: [
        {
          icon: "https://picsum.photos/40?random=1",
          name: "$10000"
        },
        {
          icon: "https://picsum.photos/40?random=6",
          name: "thank you!"
        },
                {
          icon: "https://picsum.photos/40?random=2",
          name: "$500"
        },
        {
          icon: "https://picsum.photos/40?random=3",
          name: "$100"
        },
                {
          icon: "https://picsum.photos/40?random=6",
          name: "thank you!"
        },
        {
          icon: "https://picsum.photos/40?random=4",
          name: "$50"
        },
        {
          icon: "https://picsum.photos/40?random=5",
          name: "$10"
        },
        {
          icon: "https://picsum.photos/40?random=6",
          name: "thank you!"
        }
      ]
    };
  },
  computed: {
    prizelist () {
      return this.prizelistorigin.slice(0, this.prizenumber)
    }
  },
  methods: {
    onclickrotate() {
      if (this.rolling) {
        return;
      }
      this.rolling = true;
      const { wheeldeg, prizelist } = this;
      const random = math.floor(math.random() * (prizelist.length ));
      console.log(random);
      this.wheeldeg =
        wheeldeg -
        wheeldeg % 360 +
        6 * 360 +
        (360 - 360 / prizelist.length * random);
      settimeout(() => {
        this.rolling = false;
        //alert("result:" + prizelist[random].name);
      }, 4500);
    }
  },
  watch: {
    prizenumber () {
      this.freeze = true
      this.wheeldeg = 0
     
      settimeout(() => {
         this.freeze = false
      }, 0)
    }
  }
};
var app = vue.extend(main);
new app().$mount("#app");

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

最新评论