小程序 翻转, 左侧滑入, 缩小变大消失等等特效

1,缩小变大消失特效:

//js
 data: {
    animationData: null
    },
 ani_smallbigOut: function(){
    let that = this
    console.log("animate")
    var animation = wx.createAnimation({
      duration: 750,
      timingFunction: 'ease',
    })

    this.animation = animation

    animation.scale(0.4, 0.4).step()
    animation.scale(4, 4).step()
    that.setData({
      animationData: animation.export(),

    })
    setTimeout(function(){
      that.setData({
        flag: false
      })
    },1500)

  },

2, 渐隐消失

//js
fadeOut: function(){
    var animation = wx.createAnimation({
      duration: 800,
      timingFunction: 'linear'
    })

    this.animation = animation

    animation.opacity(0).step()

    this.setData({
      animationData: animation.export(),

    })
  },

3, 渐显:

fadeIn: function () {
    var animation = wx.createAnimation({
      duration: 500,
      timingFunction: 'linear'
    })

    // this.animation = animation

    animation.opacity(1).step()

    this.setData({
      animationData: animation.export(),

    })
  },

5, 3d旋转( 翻转)

 rotate3d: function(){
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease'
    })
    //rotate3d: 参数 x,y,z轴,  翻转度数
    //其中x,y,z轴为0-1范围,y轴设置为1,代表以y轴为旋转轴
    animation.rotate3d(0,1,0,180).step()
    this.setData({
      rotate3dA: animation.export()
    })

  },

6,倾斜:


  skewXY: function(){
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease'
    })
    //参数: ax,[ay]   参数范围-180~180;一个参数时,Y轴坐标不变,X轴坐标延顺时针倾斜ax度;两个参数时,分别在X轴倾斜ax度,在Y轴倾斜ay度
    animation.skew(0, 10).step()
    this.setData({
      skeyA: animation.export()
    })
  },

7, 左侧滑入:

//wxml
 <image src='../../imgs/animate.jpg' animation="{{animationLsi}}" style="position: relative; left: -500px;"></image>
 <button bindtap='leftSlideIn'>leftSlideIn</button>

//js
  leftSlideIn: function(){
     let animation = wx.createAnimation({
       duration: 1000,
       timingFunction:'ease'
     })

     animation.translateX(500).step()
     this.setData({
       animationLsi: animation.export()
     })


  },
  • 3
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值