微信小程序实现css动画效果

时间：2019-06-30 09:39:03 收藏：0 阅读：1799

　　最近在写微信小程序，然后之前网页也写过css动画实现，就记一下

1.依靠css的动画效果

　　第一种实现动画效果的方法就是靠纯css来实现

@keyframes animations{
    0% {
        ...
    }

    ...

   100% {
        ...
    } 

}

.animation{
    /*animation: name duration timing-function delay iteration-count direction;*/
　　 /*详情参见http://www.w3school.com.cn/cssref/pr_animation.asp*/

    animation: animations 3s liner;
}

　　这种方法可以实现很复杂的效果，像背景图片自动轮播（用infinite配合delay）什么的。

　　但是写起来比较复杂，而且没有办法根据事件触发，所以小程序推出了wx.creatAnimation()的API

2.依靠API的动画实现

　　第二张方法就是依靠微信小程序提供的API来实现。

　　wx.createAnimation(Object object)

　　首先需要在wxml中设置好animation

<view animation=‘{{animationdata}}‘></view>

　　然后在js里设置好动画数据

Page({
  data:{
    animationdata:{}
  },

  ...

})

　　最后通过调用API实现动画

var animation = wx.createAnimation({
      duration: 2000,
      timingFunction: ‘ease‘,
      delay: 3000
    })

animation.translate(0, -height*3/10)

.opacity(0.7)

　　　　　 .step()

this.setData({

animationData: animation.export()

})

　　技术图片

　　详见小程序官方文档https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/wx.createAnimation.html

　　其实没什么好说的，小程序把繁琐的css封装成API了，这样的好处就是很方便，但是缺点就是实现复杂效果比较麻烦。。。

　　值得一提的是animation.step()，同一step的动画会同时执行

animation.translate(0, -height*3/10)
              .opacity(0.7)
              .step()       //以上为同一步执行的的动画
              .opacity(1)
              .step()       //此为下一步的动画

//不同步骤的动画如果不加入参数是根据wx.creatAnimation(object)里的参数来的

　　技术图片

　　最后说一下this.setdata里的animation.export()

　　技术图片

　　其实微信小程序的官方文档里讲解的很清楚了，特别是https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.html里的示例代码，看一下就明白了。

　　差不多就这样。。。其实还有通过JavaScript实现动画效果的，那个我还没摸索过，只能写点自己比较了解的。