摇骰子动画

最近再做一个中秋摇骰子的博饼动画，动画涉及到pc端和移动端，那么骰子动画就是一个考量的点，如何比较逼真的将筛子的动画演示出来，pc端对于不兼容css3的浏览器如何平稳退化，加入音频以后如何处理,下面先看pc和移动端的博饼动画单独抠出来演示：

下面就主要说说骰子动画实现方式：

1.通过结果给对应的elem添加不同的class来进行一定轨迹的animation动画,例如：

服务端返回的是data={dices: [4, 4, 4, 2, 5, 5], titles: "三红"}，通过dices的值给元素加对应的class(dice1,dice2…)，但是这样的方式有个问题就是博饼的时候有可能出现3个4类似同样点数的结果，这个时候需要对这个结果随机添加className 保证骰子动画不重复，这种方式的工作量就增加了，要定义很多的动画！

2.通过dices的数据将对应的图片插入到DOM种(本次案例也是采用该方案)：

每次摇骰子的时候,如果是4，那么就插入dice4.png,以此类推。这种方案有个弊端就是每次动画轨迹都是一样的

骰子动画实现方式：

.dice {
    position: absolute;
    width: 51px;
    height: 56px;
    overflow: hidden;
   &.dice1 {
        top: 46.4%;
        left: 44.2%;
        &.active {
            animation: r1ac 1s linear;
            -moz-animation: r1ac 1s linear;
            -webkit-animation: r1ac 1s linear;
        }
    }
    &.dice2 {
        top: 62%;
        left: 60.5%;
        &.active {
            animation: r2ac 1s linear;
            -moz-animation: r2ac 1s linear;
            -webkit-animation: r2ac 1s linear;
        }
    }
     &.dice3 {
        top: 63.5%;
        left: 37%;
        &.active {
            animation: r3ac 1s linear;
            -moz-animation: r3ac 1s linear;
            -webkit-animation: r3ac 1s linear;
        }
    }
     &.dice4 {
        top: 41.8%;
        left: 63%;
        &.active {
            animation: r4ac 1s linear;
            -moz-animation: r4ac 1s linear;
            -webkit-animation: r4ac 1s linear;
        }
    }
     &.dice5 {
        top: 34.1%;
        left: 32.2%;
        &.active {
            animation: r5ac 1s linear;
            -moz-animation: r5ac 1s linear;
            -webkit-animation: r5ac 1s linear;
        }
    }
     &.dice6 {
        top: 48%;
        left: 21.4%;
        &.active {
            animation: r6ac 1s linear;
            -moz-animation: r6ac 1s linear;
            -webkit-animation: r6ac 1s linear;
        }
    }
}

@keyframes r1ac {
    0% {
        top: 14%;
        left: 20%;
        transform: rotate(0deg);
    }
    10% {
        top: 40%;
        left: 20%;
        transform: rotate(0deg);
    }
    25% {
        top: 20%;
        left: 40%;
        transform: rotate(180deg);
    }
    40% {
        top: 26%;
        left: 50%;
        transform: rotate(360deg);
    }
    60% {
        top: 40%;
        left: 55%;
        transform: rotate(720deg);
    }
    80% {
        top: 57%;
        left: 40%;
        transform: rotate(1080deg);
    }
    100% {
        top: 51%;
        left: 30%;
        transform: rotate(1440deg);
    }
}

@-webkit-keyframes r1ac {
    0% {
        top: 14%;
        left: 20%;
        -webkit-transform: rotate(0deg);
    }
    10% {
        top: 40%;
        left: 20%;
        -webkit-transform: rotate(0deg);
    }
    25% {
        top: 20%;
        left: 40%;
        -webkit-transform: rotate(180deg);
    }
    40% {
        top: 26%;
        left: 50%;
        -webkit-transform: rotate(360deg);
    }
    60% {
        top: 40%;
        left: 55%;
        -webkit-transform: rotate(720deg);
    }
    80% {
        top: 57%;
        left: 40%;
        -webkit-transform: rotate(1080deg);
    }
    100% {
        top: 51%;
        left: 30%;
        -webkit-transform: rotate(1440deg);
    }
}

@keyframes r2ac {
    0% {
        top: 14%;
        left: 35%;
        transform: rotate(0deg);
    }
    10% {
        top: 40%;
        left: 35%;
        transform: rotate(0deg);
    }
    25% {
        top: 45%;
        left: 20%;
        transform: rotate(180deg);
    }
    40% {
        top: 51%;
        left: 40%;
        transform: rotate(360deg);
    }
    60% {
        top: 45%;
        left: 55%;
        transform: rotate(720deg);
    }
    80% {
        top: 40%;
        left: 40%;
        transform: rotate(1080deg);
    }
    100% {
        top: 45%;
        left: 55%;
        transform: rotate(1440deg);
    }
}

@-webkit-keyframes r2ac {
    0% {
        top: 14%;
        left: 35%;
        -webkit-transform: rotate(0deg);
    }
    10% {
        top: 40%;
        left: 35%;
        -webkit-transform: rotate(0deg);
    }
    25% {
        top: 45%;
        left: 20%;
        -webkit-transform: rotate(180deg);
    }
    40% {
        top: 51%;
        left: 40%;
        -webkit-transform: rotate(360deg);
    }
    60% {
        top: 45%;
        left: 55%;
        -webkit-transform: rotate(720deg);
    }
    80% {
        top: 40%;
        left: 40%;
        -webkit-transform: rotate(1080deg);
    }
    100% {
        top: 45%;
        left: 55%;
        -webkit-transform: rotate(1440deg);
    }
}

@keyframes r3ac {
    0% {
        top: 14%;
        left: 50%;
        transform: rotate(0deg);
    }
    10% {
        top: 40%;
        left: 50%;
        transform: rotate(0deg);
    }
    25% {
        top: 45%;
        left: 20%;
        transform: rotate(180deg);
    }
    40% {
        top: 28%;
        left: 40%;
        transform: rotate(360deg);
    }
    60% {
        top: 37%;
        left: 55%;
        transform: rotate(720deg);
    }
    80% {
        top: 45%;
        left: 40%;
        transform: rotate(1080deg);
    }
    100% {
        top: 54%;
        left: 45%;
        transform: rotate(1440deg);
    }
}

@-webkit-keyframes r3ac {
    0% {
        top: 14%;
        left: 50%;
        -webkit-transform: rotate(0deg);
    }
    10% {
        top: 40%;
        left: 50%;
        -webkit-transform: rotate(0deg);
    }
    25% {
        top: 45%;
        left: 20%;
        -webkit-transform: rotate(180deg);
    }
    40% {
        top: 28%;
        left: 40%;
        -webkit-transform: rotate(360deg);
    }
    60% {
        top: 37%;
        left: 55%;
        -webkit-transform: rotate(720deg);
    }
    80% {
        top: 45%;
        left: 40%;
        -webkit-transform: rotate(1080deg);
    }
    100% {
        top: 54%;
        left: 45%;
        -webkit-transform: rotate(1440deg);
    }
}

@keyframes r4ac {
    0% {
        top: 28%;
        left: 20%;
        transform: rotate(0deg);
    }
    10% {
        top: 52%;
        left: 20%;
        transform: rotate(0deg);
    }
    25% {
        top: 34%;
        left: 40%;
        transform: rotate(180deg);
    }
    40% {
        top: 43%;
        left: 50%;
        transform: rotate(360deg);
    }
    60% {
        top: 54%;
        left: 35%;
        transform: rotate(720deg);
    }
    80% {
        top: 45%;
        left: 20%;
        transform: rotate(1080deg);
    }
    100% {
        top: 41%;
        left: 40%;
        transform: rotate(1440deg);
    }
}

@-webkit-keyframes r4ac {
    0% {
        top: 28%;
        left: 20%;
        -webkit-transform: rotate(0deg);
    }
    10% {
        top: 52%;
        left: 20%;
        -webkit-transform: rotate(0deg);
    }
    25% {
        top: 34%;
        left: 40%;
        -webkit-transform: rotate(180deg);
    }
    40% {
        top: 43%;
        left: 50%;
        -webkit-transform: rotate(360deg);
    }
    60% {
        top: 54%;
        left: 35%;
        -webkit-transform: rotate(720deg);
    }
    80% {
        top: 45%;
        left: 20%;
        -webkit-transform: rotate(1080deg);
    }
    100% {
        top: 41%;
        left: 40%;
        -webkit-transform: rotate(1440deg);
    }
}



@keyframes r5ac {
    0% {
        top: 28%;
        left: 35%;
        transform: rotate(0deg);
    }
    10% {
        top: 52%;
        left: 35%;
        transform: rotate(0deg);
    }
    25% {
        top: 54%;
        left: 50%;
        transform: rotate(180deg);
    }
    40% {
        top: 34%;
        left: 40%;
        transform: rotate(360deg);
    }
    60% {
        top: 45%;
        left: 35%;
        transform: rotate(720deg);
    }
    80% {
        top: 55%;
        left: 50%;
        transform: rotate(1080deg);
    }
    100% {
        top: 58%;
        left: 60%;
        transform: rotate(1440deg);
    }
}

@-webkit-keyframes r5ac {
    0% {
        top: 28%;
        left: 35%;
        -webkit-transform: rotate(0deg);
    }
    10% {
        top: 52%;
        left: 35%;
        -webkit-transform: rotate(0deg);
    }
    25% {
        top: 54%;
        left: 50%;
        -webkit-transform: rotate(180deg);
    }
    40% {
        top: 34%;
        left: 40%;
        -webkit-transform: rotate(360deg);
    }
    60% {
        top: 45%;
        left: 35%;
        -webkit-transform: rotate(720deg);
    }
    80% {
        top: 55%;
        left: 50%;
        -webkit-transform: rotate(1080deg);
    }
    100% {
        top: 58%;
        left: 60%;
        -webkit-transform: rotate(1440deg);
    }
}

@keyframes r6ac {
    0% {
        top: 28%;
        left: 50%;
        transform: rotate(0deg);
    }
    10% {
        top: 52%;
        left: 50%;
        transform: rotate(0deg);
    }
    25% {
        top: 40%;
        left: 60%;
        transform: rotate(180deg);
    }
    40% {
        top: 43%;
        left: 30%;
        transform: rotate(360deg);
    }
    60% {
        top: 57%;
        left: 55%;
        transform: rotate(720deg);
    }
    80% {
        top: 55%;
        left: 30%;
        transform: rotate(1080deg);
    }
    100% {
        top: 62%;
        left: 35%;
        transform: rotate(1440deg);
    }
}

@-webkit-keyframes r6ac {
    0% {
        top: 28%;
        left: 50%;
        -webkit-transform: rotate(0deg);
    }
    10% {
        top: 52%;
        left: 50%;
        -webkit-transform: rotate(0deg);
    }
    25% {
        top: 40%;
        left: 60%;
        -webkit-transform: rotate(180deg);
    }
    40% {
        top: 43%;
        left: 30%;
        -webkit-transform: rotate(360deg);
    }
    60% {
        top: 57%;
        left: 55%;
        -webkit-transform: rotate(720deg);
    }
    80% {
        top: 55%;
        left: 30%;
        -webkit-transform: rotate(1080deg);
    }
    100% {
        top: 62%;
        left: 35%;
        -webkit-transform: rotate(1440deg);
    }
}

只要把元素动态插入页面就可以实现骰子的动画！