/*

noticeMsg.js

　by: FEer_llx

　2016/06/09

　*/

var notice = {
  //用於計時器，判斷動畫事件結束時下一個動畫事件才能執行
  flag: true,
  //頭部自動下拉隱藏提示效果
  autoSlideDown: function (opt) {
    opt._this.animation.translateY(opt.changeVaule).step()
    opt._this.setData({
      animation: opt._this.animation.export()
    })
    setTimeout(function () {
      opt._this.animation.translateY(-opt.changeVaule).step()
      opt._this.setData({
        animation: opt._this.animation.export()
      })
    }, 3000)
  },
  //頭部下拉提示效果
  slideDown: function (opt) {
    var _self = this;
    opt._this.animation.translateY(45).step()
    opt._this.setData({
      animation: opt._this.animation.export()
    })
  },
  //頭部隱藏提示效果
  slideUp: function (opt) {
    opt._this.animation.translateY(-45).step()
    opt._this.setData({
      animation: opt._this.animation.export()
    })
  },
  //頁面居中自動淡入淡出提示效果
  autoFade:function(opt){
    var that = this;
    that.flag = false;
    opt._this.animation.opacity(1).step()
    opt._this.setData({
      animation: opt._this.animation.export()
    })
    setTimeout(function () {
      opt._this.animation.opacity(0).step()
      opt._this.setData({
        animation: opt._this.animation.export()
      })
    }, 2000)
    setTimeout(function () {
      opt._this.setData({
        showTip: false
      })
      that.flag = true;
    }, 3000)
  },
  init: function (obj) { 
    var that = this;
    if (!obj || !obj.pointTo || !obj.effect) {
      return;
    }
    var opt = {
      _this: obj.pointTo,
      effect: obj.effect,
      during: obj.during || 100,
      changeVaule: obj.changeVaule || 50,
      delay: obj.delay || 0,
      transformOrigin: obj.transformOrigin || ‘50% 50% 0‘,
      timingFunction: obj.timingFunction || "linear",
    }
    opt._this.animation = wx.createAnimation({
      duration: opt.during,
      timingFunction: opt.timingFunction,
      delay: opt.delay,
      transformOrigin: opt.transformOrigin
    })
    //執行對應的效果函數
    if (opt.effect == "autoSlideDown"){
      that.autoSlideDown(opt);
　　　　return;
    } else if (opt.effect == "slideDown") {
      that.slideDown(opt);
      opt._this.closeTip = function (){
        that.slideUp(opt);
      }
　　　　return;
    } else if (opt.effect == "autoFade"){
      opt._this.setData({
        showTip: true
      })
      if(that.flag){
        that.autoFade(opt);
      }
　　　　return;
    }else{
　　　　return;
　　}
  }
}

module.exports.notice = notice;

調用：

var noticeUtils = require(‘../../utils/noticeUtils‘)；

Page({
　　data:{
　　　　animation: ""
　　}

　　...

　　//在需要調用的地方調用該初始化方法即可如：
　　noticeUtils.notice.init({
 　　 pointTo: this,
　　　//動畫事件函數名稱
 　　 effect: "slideDown",
　　  //動畫執行的時間
 　　 during: 500,
　　  //動畫過程需要改變的值，如改變的位移
 　　 changeVaule: 45,
　　　//動畫延遲多少時間執行
 　　 delay: 0,
　　  //動畫中心點
  　　transformOrigin: ‘50% 50% 0‘,
　　　//動畫執行時的線性
  　　timingFunction: "linear"
　　})

　　...

)}

wxml：

  <view animation="{{animation}}" class="tip-slidedown"><text>提示：你好！</text><icon bindtap="closeTip" type="cancel" size="20" color="#fff" style="float: right"/></view>

補充說明：

　　待續~~

自制微信小程序 提示插件 -- noticeUitis.js