最近再做一个中秋摇骰子的博饼动画,动画涉及到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); } }
只要把元素动态插入页面就可以实现骰子的动画!
上一篇: vue-cli 脚手架注意事项
下一篇: audio的兼容和使用