微信小程序-实现渐入渐出动画效果

实现微信小程序实现渐入渐出动画效果

 

 

 

在 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>

 

 

原文链接：https://blog.csdn.net/weixin_42917830/article/details/81701125