收藏
回答

小程序如何实现公用动画?

各位大佬大家好,本人刚刚接触小程序。使用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 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,但是没有动画。请问各位,如何写一个通用的动画方法,在点击单个按钮时不影响其他按钮,且所有按钮都可使用该方法呢?


最后一次编辑于  09-20
回答关注问题邀请回答
收藏

2 个回答

问题标签