小程序制作大转盘抽奖功能,巨简约的代码!!

2018-11-09 admin

公司说要做个活动,迎接双十一。。然后最怕的事情出现了,就是做转盘。以前没怎么写过动画,特别怕这些东西。。。好了,废话不说。直入正题。


首先,先构图。大概的思路就是页面有个转盘,然后转盘是一个背景。转盘的指针也是用图片。如下图:

clipboard.png

然后第二步,翻查小程序文档。发现有个wx.createAnimation(创建动画的参数),参数如下。

clipboard.png

好了,开始js和界面结合一起用了。

clipboard.png 记住,animation这个属性放在你想添加动画的view。至于animationData等下解释.

let that
const app = getApp()
Page({
  data: {
    animationData:{},//初始动画数据
    Prize:[45,90,135]//45度安慰奖,90度二等奖,135度一等奖
  },
  start() {
    let animation = wx.createAnimation({    //创建动画实例
      duration: 3000,
      timingFunction:'ease'
    })
      animation.rotate(360*3+Prize[i]).step()  //因为公司项目转盘分为8个区域,所以每个区域就是45°了.先设置必定转3圈,然后加上后台返回来的标识,假设这个是安慰奖,随意,这个旋转最后就是到45度这个位置。
      that.setData({
        animationData: animation.export()//最后根据小程序文档说,这个参数需要export输出。
      })

  },
  onLoad() {
    that = this
  },
  onShow() {
  }
})

好了,大功告成,试一试吧。。。 特别说明一些坑位,动画只运行一次。怎么点击start方法动画都不会再重运行。。解决方法,在data里面定义个isTrue布尔值,判断该值。为真的时候运行正常旋转的方法,为假的时候。需要将旋转的度数变为0.再去旋转新的度数。

[转载]原文链接:https://segmentfault.com/a/1190000016964831

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-45000.html

文章标题:小程序制作大转盘抽奖功能,巨简约的代码!!

相关文章
ASP.NET 2.0 AJAX应用程序设计
ASP.NET Aiax技术是一种实现异步(Asynchronous)网络应用的技术,它被整合在ASP.NET 2.0之中,是As P.NET的一种扩展技术。通过ASENETAjax技术,开发人员或程序员可以将Web服务器控件和客户端脚本结...
2015-11-14
如何编写干净高效的CSS代码
其实CSS的学习并不困难,但在一些较为大型的项目中就显得杂乱无章,变得很难管理,尤其是不同的人编写CSS的风格总会略有不同,从团队合作的层面上来说,就更加难以沟通,所以,我们为此总结了一些如何实现高效整洁的CSS代码原则: 使用Reset但...
2015-11-12
网站变灰代码
html { filter: grayscale(100%);//IE浏览器 -webkit-filter: grayscale(100%);//谷歌浏览器 -moz-filter: g...
2015-11-12
HTML5手机游戏大爆发
HTML5技术的应用从未像今天如此火爆,从手游领域蔓延至整个移动互联网,从创业公司掘金到巨头深度介入。HTML5正推动移动互联网发展新趋势的诞生,引领未来投资的风向标,围绕HTML5创业的黄金时代即将到来。 追根溯源,HTML5手游之所以备...
2015-11-12
js实现文字向上轮播功能
话不多说,请看实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...
2017-03-10
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
jQuery的一些技巧大放送
1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。 2、jQuery对象与d...
2015-11-11
JS生成一维码(条形码)功能示例
本文实例讲述了JS生成一维码(条形码)功能的方法。分享给大家供大家参考,具体如下: 1、js代码: (function() { if (!exports) var exports = window; var BARS = [212...
2017-03-01
2015年将会有大量基于HTML5和JS的WEB应用
随着HTML5的定稿,以及JS的迅速发展,我们有理由相信,在接下来的一年里,将会涌现出大量的WEB应用,网站的表现形式将不再仅仅局限于过去的形式,必将在2015年引来一次重大改革! ...
2015-11-12
JS中Select下拉列表类(支持输入模糊查询)功能
下面给大家分享一段代码关于select下拉列表类支持输入模糊查询功能的实现代码,具体代码如下所示: <span style="font-size:14px;"> <HTML> &lt...
2017-03-06
回到顶部