微信小プログラムアニメーション効果,小プログラム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: {
     

  },
})