Question

回答

置顶小程序如何实现公用动画？精选热门

2019-09-203493浏览问题模块：开放讨论问题

各位大佬大家好，本人刚刚接触小程序。使用viwe写了一个按钮，希望按钮被点击时候有些反馈，于是参照了小程序的api看了一下动画，就去实现了，实现过程中遇到了几个问题，希望各位大佬赐教。
问题1：如下，本来我在index.js里面写了一个动画，但是发现点击的时候应用到该方法的按钮会全部跟着一起缩放。而不是我所需要的单个按钮进行缩放。（红色圈圈处为动画）。

//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个按钮）。

//index.wxml

</view>

</view>

</view>

</view>

</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，但是没有动画。请问各位，如何写一个通用的动画方法，在点击单个按钮时不影响其他按钮，且所有按钮都可使用该方法呢？

置顶小程序如何实现公用动画？精选热门

请选择投诉理由

删除当前帖子

删除后帖子内容及评论将一并被删除，且不可恢复。

关注“微信开放社区”公众号

反馈

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

关注“微信开放社区”公众号