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

微信小程序动画效果

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

闲来无事写了一个小demo

<!--wxml代码-->
<view class="wrapper">
    	<!-- 微信小程序开发功能获取用户头像userAvatarUrl -->
        <view class="headerImage" catchtap="imageAnimation"  animation="{{animationData}}">
            <open-data type="userAvatarUrl" ></open-data>
        </view>
 		<!-- 微信小程序开发功能获取用户昵称userNickName -->
         <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: {

  },
})