A simple example of WeChat applet animation

<view class="container">
<view animation="{{animation}}" class="view">I'm doing animation</view>
</view>
<button type="primary" bindtap="translate">Rotate</button>
 

//js
Page({
 data: {

 },
 onReady: function () {
  // Page rendering is completed  //Instantiate an animation   = ({
   // Animation duration, unit ms, default value 400   duration: 400,
   /**
    * /#0,0,.58,1
    * linear animation has always been relatively uniform
    * ease from uniform speed to acceleration at uniform speed
    * ease-in Slow to uniform speed
    * ease-in-out From slow to constant speed to slow
    *
    * /articles/neqMVr
    * step-start The animation jumps to 100% from the beginning until the animation duration ends and flashes by
    * step-end Keeps 0% style until the animation duration ends.
    */
   timingFunction: 'ease',
   // How long does it take to start delay   delay: 100,
   /**
    * What is the basis for animation? Demonstrate the effect yourself
    * left, center right is the horizontal value, the corresponding percentage value is left=0%; center=50%; right=100%
    * top center bottom is the value in the vertical direction, where top=0%; center=50%; bottom=100%
    */
   transformOrigin: 'left top 0',
   success: function (res) {
    (res)
   }
  })
 },
 /**
  *Displacement
  */
 translate: function () {
  //The x-axis displacement is 100px
  (100, 0).step()
  ({
   //Output animation   animation: ()
  })
 }


})