码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2019-06-30 09:39:03      阅读:1799      评论:0      收藏:0      [点我收藏+]

标签:view   anim   mamicode   delay   creat   文档   data   dir   rip   

  最近在写微信小程序,然后之前网页也写过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实现动画效果的,那个我还没摸索过,只能写点自己比较了解的。

 

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

标签:view   anim   mamicode   delay   creat   文档   data   dir   rip   

原文地址:https://www.cnblogs.com/passbysomeone/p/11108419.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!