各位大佬大家好，本人刚刚接触小程序。使用viwe写了一个按钮，希望按钮被点击时候有些反馈，于是参照了小程序的api看了一下动画，就去实现了，实现过程中遇到了几个问题，希望各位大佬赐教。
问题1：如下，本来我在index.js里面写了一个动画，但是发现点击的时候应用到该方法的按钮会全部跟着一起缩放。而不是我所需要的单个按钮进行缩放。（红色圈圈处为动画）。
var app = getApp(); Page({ data: { imgUrls: [{ link: '/pages/index/index', url: '/images/banner-one.jpg' }, { link: '/pages/index/index', url: '/images/banner-two.jpg' }], indicatorDots: true, indicatorColor: "#fff", activeColor: "coral", autoplay: true, interval: 5000, duration: 1000, animationData: {} }, activitv: function() { wx.navigateTo({ url: '../activity-details/activity-details', }) }, about:function(){ app.about(this); }, sbuttom: function () { console.log("点击事件"); var that = this; var animation = wx.createAnimation({ // 动画时间 duration: 50, // 定义动画效果，当前是匀速 timingFunction: 'linear' }) // 将该变量赋值给当前动画 that.animation = animation // 先在y轴偏移，然后用step()完成一个动画 animation.scale(0.8, 0.8).step() animation.scale(1, 1).step() // 用setData改变当前动画 that.setData({ // 通过export()方法导出数据 animationData: animation.export(), }), setTimeout(function () { that.setData({ animationData: animation.export(), }) }, 200) wx.switchTab({ //url: path, }) } }) |
写好动画后在index.js的对应view中使用该方法结果点击一个按钮另一个跟着动了（下面代码为4个按钮）。
<view class="index-nav weui-flex"> <view class="weui-flex__item"> <view class="index-nav-block" > <view class="index-nav-block-icon" animation='{{animationData}}'bindtap='sbuttom'> <view class='iconfont icon-icon_homepage'></view> </view> <view class="index-nav-block-p">学校概况</view> </view> <view class="index-nav-block"> <view class="index-nav-block-icon"> <view class='iconfont icon-icon_doc'></view> </view> <view class="index-nav-block-p">校园资讯</view> </view> <view class="index-nav-block"> <view class="index-nav-block-icon"animation="{{animationData}}"bindtap="sbuttom"> <view class='iconfont icon-icon_workset'></view> </view> <view class="index-nav-block-p">活动展示</view> </view> <view class="index-nav-block"> <view class="index-nav-block-icon"> <view class='iconfont icon-icon_group'></view> </view> <view class="index-nav-block-p">联系我们</view> </view> </view> </view> |
问题2：
后来我尝试写在app.js公用方法中，并给了log，log倒是输出了，缩放动画没展现了。（请看代码块）about方法是动画
//app.js path:String, // module.about(); App({ onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId } }) // 获取用户信息 wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 wx.getUserInfo({ success: res => { // 可以将 res 发送给后台解码出 unionId this.globalData.userInfo = res.userInfo // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 if (this.userInfoReadyCallback) { this.userInfoReadyCallback(res) } } }) } } }) }, globalData: { userInfo: null }, about: function () { console.log("点击事件"); var that = this; var animation = wx.createAnimation({ // 动画时间 duration: 50, // 定义动画效果，当前是匀速 timingFunction: 'linear' }) // 将该变量赋值给当前动画 that.animation = animation // 先在y轴偏移，然后用step()完成一个动画 animation.scale(0.8, 0.8).step() animation.scale(1, 1).step() // 用setData改变当前动画 that.setData({ // 通过export()方法导出数据 animationData: animation.export(), }), setTimeout(function () { that.setData({ animationData: animation.export(), }), console.log("点击动画"); }, 200) wx.switchTab({ // url: path, }) } }) |
写好后在index.js中调用了app.js的about方法请看第一个段index中带有about的代码块，之后在对应的view中调用了about方法。就是讲sbuttom改成了about，结果点击按钮，正确输出了log，但是没有动画。请问各位，如何写一个通用的动画方法，在点击单个按钮时不影响其他按钮，且所有按钮都可使用该方法呢？
兄弟看一下一楼的如何整理为代码片段..你这样不好帮你测试,整理完可以发出来,谢谢合作..
整理成代码片段吧
https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html