css3 转盘抽奖实践(sass)

思路解释

转盘抽奖，就是像这样子的转盘。（如下图）
点击中间的“点击抽奖”按钮，然后后面的圆形转盘开始转动，最后停在所在结果里。

Paste_Image.png

如何实现旋转并且让指针指向目标区域？

我这里的思路是用css3的一些功能，为了能够写的便捷，我用了sass工具进行编译。

$get1: - (120deg+180deg)/2 + 5400deg;
$get2: - (225deg+180deg)/2 + 5400deg;
$get5: - (225deg+270deg)/2 + 5400deg;
$get10: - (45deg+90deg)/2 + 5400deg;
$get20: - (0deg+45deg)/2 + 5400deg;
$get50: - (360deg+334deg)/2 + 5400deg;
$get100: - (308deg+334deg)/2 + 5400deg;

// 这里的角度，都是转盘图片中，各个区域的角度，最终将指针指向每个扇形的中心。
// 5400deg 是转的圈数

$timing: cubic-bezier(0,0,0,1);

@mixin transformRotate($deg) {
  transform:rotate($deg);
  -ms-transform:rotate($deg); /* Internet Explorer */
  -moz-transform:rotate($deg); /* Firefox */
  -webkit-transform:rotate($deg); /* Safari 和 Chrome */
  -o-transform:rotate($deg); /* Opera */
}
@mixin getAnimation($attribute) {
  animation: #{$attribute};
  -moz-animation: #{$attribute};    /* Firefox */
  -webkit-animation: #{$attribute}; /* Safari 和 Chrome */
  -o-animation: #{$attribute};  /* Opera */
}

@mixin keyframes($animationname, $get) {
  @keyframes #{$animationname}
  {
    100% {
      @include transformRotate($get);
    }
  }
  @-moz-keyframes #{$animationname} /* Firefox */
  {
    100% {
      @include transformRotate($get);
    }
  }
  @-webkit-keyframes #{$animationname} /* Safari 和 Chrome */
  {
    100% {
      @include transformRotate($get);
    }
  }
  @-o-keyframes #{$animationname} /* Opera */
  {
    100% {
      @include transformRotate($get);
    }
  }
}

@include keyframes(Kget1, $get1);
@include keyframes(Kget2, $get2);
@include keyframes(Kget5, $get5);
@include keyframes(Kget10, $get10);
@include keyframes(Kget20, $get20);
@include keyframes(Kget50, $get50);
@include keyframes(Kget100, $get100);

.get1 {
  @include getAnimation('Kget1 10s #{$timing} forwards');
}
// forwards 属性是为了在动画结束的时候不再跳回初始的状态
.get2 {
  @include getAnimation('Kget2 10s #{$timing} forwards');
}
.get5 {
  @include getAnimation('Kget5 10s #{$timing} forwards');
}
.get10 {
  @include getAnimation('Kget10 10s #{$timing} forwards');
}
.get20 {
  @include getAnimation('Kget20 10s #{$timing} forwards');
}
.get50 {
  @include getAnimation('Kget50 10s #{$timing} forwards');
}
.get100 {
  @include getAnimation('Kget100 10s #{$timing} forwards');
}

下面主要对 cubic-bezier 属性进行一些注释

Paste_Image.png

cubic-bezier即为贝兹曲线中的绘制方法。图上有四点，P0-3，其中P0、P3是默认的点，对应了[0,0], [1,1]。而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的。cubic-bezier(x1, y1, x2, y2) 为自定义，x1,x2,y1,y2的值范围在[0, 1]。
预留的几个特效：
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)
也就是说第四个n是y2，和x2共同决定P2的位置