작은 프로그램 뒤집기, 왼쪽 미끄럼, 축소, 커지고 사라지는 등 효과

4873 단어 소절차
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
 '../../imgs/animate.jpg' animation="{{animationLsi}}" style="position: relative; left: -500px;">
 

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

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


  },

좋은 웹페이지 즐겨찾기