Angular5 IonIC转盘抽奖应用

前言

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

内容

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

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

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

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

　　这是这个抽奖模块的流程，在模块的实现过程中最为重要的部分应该是转盘的转动部分，在这里使用了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)',

        transformOrigin: '50% 50%',
      })),
      transition('* => active', animate('800ms ease-in-out'))
    ]),
    trigger('scory', [
      state('inactive', style({
        transform: 'scale(1)'
      })),
      state('active', style({
        transform: 'scale(1.2)'
      })),
      transition('* => active', animate('800ms ease-in-out')),
      transition('active => inactive', animate('800ms ease-in-out'))
    ]),
    trigger('slidy', [
      transition('* => *', slideAnimation),
    ]),
    trigger('fady', [
      transition('* => *', fadeAnimation),
    ])
  ]
})

小结

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