前言

　　一个移动端的项目总会需要有一些动态的交互来丰富整个应用的使用。在这一次的开发中，加入了一个关于转盘抽奖的游戏需求。下面我们一起来看看具体效果和过程。

内容

　　首先进入模块首页，是一个简单的欢迎页面。

　　点击开始旅行进入，存储用户信息。

　　载入转盘抽奖页面，显示抽奖内容。

　　转动抽奖，并提示抽奖结果。

　　这是这个抽奖模块的流程，在模块的实现过程中最为重要的部分应该是转盘的转动部分，在这里使用了Angular的Animations方法，它可以让页面加入动态的旋转效果。下面附上我代码应用：
　　

@Component({ selector: 'page-roulette',templateUrl: 'roulette.html',animations: [ trigger('rotaty',[ state('inactive',style({ transform: 'rotate(0deg)',transformOrigin: '50% 50%',})),state('active',style({ transform: 'rotate('+Math.random()*3600+'deg)',transition('* => active',animate('800ms ease-in-out')) ]),trigger('scory',style({ transform: 'scale(1)' })),style({ transform: 'scale(1.2)' })),animate('800ms ease-in-out')),transition('active => inactive',trigger('slidy',[ transition('* => *',slideAnimation),]),trigger('fady',fadeAnimation),]) ] })

小结

　　不断实现新的需求，加深自己对于前端的了解。荣幸与您分享~

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!