求助!一个关于动画方面的知识


#1

项目内容:轮盘抽奖,
需求:点击“抽奖”按钮后转盘转动几圈,随机停在一个位置上。
现在我遇到的问题是:
1、官网上写的过度和动画实例基本上都是用v-if&v-show来控制动画的,但该项目只是一个点击事件,不知道怎么触发动画。
2、点击“抽奖”按钮后转盘转的圈数(5~8)和最后停留的角度(0~360)是随机的,但我知道的方法如:@keyframes,里面动画的数据是写死的,我需要的是变量,不知道怎么把随机出来的数据来控制动画。


#2

是丹丹吗?紫薯布丁,紫薯布丁,沙发


#3

我们先假设一个轮盘由12个饼状div组成,我们可以很快的通过html和css写出这样一个静态轮盘,然后就是动画的问题,我们可以换个思路,不一定非要用动画,我们可以用一个指示器表示当前指向的div,然后给这个指示器增加一些样式。最后我们可以加上逻辑控制,抽象出来的div我们用一个数组表示,里面的数据结构可能包含index、奖品信息等,然后设定一个计时器,让指示器指向这个index,定时器结束则停留的index为中奖的奖品,结束的控制就是所谓的圈数。这里只是提供一个变通的思路,如果你们没有强制要求动画,你可以尝试这样去做。


#4

不知道你有没有用canvas画过时钟


#5

很遗憾,上头给的样式摆明要弄动画的


#6

请详细说明一下…


#7

不过你也给了我一个思路,把动画转动一圈分成奖品数量的动画样式,根据计时控制来触发响应区间的动画,变相达成转圈的动画效果。但是这方法想想就觉得麻烦,相信一定会有更好的方法


#8

时钟一直走的canvas,你可以百度到,我们只需要秒钟,时间会一直走(指针一直转),随机生成秒数,比如说100秒,停止转动,然后加入时间曲线,先快后慢


#9

动画一样可以做,我只是提供了一种非动画的解决思路,动画的demo我帮你找到一个:传送门


#10

看到关键代码了,不过吐个槽,我转8次都是同一个奖品,一点不随机:rage:


#11

底部圆盘固定 上面的抽奖圆盘和指针切出来,然后使用;class 给指针层添加 class 名称
新增加的class 使用css 3 的 transform:rotate 来进行旋转 你要先预估好 旋转的角度 那个角度指向那个奖品

让最后一次旋转时候 动态改变这个css3动画的参数 让他指向你设定的那个角度就好了
设定的动画的时候会有一个开始 一个结束 结束的那个角度你指向过去 感觉这种页面使用jquery 会比VUE 好写一些


#12

首先呢,抽奖一般是由后台来控制结果的,所以说转动的圈数是取决于接口返回的速度,然后停止的角度是取决于后台的奖品,所以说是不需要随机的(不过考虑到接口访问时间可能很短或断网的情况,所以要有最小圈数和最大圈数)。然后说到动画,我以前有试过使用@keyframes加上transition来实现转圈和停止,但是由关键帧切换到渐变的时候会有一个卡帧的效果,所以最后还是使用了js。