码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2020-04-15 00:56:56      阅读:842      评论:0      收藏:0      [点我收藏+]

标签:creat   orm   属性   nbsp   sla   slider   nim   get   anim   

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

 

技术图片

 

 

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

 

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

标签:creat   orm   属性   nbsp   sla   slider   nim   get   anim   

原文地址:https://www.cnblogs.com/sanyekui/p/12702238.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!