微信小程序动画效果,小程序animation动画

微信小程序动画效果

最近一直在做小程序开发,在官方文档中无意间看到过渡动画效果,我就有点小激动,用每一个开发框架的时候我都最先研究动画和过渡

闲来无事写了一个小demo

<view class="wrapper">
    	
        <view class="headerImage" catchtap="imageAnimation"  animation="{
      {animationData}}">
            <open-data type="userAvatarUrl" >open-data>
        view>
 		
         <view class="headertext">
            <open-data type="userNickName" class="headertext">open-data>
        view>
        
view>

/*wxss代码*/
.wrapper {
     
  background: gold;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 500rpx;
}

.headerImage {
     
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 40rpx;
}

.headertext {
     
  font-size: 40rpx;
}

//js
const app = getApp()
const computedBehavior = require('miniprogram-computed')//不用理会,这事引入的计算属属性
Component({
     
  behaviors: [computedBehavior],)//不用理会,这事引入的计算属属性
  data: {
     
    //初始化
    animationData: "",

  },

  methods: {
     
    imageAnimation() {
     
      var animation = wx.createAnimation({
     

        duration: 4000,
        timingFunction: "ease",
        delay: 0,
        transformOrigin: "50% 50%",

      })
      // animation.rotate(360).step();     //旋转9
      //animation.scale(1.5).step();        //放大
      // animation.translate(0,200).step(); //偏移
      // animation.skew(30,50).step();      //倾斜x,y
      // animation.rotate(45).scale(0.8).translate(10,10).step() //同时执多个效果
      this.setData({
     
        animationData: animation.export(), //赋值
      })

    },

  },
  computed: {
     

  },
})