美文网首页
小程序设置动画效果

小程序设置动画效果

作者: 局外人12 | 来源:发表于2018-03-19 16:54 被阅读0次

            小程序和html页面有点不同,主要是使用js来实现动画效果,因为小程序自身有提供一种方式:wx.createAnimation(OBJECT),它创建一个动画实例animation,通过调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性,step()来停止动画,step() 表示一组动画完成。

    我们主要用wx:createAnimation({})来设置一些参数,例如持续时间、延时、加载方式等,用export()来开启动画,在页面上调用animation=”{{动画名称}}”。具体步骤:

    1)创建动画对象并设置有效参数==>wx:createAnimation({参数:有效值})

    2)创建一组动画,调用step()来表示一组动画的完成==>动画对象.动画效果.step()

    3)在data中设置一个对象vip_animal(自己随意命名),用该对象开启动画==>this.setData({vip_animal: animation.export()})

    4)在页面上调用动画对象==> animation="{{vip_animal}}"

    例子:淡入淡出动画效果(当淡入动画生效后1.5s,淡出动画开始生效)

    在wxml上调用animation="{{vip_animal}}"来显示

    如果需要设置循环效果。我们可以设置:(setAnimation为)

    另一种方式:

    在wxml上调用style="{{style_img}}"来显示

    相关文章

      网友评论

          本文标题:小程序设置动画效果

          本文链接:https://www.haomeiwen.com/subject/vrinfftx.html