微信小程序-實現漸入漸出動畫效果

實現微信小程序實現漸入漸出動畫效果

 

 

 

在 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