最近再做一個中秋搖骰子的博餅動畫，動畫涉及到pc端和移動端，那么骰子動畫就是一個考量的點，如何比較逼真的將篩子的動畫演示出來，pc端對于不兼容css3的瀏覽器如何平穩(wěn)退化，加入音頻以后如何處理,下面先看pc和移動端的博餅動畫單獨摳出來演示：

下面就主要說說骰子動畫實現(xiàn)方式：

1.通過結(jié)果給對應(yīng)的elem添加不同的class來進行一定軌跡的animation動畫,例如：

服務(wù)端返回的是data={dices: [4, 4, 4, 2, 5, 5], titles: "三紅"}，通過dices的值給元素加對應(yīng)的class(dice1,dice2…)，但是這樣的方式有個問題就是博餅的時候有可能出現(xiàn)3個4類似同樣點數(shù)的結(jié)果，這個時候需要對這個結(jié)果隨機添加className 保證骰子動畫不重復(fù)，這種方式的工作量就增加了，要定義很多的動畫！

2.通過dices的數(shù)據(jù)將對應(yīng)的圖片插入到DOM種(本次案例也是采用該方案)：

每次搖骰子的時候,如果是4，那么就插入dice4.png,以此類推。這種方案有個弊端就是每次動畫軌跡都是一樣的

骰子動畫實現(xiàn)方式：

.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);

}

}

只要把元素動態(tài)插入頁面就可以實現(xiàn)骰子的動畫！

總結(jié)

以上是生活随笔為你收集整理的摇筛子动画 android,摇骰子动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。