小程序帧流使用方法

小程序帧流使用方法,第1张

小程序帧流是指在小程序中控制动画的显示频率,以达到更加流畅的动画效果。具体使用方法如下:

1. 在小程序中引入wx.createAnimation()方法创建动画对象

2. 使用setInterval()或requestAnimationFrame()方法控制动画的帧率。setInterval()方法会在指定的时间间隔内循环执行动画,而requestAnimationFrame()方法则会在浏览器下一次重绘之前执行动画。

3. 在动画中使用step()方法更新动画状态,将动画状态传递给animation对象。

4. 使用export()方法将动画对象导出,以便在小程序中使用。

以下是示例代码:

```

// 创建动画对象

var animation = wx.createAnimation({

duration: 1000,

timingFunction: 'ease',

delay: 0,

transformOrigin: '50% 50% 0'

})

// 控制帧率

setInterval(function () {

// 更新动画状态

animation.translateX(100).step()

animation.rotate(360).step()

// 导出动画对象

wx.exportAnimation({

animationData: animation.export()

})

}, 1000 / 60)

```

官方文档是这样说的:①创建一个动画实例 animation。②调用实例的方法来描述动画。③最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

因为小程序是数据驱动的,给这句话加上数字标注分为三步:

前两步是定义一个动画并设置都要干什么,然后把这个设置好的“规则”扔给界面上的某个元素,让它按照这个规则执行。

当然如果有多个元素的animation="{{ani}}",也都会执行这个动画规则。

二、用例子说话

新建一个小程序,把没用的删掉修改一下,做个简单例子,上图

代码如下:

index.wxml,一个helloworld,一个按钮

<view class="container">

<view class="usermotto" animation="{{ani}}">

<text class="user-motto">{{motto}}</text>

</view>

<button bindtap='start'>动画</button>

</view>

复制

index.wxss, 为了看着方便加了个边框

.usermotto {

margin-top: 100px

border: solid

}

复制

index.js

Page({

data: {

motto: 'Hello World',

},

start:function(){

var animation = wx.createAnimation({

duration: 4000,

timingFunction: 'ease',

delay: 1000

})

animation.opacity(0.2).translate(100, -100).step()

this.setData({

ani: animation.export()

})

}

})

复制

三、相关参数及方法

简单介绍一下例子中的几个参数和方法(其他的详见官方文档):

duration: 动画持续多少毫秒

timingFunction: “运动”的方式,例子中的 'ease'代表动画以低速开始,然后加快,在结束前变慢

delay: 多久后动画开始运行

opacity(0.2) 慢慢变透明

translate(100, -100) 向X轴移动100的同时向Y轴移动-100

step(): 一组动画完成,例如想让上例中的HelloWorld向右上方移动并变透明后,再次向左移动50可以继续写 animation.translateX( -50).step() , 作用就是向右上方移动和变透明是同时进行, 这两种变化完成之后才会进行向左运行的一步。

例子:Github

 <button bindtap="powerDrawer" type="primary" size="mini" style="width: 55%" data-statu="open">中奖记录</button>  

<!-- 中间名单d窗 -->

<view class="drawer_div">

  <view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>

    <view animation="{{animationPrize}}" class="drawer_box" wx:if="{{showModalStatus}}">

      <view class="drawer_title">

        中奖记录

        <image src="../img/x@2x.png" bindtap="powerDrawer" data-statu="close"></image>

      </view>

      <view class="drawer_content">

        <view class="top grid">

          <text>

            名称:啦啦啦啦啦啦啦啦

          </text>

          <text>

            时间:2020-02-20

          </text>

        </view>

        <view class="top grid">

          <text>

            名称:啦啦啦啦啦啦啦啦

          </text>

          <text>

            时间:2020-02-20

          </text>

        </view>

    </view>

  </view>

</view>

.drawer_screen {

  width: 100%

  height: 100%

  position: fixed

  top: 0

  left: 0

  z-index: 1000

  background: #000

  opacity: 0.5

  overflow: hidden

}

/*content*/

.drawer_box {

  width: 650rpx

  overflow: hidden

  position: fixed

  top: 50%

  left: 0

  z-index: 1001

  background: #FAFAFA

  margin: -150px 50rpx 0 50rpx

  border-radius: 3px

}

.drawer_title{

  padding:30rpx 20rpx

  font-size: 36rpx

  text-align: center

  position: relative

}

.drawer_title image{

  display: inline-block

  width: 30rpx

  height: 30rpx

  position: absolute

  right: 9px

  top: 10px

}

.drawer_content {

  height: 210px

  overflow-y: scroll /*超出父盒子高度可滚动*/

  padding: 0 20rpx

}

.top{

  display: flex

  justify-content: space-between

  border-bottom: 1px dashed #ccc

}

.top text{

  display: inline-block

  height: 60rpx

  line-height: 20rpx

}

data: {

animationPrize: {},

}

powerDrawer: function (e) {

    // console.log(e)

    let currentStatu = e.currentTarget.dataset.statu

    this.util(currentStatu)

  },

  util: function (currentStatu) {

    /* 动画部分 */

    // 第1步:创建动画实例

    var animation = wx.createAnimation({

      duration: 200,  //动画时长

      timingFunction: "linear", //线性

      delay: 0  //0则不延迟

    })

    // 第2步:这个动画实例赋给当前的动画实例

    this.animation = animation

    // 第3步:执行第一组动画

    animation.opacity(0).rotateX(-100).step()

    // 第4步:导出动画对象赋给数据对象储存

    this.setData({

      animationPrize: animation.export()

    })

    // 第5步:设置定时器到指定时候后,执行第二组动画

    setTimeout(function () {

      // 执行第二组动画

      animation.opacity(1).rotateX(0).step()

      // 给数据对象储存的第一组动画,更替为执行完第二组动画的动画对象

      this.setData({

        animationPrize: animation

      })

      //关闭

      if (currentStatu == "close") {

        this.setData({

          showModalStatus: false

        })

      }

    }.bind(this), 200)

    // 显示

    if (currentStatu == "open") {

      this.setData({

        showModalStatus: true

      })

    }

  },


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/11474615.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-16
下一篇 2023-05-16

发表评论

登录后才能评论

评论列表(0条)

保存