设为首页 加入收藏

TOP

微信小程序wxss制作扭蛋机(三)
2019-09-24 18:11:15 】 浏览:115
Tags:程序 wxss 制作
-webkit-transform: translate(0, 0) 235 } 236 }

3.js

这一步要比css要是要简单的多,点击使动画动起来,调用api接口获取奖品就可以了

 1 Page({
 2 
 3   /**
 4    * 页面的初始数据
 5    */
 6   data: {
 7     imgUrl: app.data.imgUrl,
 8     start : false,
 9     qiu: true,
10   },
11 
12 /**
13  * 点击扭蛋机
14  */
15   eggPlay(){
16     let _this = this;
17 
18     _this.setData({
19       start: true,
20     })
21     setTimeout(() => {
22       _this.setData({
23         start: false,
24         qiu: false,
25       })
26       //球落下动画
27       var animation = wx.createAnimation({
28         duration: 1500,
29         timingFunction: 'ease',
30       });
31       animation.opacity(1).step()
32       this.setData({
33         ani: animation.export()
34       })
35     }, 3000);
36 
37     _this.setData({
38       qiu: true
39     })
40     //将动画返回到开始位置
41     var animation = wx.createAnimation({
42       duration: 1500,
43       timingFunction: 'ease',
44     });
45     animation.opacity(0).step()
46     this.setData({
47       ani: animation.export()
48     })
49   },

 这个动画有个小的bug,就是连续点击按钮动画时间会变快,如果有更好的方法可以留言交流。

首页 上一页 1 2 3 下一页 尾页 3/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇JS高级程序设计笔记 下一篇jQuery——复选框操作

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目