实现微信小程序实现渐入渐出动画效果
在 App.JS 中写入全局方法
- App({
- // 渐入, 渐出实现
- show : function(that,param,opacity){
- var animation = wx.createAnimation({
- // 持续时间 800ms
- duration: 800,
- timingFunction: 'ease',
- });
- //var animation = this.animation
- animation.opacity(opacity).step()
- // 将 param 转换为 key
- var JSON = '{"' + param + '":""}'
- JSON = JSON.parse(JSON);
- JSON[param] = animation.export()
- // 设置动画
- that.setData(JSON)
- },
- // 滑动渐入渐出
- slideupshow:function(that,param,px,opacity){
- var animation = wx.createAnimation({
- duration: 800,
- timingFunction: 'ease',
- });
- animation.translateY(px).opacity(opacity).step()
- // 将 param 转换为 key
- var JSON = '{"' + param + '":""}'
- JSON = JSON.parse(JSON);
- JSON[param] = animation.export()
- // 设置动画
- that.setData(JSON)
- },
- // 向右滑动渐入渐出
- sliderightshow: function (that, param, px, opacity) {
- var animation = wx.createAnimation({
- duration: 800,
- timingFunction: 'ease',
- });
- animation.translateX(px).opacity(opacity).step()
- // 将 param 转换为 key
- var JSON = '{"' + param + '":""}'
- JSON = JSON.parse(JSON);
- JSON[param] = animation.export()
- // 设置动画
- that.setData(JSON)
- }
- })
在页面 index.JS 中定义动画
- //index.JS
- // 获取应用实例
- const App = getApp(); // 获取全局变量
- Page({
- data: {},
- /**
- * 生命周期函数 -- 监听页面显示
- */
- onShow: function () {
- let that = this;
- // 淡入
- setTimeout(function () {
- App.slideupshow(this, 'slide_up1', 200, 1)
- }.bind(this), 1000);
- // 淡出
- setTimeout(function () {
- App.slideupshow(this, 'slide_do1', 0, 0)
- }.bind(this), 1000);
- },
- })
注意: 查看上面 show 函数定义查看参数含义
第一个参数是当前的页面对象, 方便函数 setData 直接返回数据
第二个参数是绑定的数据名, 传参给 setData, 详细见上面
第三个参数是上下滑动的 px, translateY() 属性
第四个参数是需要修改为的透明度, 这里是 1, opacity 属性
设置动画的初始样式
- .index{
- opacity: 0; // 透明度数
- transform: translateY(-200px); // 偏移量
- }
在页面 index.wxml 中引入就完成了
- // index.wxml
- <view class="index" animation="{{slide_up1}}"></view>
来源: http://www.bubuko.com/infodetail-3507412.html